CSS specification BEM CSS and OOCSS sample code detailed explanation

Preface

During project development, due to different coding habits of each person, the CSS code written is not structured enough, lacking neatness and semantics. Everyone must have used the ideas of BEM CSS and OOCSS in daily coding, but there is no systematic understanding and fully standardized use.

Introduction to BEM (Block, Element, Modifier) ​​CSS

BEM is a front-end naming convention . As the name suggests, it splits the page into semantically rich blocks. Blocks can be nested, and connectors are used to represent the relationship between modules and element status, generating a modular, reusable, highly maintainable and structured CSS code.

Naming convention

Connect descendant blocks or elements with double underscores __ and modifiers with double hyphens --.

We can completely restore the HTML code structure through CSS

in conclusion

What is the biggest difficulty for programmers ==> Naming. In daily development, we also encounter our own styles being overwritten by others. Most of the reasons are naming conflicts. BEM just solves this pain point. We only need the outer style name to be meaningful and independent and unique, and its descendants can safely use content, title, etc. to connect. (Mom doesn’t have to worry about me not knowing how to name something anymore)

Advantages: clear structure and semantics.

Disadvantage: If the HTML structure is deeply nested, the class name will be longer.

Introduction to OOCSS (Object Oriented CSS)

OOCSS is not an agreed naming convention, but an object-oriented idea. We are all familiar with object-oriented thinking. It abstracts modules into objects. Its core is to write the neatest and cleanest CSS code in the simplest way, making the code more reusable, maintainable and extensible.

Core idea:

• Reduce reliance on HTML structure
• Increase CSS class reuse

in principle

Reduce reliance on HTML structure

In general, if you want to define styles for <a> tags, the CSS might be written as .nav__main ul li a {} . Regardless of the performance issues, this approach overly relies on the structure of element tags. If the HTML structure changes, the CSS must be refactored, resulting in extra maintenance costs. OOCSS advocates adding the class .nav__main__item to the a tag.

Increase the use of CSS class repetition

Before using OOCSS, we might write a style like this. The disadvantage of this is that repeated code can be found everywhere, which makes maintenance very troublesome.

We can analyze and abstract their common styles, thus proposing a reusable font style.

in conclusion

The most important thing about OOCSS is to analyze and abstract the "object" components from the project's pages, and create CSS rules for these objects to improve them. Then, whether you create a new page in the project or add elements to a module, you only need to rewrite a small amount or even no styles.

Combining BEM and OOCSS

We develop a component that displays the weight of items. The code we usually write may be like this.

It seems fine, but its maintainability and simplicity are very poor. If we use BEM and OCCSS we can turn our code into something like this.

Compared with the previous solution, the naming is more lengthy, but it ensures that the CSS class names will not be repeated, the style does not depend on the HTML structure, and the reuse of classes is the core idea of ​​BEM and OOCSS.

Summarize

BEM is a naming convention, OOCSS is the design concept of CSS. In fact, BEM also uses the concept of OOCSS.

As the amount of CSS code grew, the size of the development team also grew accordingly. A unified and fixed CSS code organization and management standard is needed in the CSS development team. If there are any deficiencies, everyone is welcome to add them.

This concludes this article about the sample code details of the CSS specifications BEM CSS and OOCSS. For more relevant CSS specifications BEM CSS and OOCSS content, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope everyone will support 123WORDPRESS.COM in the future!