CSS Sass convention
Naming CSS
Naming class css like this : component__element-part--modifier
- the component is tracked by 2
_
- If you want to work on a part of this element, the part is preceded by 1
-
- If you need to modify your part or your element, you use 2
--
before your modifier -
If the name component has too much parts in its name, you can minify it using the first letters.
You can do that only on the component.
- example :
form-search-engine__form-group__label--large
-
the component form-search-engine can be minify to have :
fse__form-group__label--large
-
When you do that, you have to put a comment just above your class in the css to explain the minification :
// form-search-engine
- example :
Comments in Sass
To comment Sass code you can use two methods :
/* ... */
: this comment will be see in the compiled CSS//
: this method won't be see in the compiled CSS
Prefer the second one : //