CSS modular solution

There are probably as many modular solutions for CSS as there are for JS. Here is a brief introduction to several major modular solutions.

oocss

There are two main principles for object-oriented rules: separation of structure and appearance, and separation of container and content.

Glossary

• Separate structure and appearance: Add repeatable design units and promote product and UI thinking in this regard, such as the naming and modularization rules of object patterns when using the following CSS.
• Separating containers and content: This means that the use of styles is not uniquely matched to element positions. You can use this style at any position. If you do not apply this style, the default style will be retained.

Examples

// DOM structure <div class="toogle simple">
  <div class="toogle-control open">
    <div class="toogle-tittle">Title</div>
  </div>
  <div class="toogle-details"></div>
</div>

// Module's unique identifier.toggle{
}
// How to write skin styles. If the basic structure is the same, you can use an auxiliary style of complex.toggle.simple{
}
// Whether to do nested writing. I believe that many preprocessor parts will support nesting and many people will write like this, which is not recommended. toogle{
 .toogle-control{
 }
 .toogle-details{
 }
}
// Actually, would you organize it this way? It is not recommended. This will reduce the query efficiency. If you can confirm the uniqueness, you can just write the subdirectory.toogle{}
.toogle-control{}
.toogle-details{}

smacss

SMA and OOCSS have many similarities, but there are many differences, mainly in the classification of styles. They are: basic, layout, module, state, theme

Base

Can be applied anywhere, I also call it global style

layout

It is mainly used to realize different characteristic layouts and improve the reuse rate of layouts.

Modules

Modularity in design, a reusable unit, is generally a coupled binding of DOM+CSS.

state

Describe the specialized performance of the layout or module in a specific state. Here I would like to recommend "CSS Zen Garden". When the DOM structure remains unchanged, the style can be modified through CSS skinning.

theme

Compared with the status, it is more customized. We will set the theme for some special modules, including a series of colors, sizes, interactions, etc. for heavy design and parametric design.

Case

// DOM structure <div class="toogle toogle-simple">
  <div class="toogle-control is-active">
    <div class="toogle-tittle">Title</div>
  </div>
  <div class="toogle-details"></div>
</div>

Compared with oocss, most of the design ideas are the same, using a class as the scope of CSS (scope means two restrictions: 1. It is prohibited to use when it does not meet the scenario; 2. It must be used correctly when it meets the scenario). The other difference is the different writing rules for skins and states.

bem

bem is to write styles with the thinking of blocks, elements, and modifiers. It does not involve specific CSS structure, but just suggests how to name your CSS.

Case

// DOM structure <div class="toogle toogle--simple">
  <div class="toogle_control toogle_control--active">
    <div class="toogle_tittle">Title</div>
  </div>
  <div class="toogle_details"></div>
</div>

explain

• Block level: the name of the component
• Element: The name of the element in the component
• Modifier: Any class related to element modification

The disadvantage of this naming method is that the style name will be very long, but in fact it is used to a certain extent in smacss and oocss. The naming is very semantic. When the module is not clear, we can deduce what the corresponding structure may be based on the style name.

Choose the right solution

No matter which solution is chosen, the key is which one is most suitable for the team. Our current approach is a combination of bem and smacss.

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.