CSS specifications BEM CSS and OOCSS

preface

In project development, because everyone’s code habits are different, the CSS code written is not structured, clean and semantic. The idea of BEM CSS and OOCSS must be used in daily coding, but there is no systematic understanding and complete specification of the use.

BEM(Block, Element, Modifier) CSS

introduce

BEM is a front-end naming specification, the name of which is to split the page into each semantic block, block and block can be nested, with a connector to represent the relationship between each module and element state, generating a modular, reusable, highly maintainable and structured CSS code.

Naming rules

Concatenate a descendant block or element with a double underscore __ and a double hyphen — concatenate modifier.

We can completely restore the HTML code structure through CSS

conclusion

In daily development, we also encounter that our style is overwritten by others, most of the reasons are named conflicts, BEM just solves this pain point, we only need to outer style name is a meaningful and independent unique, his descendants can rest assured with content,title and other links. (Mom doesn’t have to worry about my name anymore)

Advantages: Clear structure, semantic.

Disadvantages: Long class names if the HTML structure is deeply nested.

Object Oriented CSS

introduce

OOCSS is not a convention of naming conventions, is a kind of object-oriented ideas, object-oriented we are not unfamiliar, the module is abstracted into objects, its core is to use the simplest way to write the most clean, the most clean CSS code, so that the code is more reusable, maintainability and scalability.

Core ideas:

• Reduce reliance on HTML structure
• Increase CSS class reuse

The principle of

Reduce reliance on HTML structure

Nav__main ul li a {}. This method of writing, despite the problem of performance, can be seen to rely too much on the element tag structure, may later HTML structure changes. The CSS must be refactured, resulting in unnecessary maintenance costs. OOCSS advocates adding class.nav__main__item to the A tag.

Increase the repetitive use of CSS classes

Writing a style before using OOCSS might look something like this, but the downside of writing this way is that you can see repetitive code everywhere, which is particularly difficult to maintain.

We can abstract out their common styles through analysis, thus coming up with a reusable font style.

conclusion

The most important thing about OOCSS is to analyze and abstract “object” components from the pages of the project, and to create CSS rules for these objects to improve, and then rewrite little or no styles, whether it is to create new pages in the project or to add elements to the module.

Combination of BEM and OOCSS

We’re developing a component that shows the weight of an item, and our usual code might look something like this.

It looks fine, but the maintainability and simplicity are very poor. If we use BEM and OCCSS we can make our code look like this.

Compared with the previous scheme, naming is more verbose, but to ensure that CSS class names do not repeat, style does not depend on HTML structure, reuse class, is the core idea of BEM and OOCSS.

conclusion

BEM is a naming convention, OOCSS is the design idea of CSS, in fact, BEM also uses OOCSS ideas.

As the amount of CSS code grows, so does the size of development teams. In the CSS development team needs a unified and fixed CSS code organization and management norms, if there are shortcomings welcome to supplement.