Today’s evening snack is a review of several common CSS class name patterns

  • OOCSS
  • BEM
  • SMACSS
  • ACSS

CSS features are getting better and precompiled frameworks are popping up, but even with scope technologies like cssModules, we still need some paradisms to guide us in locally naming classes properly.

None of the paradigms described above is new, some of them are quite old, and the main purpose of reviewing them is to help us look back and rethink why we chose a particular paradigm (such as BEM) to name our classes in the first place:

Different paradigms have different emphases. Some paradigms are compatible and some are not. Most of them were born to achieve the following goals:

  • Avoid class name conflicts
  • Accurately convey semantics
  • Improve style reuse and reduce code
  • Implement style splitting and control the impact surface of each part

At the same time, they mostly agree on the following points:

  • Avoid using ids and labels as style anchors
  • Avoid using! important
  • Avoid associating labels with class names, such as:div.header 或 h1.title
  • Avoid using hierarchy selectors such as:.sidebar .title

Let’s review each of these CSS paradigms and add two tips for controlling selector weights at the end of the article:

OOCSS

Object-oriented CSS

OOCSS advocates necessary separation of classes to improve reusability and reduce CSS code. This paradigm advocates splitting style classes along the following two latitudes:

  • Structrue or Layout separated from Skin or Theme:
  • Separate Container from Content:

This kind of separation is often seen in the early front-end engineering, sometimes separate style sheets for different layers, such as layout.css, theme. CSS, etc. With the popularity of front-end engineering componentization, this kind of separation is gradually rare. However, for large component library projects, there are still many benefits.

BEM

Block Element Modifier, block Element State

BEM has developed a uniform set of class names: {block name}__{element name}–{state name}, such as a card class name:

<div class="people-card" >
    <h2 class="people-card__title" >The title card</h2>
    <div class="people-card__content" >content</div>
    <footer class="people-card__footer">
        <a class="people-card__link">details</a>
        <a class="people-card__link people-card__link--disabled">share</a>
    </footer>
</div>
Copy the code

BEM enhances the semantics of HTML, making code easier to read and maintain. Because naming rules fit well with componentized engineering architecture, it has become a popular way to name classes. Class name conflicts can be circumvented to some extent by synchronizing component names, such as prefixing page components with v- and UI components with C – (of course, using scope technology is more perfect) :

On the other hand, we should also look at the disadvantages of BEM:

  • There is some dependency on HTML structure
  • Class names that are too long can sometimes look ugly and slightly increase the size of the stylesheet
  • There is almost no reusability, and the only way to reduce the stylesheet size is again to combine with components, using components loaded on demand to reduce the stylesheet size for the first screen rendering

SMACSS

Scalable and Modular Architecture for CSS

This is also a paradigm for splitting styles. It has two core goals:

  • Enhance the semantics of HTML and content
  • Reduce dependence on specific HTML structures

Unlike other paradigms, SMACSS does not emphasize the use of ID and hierarchy selectors as selectors, as long as it is appropriate. Similar to OOCSS, SMACSS categorizes classes by function into the following five categories:

  • Base: The default style of the Base tag (HTML, body, H1, UL, etc.), usually reset
  • Layout: A large Layout with an ID as a selector
  • Module: Reusable component Module
  • State: Style ina specific State (hidden or expanded, active/inactive)
  • Theme: a Theme of the station

For the above categories, there is often a specific naming convention to follow, such as the following:

  • Base: Labels are used as selectors without naming
  • Layout: l- 或 layout-The prefix
  • State: is-The prefix, such as.is-active ，.is-hidden
  • Module: You can use no prefix, or you can add a specific prefix to related modules to facilitate organization

SMACSS’s layered approach is often used for reference in daily business. A typical example is that a common project will use a reset.css to “normalize” the styles of different platforms and set some global common styles, which is the Base layer.

ACSS

Atomic CSS

Reuse of style attribute granularity is advocated, such as.di {display: inline}.fl {float: left}. Early CSS UI libraries like Bootstrap often had class names like.lg.col-2. BTN and so on. Now, in projects with CSS preprocessors, Atomic ideas can be used as a style base layer to be combined into larger classes.

For example, in combination with BEM, nested:

.people-card__link {
    .fl;
}
Copy the code

With the help of precompilation tools, we can start with the smallest granularity of styles and organize the larger granularity of styles layer by layer. For example, the following ACSS style directory of less files, from “quarks” to “atoms” to “molecules”, forms an engineering style base that enables a great degree of reuse:

Atomic - structuring / ├ ─ ─ to atoms │ ├ ─ ─ _button. Less │ ├ ─ ─ _flag. Less │ ├ ─ ─ _grids. Less │ └ ─ ─ _media. Less ├ ─ ─ molecules │ ├ ─ ─ _banner. Less │ ├ ─ ─ _custom - post. Less │ ├ ─ ─ _footer - nav. Less │ └ ─ ─ _heading - group. Less ├ ─ ─ quarks │ ├ ─ ─ _links. Less │ ├ ─ ─ _lists. Less │ ├ ─ ─ _paragraphs. Less │ └ ─ ─ _tables. Less └ ─ ─ utilities ├ ─ ─ _base - spacing. Less ├ ─ ─ _clearfix. Less └ ─ ─ _reset.lessCopy the code

That’s all about the CSS class name paradigm. You may find that, like the JS programming paradigm, the CSS architecture in your project is often an organic combination of several paradigms, rather than a complete commitment to one idea.

Attached: CSS priority Hack tips

Sometimes we have to use the ID as a selector, and sometimes we have to weight the selector to override the style of a third-party library. Here are some useful tips for both problems.

  • Through the property selector[id='{targetId}']alternative#{targetId}In order to obtain and.{className}A selector of the same priority
  • To increase the priority of a selector by repeating itself.{className}.{className}

Github original link

Further reading

  • An Introduction To Object Oriented CSS
  • BEM 101
  • What is SMACSS?
  • OOCSS, ACSS, BEM, SMACSS: what are they? What should I use?