See ale Coding Standard Guidelines.

Do NOT write CSS, write LESS!

Always write your code to a .less (or .sass) file and let Grunt compile it to a .css file and even a .min.css file.

Use Grunt all the time

Learn to use grunt in the background. It will automatically recompile your LESS to CSS when you make a change.

Use modules

Every time you find identical LESS/CSS code in multiple files, or any time you want to copy/paste code to multiple files yourself, create a module!.

A module should be a file like /rsc/less/module_name.module.less.

Then, in each LESS file where you would have had duplicate code, add @import '.../module_name.module.less'.

This applies to:

• styles used in front office + backoffice
• styles used in multiple default skins
• styles used in both bootstrap and non-bootstrap skins

This does *NOT* apply to:

• styles used in multiple custom skins that are not part of the core distribution

Class names

• Use _ (not -) in class names.
  • We do this because it makes it easier to double click a class name to select it entirely.
  • This also actually helps identifying bootstrap classes versus properietary classes.
• When the core (or a widget, etc.) outputs a class="...", your class names should start with a very specific prefix like evo_.
  • For example you should use evo_username rather than username or evo_photo instead of photo.
  • This avoids conflicts with other things users may have in their skins.
  • Another example of a prefix is ufld_ which means "User field". The probability that this prefix is used by someone/something else on a page is very low.
  • Using poorly specific prefixes is nto a good idea. For example new_username or big_photo does not count as a prefix.
  • Class names without an evo_ or other very specific prefix should be used only in the LESS/CSS files of skins.
  • Any new classname added to the core must follow this rule. The reason why this rule is not enforced for existing class names is backward compatibility. If we change all existing class names suddenly, it will break many skins.
• Use __ (double underscore) for modifier classes.

  • For example, you may have

    <a href="..." class="round_button"><span class="round_button_icon">...</span><span class="round_button_text">...</span></a>

    that is used several times on a page. If you want to modify it, use modifier classes like round_button__orange or round_button_icon__big like this:
    

    <a href="..." class="round_button round_button__orange"><span class="round_button_icon round_button_icon__big">...</span><span class="round_button_text">...</span></a>

Use margins rather than paddings

When equivalent, prefer margins to paddings.

Asymetric paddings are generally not cool. They make things ugly if we change the background color, for example on hover. Of course, you still need asymetric paddings if you need to compensate for an icon/glyph that is not well centered.