[TYPO3-dev] CSS Coding GuidLines

[Erik Svendsen]

Hello Steffen,

Nice initiative. Another +1

As a TYPO3 guy who mostly implement TYPO3 websites, and doing all the HTML 
and CSS coding, I'm bit feed up with the unorganized way of CSS in some extensions.

All your ideas are more and less exactly how I prefer to do it, exept I'm 
a bit unorganized beetween the use of camelCase and hyphen, and . But that 
most old habbits.

WBR,
Erik Svendsen
www.linnearad.no

> 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.
> 
> vg Steffen
>