Detailed explanation of sample code of CSS specification BEM CSS and OOCSS

Time:2021-3-2

preface

In the project development, due to the different code habits of everyone, the CSS code is not structured enough, and the cleanliness and semantics are lack. The idea of BEM CSS and OOCSS must be used in daily coding, but there is no systematic understanding and fully standardized use.

Introduction to BEM (block, element, modifier) CSS

BEM is a kind ofFront end naming conventionsAccording to the name, the idea is to split the page into every semantic block. The blocks can be nested, and the connector is used to represent the relationship between the modules and the element state, so as to generate a modular, reusable, highly maintainable and structured CSS code.

block

element

Modifier (modifier)

Independent and meaningful entities, e.g. header, container, menu, checkbox, etc

It is a part of block and has no independent meaning. Header, title, menu item, list item, etc

A sign of blocks or elements, which can be used to change its form, behavior, and state

Naming rules

By double underline__ Connect the descendant block or element with a double hyphen.

We can completely restore the HTML code structure through CSS

conclusion

What’s the biggest difficulty for programmers = = > naming? In our daily development, we also encounter that our own styles are covered by others. Most of the reasons are naming conflicts. BEM just solves this pain point. We only need that the outer style name is meaningful and independent, and his descendants can safely connect with content, title, etc. Mom doesn’t have to worry about my name anymore

Advantages: clear structure, semantic.

Disadvantages: if the HTML structure is deeply nested, the class name will be longer.

Introduction to OOCSS (object oriented CSS)

OOCSS is not a conventional naming standard, but an object-oriented idea. We are not unfamiliar with object-oriented. We abstract modules into objects. The core of OOCSS is to write the cleanest and purest CSS code in the simplest way, so as to make the code more reusable, maintainable and extensible.

Core idea:

  • Reduce dependence on HTML structure
  • Add CSS class reuse

principle

Reduce dependence on HTML structure

General navigation bar writing, if you want to<a>Label definition style, CSS writing may be written as.nav__main ul li a {}In this way, regardless of the performance problems, we can see that we excessively rely on the structure of the element tag, which may change the HTML structure later. This CSS must be reconstructed, resulting in unnecessary maintenance costs. OOCSS advocates adding class to a tag.nav__main__item

Increase the use of CSS class repeatability

Before using OOCSS, we may write a style like this. The disadvantage of this writing is that there are repeated codes everywhere, which is very troublesome to maintain.

We can abstract their common styles through analysis, so we propose a reusable font style.

conclusion

The most important thing of OOCSS is to analyze and abstract “object” components from the page of the project, and create CSS rules for these objects to improve them. Then, whether you are creating a new page in the project or adding elements to the module, you only need to rewrite a small amount or even write no style.

The combination of BEM and OOCSS

We develop a component to display the weight of an item. The code we usually write may be like this.

It seems that there is nothing wrong with it, but its maintainability and simplicity are very poor. If we use BEM and occss, we can make our code like this.

Compared with the former scheme, the naming is rather lengthy, but it is the core idea of BEM and OOCSS to ensure that the CSS class name will not be repeated, and the style does not depend on the HTML structure.

summary

BEM is a naming standard. OOCSS is the design idea of CSS. In fact, BEM also uses the idea of OOCSS.

With the increasing number of CSS code, the scale of the development team is also expanding. In the CSS development team, we need a unified and fixed CSS code organization and management specification. If there are deficiencies, you are welcome to add.

This article about CSS specification BEM CSS and OOCSS example code detailed explanation is introduced here, more related CSS specification BEM CSS and OOCSS content, please search previous articles of developer or continue to browse the following related articles, hope you can support developer more in the future!