Different css bem specifications and cssbem specifications

Different css bem specifications and cssbem specifications
Introduction

Since its birth, humans have been constantly solving problems, whether by cutting wood for fire or making weapons.

Therefore, human progress is a process of constantly solving problems.

BEM Introduction Background

Because the business logic of the project has undergone major changes, the previous development cycle in the first half of the year has basically become useless. However, the launch time of the company's projects remains unchanged. The rest of the time is only two months in the district. The function is to have websites with communities, e-commerce, and core businesses, which is quite tense.

So in order to complete the project development within a limited time, or even complete the project development with quality and quantity. The so-called extraordinary period, a very method. We must efficiently complete the process from the design draft to the page output. At this time, SASS and some template engines (the jade we use) work with the automated build tool (gulp) the difference between them and traditional html and css is displayed.

What's the best about BEM?

Because sass has been used before, there is a pitfall: When the dom structure is complicated, the nesting level of css after sass compilation is very deep.

To prevent css style conflicts. We will add deep nesting to our css class names. Therefore, when writing sass, we also write it in this way, and the result will show a style like css file. In this case, it will be a headache if you need to search and modify the style. And the eyes are also very tired. So many people think that rewriting css is much happier than modifying css.

Therefore, I will give it a wide range based on what I said at the beginning of the article. Technological advances are the process of constantly solving problems. So the question is: how can we happily use the sass feature and reduce hierarchy nesting?

So use the BEM specification to write the class style! Let's talk about it today, hoping it will be helpful to everyone.

Because sass introduces many very powerful features for us, such as macro (mixin) and include. This provides a smooth path for us to achieve sass style reuse. Since sass can be reused, the structure is left out without considering behavior. This is our html. If html can be reused, the structure must be segmented by component.

This is also the core idea of BEM: block, element, and modifier. Here I like to call blocks as components.

The original BEM specifications are as follows:

.block{}.block__element{}.block__element--modifier{}

　　

I use the modified rules of Nicolas Gallagher. The differences are as follows:

.block{}.block__element{}.block--modifier{}
//

.block-user{}.block-user__element{}.block-user--modifier{}

The modified two hyphens and underscores are used instead of one, so that you can define your own block with a single hyphen.

Let's perform a quantitative analysis based on the Common Tab switch above.

According to BEM specifications, tab switching is a reusable component. Therefore, TAB is a component.

So our top-level class name is:. tab

Each Independent tab is a separate element:. tab _ tab1,. tab _ tab2...

Each individual tab element is selected in this status. Here is the last layer:. tab _ tab1 -- active

//BEM scss
.tab{}.tab__tab1{}.tab__tab1--active{}

//normal scss.tab{    .tab1{        .tab1_active{}    }}

Improved BEM specifications:

//BEM scss.tab{}.tab__tab1{}.tab--active{}

What if we have a tab page that is a vertical layout? Use the following

.tab-vertical{}.tab-vertical__tab1{}.tab-vertical--active{}

If a vertical version of BEM is used, of course, this is not defined in BEM, and the class life for the ultimate version is too long.

.tab-vertical{}.tab-vertical__tab1{}.tab-vertical__tab1--active{}

In this way, we can write the componentized sass into a separate scss file. When our structure needs to use this component, we will include it, because it is a separate component, I can use it for all the types of life in your outermost layer.

//main.html<div class="tab">    <ul>           <li class="tab__tab1 tab--active"></li>           <li class="tab__tab1"></li>           <li class="tab__tab2"></li>    </ul></div>

 

Summary:

Because BEM specifications are used, our class names are highly specific. Therefore, even if the class name is not nested, style conflicts are unlikely. As long as the entire team can follow this rule, we can immediately locate the specific components when we need to modify them, and we can easily understand the style information that other colleagues in the project want to express. Of course, BEM standards are criticized for being too long and not very beautiful. If people who have not been in contact with BEM standards look at css, they will be confused, but they will not be confused. BEM will definitely accelerate your project.

The so-called technology is not good or bad, the best fit.

For more information, see the following link:

Http://docs.emmet.io/filters/bem/

Http://nicolasgallagher.com/about-html-semantics-front-end-architecture/