How to call css-classes

Based on my favorite articles on this topic and personal experience, here are my 5 cents on how to call CSS classes.

0. Before thinking about the name of the class, select the appropriate name for the HTML elements.

If this field, use the input element
')
Reading an HTML document will be much easier.

Example:

 <div class='submit'/> <!-- ? --> <input class='submit'/> <!-- ,  --> 

Source: Rafael Goiter (French article)

1. Assign classes as low as possible in the DOM tree

This affects the names of classes. Always write the class name directly in the HTML element for which you want to design, even if it takes extra effort. If it is not clear why, read the following article by Chris Koyer.

Example:

 <main class='mainly'> <p>Lorem ipsum</p> <!--       --> </main> 

 main.mainly p { /*    */ } /*      p : <p class='paragraphly' /> */ .paragraphly { } 

Source: Chris Koyer

2. Call classes by content.

Example:

 .c-header-logo { /*    ,  ,        . */ } 

Source: phpied.com

3. Do not call the class by content if the picture is clearer.

Let's say the cap logo actually looks like this:


Then do not call it header-logo.

 .guillotine { /* ,  ,     */ } 

4. Try the -like suffix for better code portability.

Example:

 h3, .h3-like { /* -  */ } 

 <p class='h3-like'> <!--    h3,        ,         --> </p> 

Source: KNACSS v4

5. Do not use camel register

It makes reading difficult

Example:

 .navToOneModuleICreated { font-size:2em; } /*  */ .nav-to-one-module-i-created { font-size:2em; } 

Source: Harry Roberts

6. Try BEM

Today it is one of the most popular agreements.

• At first it seems strange, but do not be afraid.
• Entry threshold is very low
• You can use it now in any part of the project.
• The long-term outlook is huge.

(double hyphen) means a variant of the element.

(double underscore) means child element.

Example:

 <button class='btn btn--warning'> <!-- o   .btn — .btn--warning --> <div class='btn__text'></div> <!--     .btn — .btn__text--> </button> 

 .btn--warning { /* !    ,       «warning»,     HTML-.  ! */ } .btn__text { /*      ,         */ } 

Source: Kalig, Fifty BEM Shades

Recommended: Smashing Magazine, fighting BEM

7. Try even worse

BEM opens up new opportunities, even if at first their agreements look ugly.

Nevertheless, this distinctiveness helps the eye to instantly grasp the essence of what is happening, and in the case of BEM, believe me, it works.

Now you can try a more vile agreement while you stick to it on the whole project.

Example:

 .DIMENSIONS_OF_mycomponent { /*   .   ,   . */ /*     -  SASS. */ /*       . */ } 

8. Do not abbreviate descriptive words.

In addition to the already established nav , txt , url ... you should avoid any abbreviations.

Source: phpied.com

9. Try to use only one letter as a meaningful prefix.

In the case of a visual component, start with c- , and in the case of an object (for example, a mock-up) - with o- , I just like this trick by Harry Roberts.

Example:

 <button class='o-layout'> <div class='o-layout-item o-grid c-button'></div> <!--     HTML ,    .-> </button> 

Source: Harry Roberts

10. Try [] when there are too many classes of the same type.

This little trick helps to learn HTML more quickly. Notice that there are no classes in the CSS file .[ And .] , They are only needed here to help others read HTML.

Example:

 <button class='[ o-layout ]'> <div class='[ o-layout-item o-layout-item--first ] c-button'></div> <!--     HTML ,    .--> </button> 

Source: Source Code "Inuit Kitchen Sink"

11. Use js- prefix if it is used only for javascript

If Javascript is required to select an element, do not rely on CSS styles. Specify a special prefix like js- .

Example:

 <button class='js-click-me'> <!--    HTML  ,      CSS-  .  JavaScript  , ,   - . --> </button> 

Source: Derik Bailey, book by marionnette.js

12. Try to separate the parent element from the child.

If a class has too many responsibilities, divide it into 2 separate properties.

Example:

(badly)

 <button class='a'> <!--      ,       ab,   —   bc, CSS-   .--> <div class='child-of-a-and-parent-of-c'> <div class='c'> </div> </div> </button> 

(OK)

 <button class='a'> <!--   2 --> <div class='child-of-a parent-of-c'> <div class='c'> </div> </div> </button> 

13. Non-semantic classes must explicitly describe their properties.

Most of them contain only one property, and there is no need to hide it.

 .horizontal-alignment { /*   .      ,       HTML-   ,    . */ text-align: center; } /*   .         */ .u-text-align--center { text-align: center; } 

14. Explicit Khaki (I)

If you are not happy with your CSS selector, tell it to everyone.

This will happen anyway, even with the best CSS Superheroes (s), so don't be ashamed of it.

Pick a suitable word for your situation in your team and stick to it throughout the project.

Personally, I use the word "HACK" because the IDE Atom automatically highlights it.

Example:

 .my-component { margin-left: -7px; /*  :  , ,    */ } 

15. Explicit Khaki (II)

Another sensible option is to collect all the code with "weirdness" in a separate file, shame.css

Again, Harry Roberts prompted

Source: Harry Roberts

16. Try to avoid more than two words for one name.

The name should speak for itself, in one or two words, otherwise the code will be difficult to maintain.

Example:

 .button { /*  */ } .dropdown-button { /*    */ } .dropdown-button-part-one { /* , - ,       , : */ } .dropdown-button-part-one__button-admin { /* , !!! */ } 

17. Use the data-state attribute to specify the state of the component.

Manipulation of the condition is far from uncommon. It happens how often that a special attribute for a state saves time and effort in the long run.

Example:

 <button class='c-button c-button--warning is-active'> <!--    --> </button> <button class='c-button c-button--warning' data-state='is-active'> <!-- - .    ,    ,   ,   Sass,    .--> </button> 

Source: unfortunately, I can not remember who wrote about it, but his advice was very useful.

18. Use has- or is- is- for the state

Manipulation of the state occurs very often (again). Therefore, adhering to a strict naming convention for the state would be very helpful.

Example:

 .activated { /*   .    ,    ? */ } .is-activated { /* ,   . */ } 

Source: Mobify Code Design

19. Use hyphen as a prefix when combining several states.

It is necessary to avoid a combination of states at all costs. And when this is not possible, Ben Smifet’s very useful trick will come to the rescue.

Example:

 <button class="btn -color-red -size-large -shape-round"></button> 

Source: Ben Smifet

20. When declaring a selector in HTML, stick to single quotes instead of double quotes.

This makes it easier to read the document.

Example:

 <button class="c-button"> <!--  :    "  '.         ,        HTML-,   —  . --> </button> <button class='c-button'> <!-- !--> </button> 

Source: I learned this when I worked with the Predicsis team.

21. Do not follow the rules.

I tried to give some recommendations based on personal experience and articles that turned out to be the most useful for me.

I am not saying that all this is useful in your case, so my best advice is:

1) Try to improve your class naming, 2) follow it consistently for this project, 3) but avoid over-complication.

If the rule does not suit you, just skip it.

Enjoy!

Special thanks to @HugoGiraudel , @kaelig and @gaetanbt for their feedback.