Why do CSS classes in Omega start with l- like l-content ? I have to say I don't really like it for example because when double clicking or ALT + SHIFT + ARROW I can't select the whole CSS class at once... so I would be interested in learning if there is a particular reason behind that ?

Comments

fubhy’s picture

That means "layout". That's a concept from SMACSS to differentiate between contexts so that layout styling does not leak into content styling and vica versa (e.g. if you would name a class "content" instead of "l-content" that would be rather ambiguous and probably leak into something else). This is a concept from the D8 CSS architecture/naming guidelines and we are currently discussing whether to use "l-" or "layout-" to make it more obvious.

#2207647: [policy, no patch] Use layout- prefixes instead of l- in CSS Coding Standards

Nicolas Bouteille’s picture

Status: Active » Closed (works as designed)

Ok thanks!
From this experience I would definitely vote for layout-content.
I wish this could be layout_content with an underscore instead... hate hyphens in Drupal's class names! ^^

fubhy’s picture

We are following this in Omega:

https://drupal.org/node/1886770
https://drupal.org/node/1887918

I actually like the hyphens more than underscores. Since this is also what D8 is going for it is what we adopted in Omega 7.x-4.x to provide a maximum of forward compatibility.

nevets’s picture

The use of the hyphen dates back to when CSS1 still ruled and the underscore was not a legal character in css identifiers.

Nicolas Bouteille’s picture

Do you have particular reasons to prefer hyphens over underscores that could help me like them too? Or is it just because this is the Drupal way...?