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 : //