preface

Speaking of CSS naming conventions, you’re probably familiar with them, or you’ve probably heard of BEM. BEM is a CSS Class naming method proposed by the Yandex team to help developers create better and consistent CSS modules.

BEM divides the class name of a page into blocks, elements, and modifiers.

  • Block: A Block is a visual or semantic whole that is a specific and unique element, for example, a popover on a page or a search box;
  • Element: generally considered a component of a block, Element comparisons are prefixed by the name of its parent block, for example, popover titles, close buttons, and confirm buttons.
  • Modifier: Modifier refers to a specific state of a specific element, such as the Modifier that a close button appears when the mouse is not up and when the mouse is up.

Now use the popover component of Bootstrap to give a more concrete example:

There is a difference between mouse up and mouse down.

As you can see from the example above, blocks are connected to elements by two underscores (__), and elements and modifiers are connected by two short dashes (–).

Of course, today’s article will not focus on what BEM is, but if you have never encountered BEM before, you can try it out and try it several times in your project to feel its charm. In addition, there are a lot of articles on BEM on the Internet, so be patient and you will find excellent tutorials. Today’s article will share two CSS methodologies that are less widely introduced: SUIT CSS and SMACSS.

SUIT CSS

SUIT CSS Naming convention (github.com/suitcss/sui…)

SUIT CSS is a component-based CSS methodology that divides class names into two types: utility classes and component classes.

Utility class

CSS has many fixed utility classes, such as left and right float, text truncation, vertical center… . Utility classes help reduce some of the code duplication and provide a consistent implementation.

Naming rules: u – [sm – – | | md lg -] < tool name >. Utility classes start with u-, followed by the class name (which is humped), with responsive rules such as SM, MD, and LG in between.

Here’s an example:

<div class="u-cf">
  <! -- Left float -->
  <a class="u-floatLeft" href="https://blog.shenfq.com/">👉 Check out my blog</a>
  <! -- Text truncation, Max width 200px -->
  <p class="u-textBreak u-maxWidth200">Front end engineer, welcome to follow my public account "more awesome front End"</p>
</div>
Copy the code

Component classes

Component classes are used to describe specific components. Components are the building blocks of a specific application, so component design is particularly important.

Naming rules: [< namespace >-]< component name >[- descendant name][– modifier]. This naming method has several advantages when writing HTML and CSS:

  • Helps distinguish between the root element, the descendant element, and the class used to decorate the component;
  • Probability of repeated name of degraded class;
  • To make class names more semantic;

Here’s a look at what each part of the naming convention does:

Namespace (optional)

Namespaces are optional, and you can add a namespace to your own class name if you want to avoid conflicts between your component class name and the name of an imported third-party style class. However, if you do not have third-party styles in your business, you can do without namespaces.

.sfq-Modal{} /* My popover component */
.sfq-Button {} /* My button component */
Copy the code

Component name

Component names are named using the big hump rule (Pascal Case), which also minimizes collisions with the same name style.

.Modal {}
Copy the code
<div class="Modal">
  …
</div>
Copy the code

Component name – Descendant name

The descendants of a component are the parts attached to the component, for example, the title of a popover component, buttons, and so on. Descendant names are named using the small hump rule (Camel Case).

<div class="Modal">
  <header class="Modal-title">
    <h2 class="Modal-titleName">Welcome to attention</h2>
    <span class="Modal-closeBtn">X</span>
  </header>
  <div class="Modal-content">Front end engineer, welcome to follow my public account "more awesome front End"</div>
</div>
Copy the code

Component name – modifier

A modifier is a class name that represents a particular state of a component. Modifier names are also named using the small hump rule and are directly connected to component names by two dashes (–), consistent with the BEM representation.

<button class="Button Button--default">Click to follow "More Awesome Front-end"</button>
<button class="Button Button--primary">Click to follow "More Awesome Front-end"</button>
Copy the code

The variable name

SUIT CSS defines the naming of CSS variables in addition to utility classes and component classes. Naming rules: – component name [- offspring of | — modifier] – (CSS properties | variable name).

:root {
  /* Background color of the base button */
  --Button--default-backgroundColor: # 909399;
  /* Background color of the main button */
  --Button--primary-backgroundColor: #409EFF;
}
Copy the code

SUIT the CSS summary

SUIT the CSS classes, components, in addition to defining the tools of naming, also provides the basis of full class, as well as the test suite to test your CSS class name is conformed to the specification, the specific method of use (https://github.com/suitcss/suit) to view the official documents. SUIT CSS improves on BEM. In particular, the double underline is removed, which is much more beautiful than BEM. In addition, all the names are named in a hump, and some short lines are omitted, which makes the class name of SUIT CSS much shorter than BEM.

SMACSS

SMACSS official website: smacss.com/

Scalable and Modular Architecture for CSS (SMACSS) is a set of easy-to-develop and easy-to-maintain CSS programming methodology, which divides CSS rules into five categories:

  1. Base = Base
  2. Layout = Layout
  3. Module (Module)
  4. State of affairs
  5. Theme = Theme

You should be able to see the above five categories in the styles of your existing projects. The combination of these styles can make your code extremely complex, and if you consciously categorize these styles, you can greatly reduce the complexity. In addition to categorizing styles, there are some guidelines that apply to each category.

Ground rules

Base rules apply to element selectors that define default styles for HTML tags. Basic styles are used to set the title size, default link color, default font style, and body background.

/* Basic style sample */
body.form {
    margin: 0;
    padding: 0;
}

a {
    color: # 039;
}

a:hover {
    color: #03F;    
}
Copy the code

Layout rules

The essence of CSS is to lay out the elements of a page, but there is a hierarchy of elements. For example, large blocks such as the head and tail are the main components, called layouts. While the navigation bar (belonging to the head), website description (belonging to the tail) such blocks are secondary components, we call them modules.

Here’s an example of a page layout for nuggets:

The page has a header, a navigation bar, a content area, and a sidebar that are part of the layout.

SMACSS allows the use of ID selectors in layout styles, which helps to distinguish the location of nodes in the layout at a glance in HTML. Other classes that are not ID selectors need to be prefixed with l- to indicate that they belong to the layout style.

<div id="header"></div>
<div id="navigation"></div>
<div id="content" class="l-left"></div>
<div id="sidebar" class="l-right"></div>
Copy the code

Rules of the module

As mentioned earlier, modules are a looser secondary component than layout components, and the distinction is really fuzzy, so some solutions also do away with layout rules and divide all reusable components into modules.

There is no detailed naming style for module rules in the official documents. I have read many articles and basically refer to BEM when naming modules, so I will not introduce it separately here.

State rules

States are used to describe the appearance of modules in different states, using the IS – prefix, which helps us distinguish elements’ states in HTML.

<header id="header">
  <ul class="nav">
		<! -- selected -->
    <li class="nav--item is-selected">Welcome to attention</li>
    <li class="nav--item">Welcome to attention</li>
  </ul>
</header>
Copy the code

Some states have a higher priority and can be added as appropriate! Important, for example, to control the display or hiding of elements.

.is-hide {
    display: none ! important;
}
.is-show {
    display: block ! important;
}
Copy the code

SMACSS summary

Theme rules are not specifically covered here, because themes have been replaced by CSS variables at this point in time. SMACSS has a lot of rules that aren’t listed in detail here, but there are fewer rules on how CSS is named, and its layout rules and module rules are a bit vague and hard to tell apart.