[TYPO3-dev] CSS Coding GuidLines

[Christopher Torgalson]

Hi,

On Sun, Jun 1, 2008 at 10:12 PM, Steffen Kamper <steffen at sk-typo3.de> wrote:
> Hi,
>
> as we don't have CGL for css i would like to initiate that and do a proposal
> here.
> As CSS isnt't that complicate syntax, it's short enough to write it down
>
> 1. use lower case for all selectors except named classes or id's that use
> camelCase
>
> 2. use following formatting rules:
>
> selector[SPACE]{
> [TAB]style:[SPACE]value;
> }
> [empty line]
>
> for more selectors use single lines
>
> selector1,
> selector2,
> selector3[SPACE]{
> [TAB]style:[SPACE]value;
> }
> [empty line]
>
> 3. group styling and comment what they do
>
> /* styling module menu */
> ...
>
> 4. use lower case HEX-values
> color: #eeff00;
> background-color: #aaa;
>
> These are the formatting rules, but we also need common sense in:
> a) use em for dimension for scalable content, use px only for fixed formats
> never use pt. 0Values are 0 and not 0px or 0em
> b) try to pretend intensive usage of abb. like
> background: transparent url('gfx/ol/line.gif') repeat-y top left;
> and use single expressions instead:
> background-color: transparent;
> background-image: url('gfx/ol/line.gif');
> etc.
>
>
> Ok, that's my proposal. Did i forgot something or do you veto for something?
> Feel free to comment.


I'd say +1 to all except that I'd like to hear a justification for
item (b) above (also, I assume you meant 'prevent' and not
'pretend'?). I can't think of any particular reason for recommending
*against* the use of the 'background' shortcut (or its analogues)…

Do you have any thoughts about how CSS files should be ordered (aside
from cases where the order is dictated by specificity)?


-- 
Christopher Torgalson
http://www.typo3apprentice.com/