CSS Modular Solution

There are probably as many modularity schemes for CSS as there are for JS. Here are some of the main ones.

oocss

When it comes to rules for objects, there are two main principles: separating structure from appearance, and container from content.

Noun explanation

Separate structure and appearance: Add repeatable design units and advance product and UI thinking in this regard, such as the following naming and modularity rules for object patterns used in CSS.

Separate container and content: this refers to the use of styles that do not match only with element positions. You can use the style anywhere, and if you do not apply the style, the default style will be kept.

The instance

/ / the dom structure<div class="toogle simple">
  <div class="toogle-control open">
    <div class="toogle-tittle">The title</div>
  </div>
  <div class="toogle-details "></div>
</div>
Copy the code
// The module's tag uniquely identifies it
.toggle{}If the basic structure is the same, you can use an auxiliary style of Complex
.toggle.simple{}// Whether to do nesting I believe that many parts of the preprocessor support nesting and many people will write this way, not recommended
.toogle{
 .toogle-control{}.toogle-details{}}// Do you want to organize your query like this? // Do you want to organize your query like this
.toogle{}
.toogle-control{}
.toogle-details{}
Copy the code

smacss

Sma and OOCSS have many similarities, but there are many differences, mainly in the classification of styles. They are: base, layout, module, status, theme

basis

It can be applied anywhere. I also call it global style

layout

Mainly used to achieve different characteristics of the layout, improve the reuse rate of the layout,

The module

Modularity in design, a unit that can be reused, is typically a coupling of DOM + CSS bindings.

state

Describe the layout or module specialization in a particular state, and I’d like to recommend ZEN Garden of CSS, where the DOM structure remains the same and styles can be restyled by skinnizing CSS.

The theme

More customized than the state, we will set the theme for some special modules, including a series of color, size, interaction and other heavy design, parametric design.

case

/ / the dom structure<div class="toogle toogle-simple">
  <div class="toogle-control is-active">
    <div class="toogle-tittle">The title</div>
  </div>
  <div class="toogle-details "></div>
</div>
Copy the code

In comparison with OOCSS, most of the design ideas are the same, using a class as the scope of CSS (scope is two restrictions, 1 does not comply with the scenario limit to use, 2 does conform to the scenario to use the correct), the other difference is different for skin and state writing rules.

bem

Bem is the block, element, modifier mentality to write styles. It doesn’t cover the structure of the CSS, it just suggests how to name your CSS.

case

/ / the dom structure<div class="toogle toogle--simple">
  <div class="toogle_control toogle_control--active">
    <div class="toogle_tittle">The title</div>
  </div>
  <div class="toogle_details "></div>
</div>
Copy the code

explain

  • Block level: name of the owning component
  • Element: The name of the element in the component
  • Modifier: Any class associated with element modification

The disadvantage of this naming approach is that the style name can be very long, but in fact it is used to some extent in SMACSS and OOCSS. The naming is very semantic, and when we do not know the module, we can use the style name to figure out what the corresponding structure might be.

Choose the right solution

Regardless of the solution, the key is which one is best for the team, and our current approach is a combination of BEM and SMACSS.