Use a wrapper class to prevent style leaks. Each less file should have a wrapper that contains the rest of the selectors. This is to help control CSS's global namespace.
Class names should be assigned using the BEM method
this will prevent namespace conflicts with plugins.
should make it easier for other developers to read your code
specific selectors like this allow you to keep you selector depth shallow.
We will use camelCase in our class names so that they can be selected with a double click. bodyName__elementName. If it has a modifier, it should still follow traditional BEM (luckily, true modifiers are pretty rarely needed) bodyName__elementName--modifierName.
Use ID and class names that are as short as possible but as long as necessary.
E.g. .nav not .navigation, .author not .atr
You should only go 3 levels deep with your selectors. Usually, only 2 levels is necessary. This includes the wrapper class.
BEM makes nesting selectors unnecessary
never use !important, unless there is no other alternative. It makes your style very hard for future coders to update
it is useful for testing code - you can tell if your issue is selector specificity related
It can occasionally be necessary when overriding plugin styles. Usually already written with !important
!important is the calling card of lazy CSS authors.
CSS elements
For quick legibility on elements with large amounts of CSS, styles should be organized the same way across a project. The order is arbitrary, and has no affect on the final output, other than legible CSS. We will use the following order:
display
position
height/width
margins
padding
border
text styling
opacity
transition
z-index
Long, comma-separated property values - such as collections of gradients or shadows - can be arranged across multiple lines in an effort to improve readability and produce more useful diffs.