Use CSS methodologies to achieve modular

First, what is the CSS methodologies

---

CSS methodologies, Can be understood as design patterns , it can also be understood css specification , market usage as shown below:

The figure Source: https://2019.stateofcss.com/technologies/

You may not devote daily time to pay attention to the development and understanding of CSS methodologies, but as you build your experience, you might think for themselves, or to read other people's code, refer to the online mature framework, there are more or fewer contains some css methodologies bright spot. And several mainstream css methodologies to introduce the following, it can help you do a very good summary, and comb.

Second, common CSS methodologies

---

1、OOCSS

面向对象的 CSS(Object-Oriented CSS, for short OOCSS) by Nicole Sullivan proposed in 2008, which is based on her work at Yahoo.

(1) Rules

1, do not use a Class ID

Direct use of class to set the style, so not only can increase the write semantics, but also reduces dependence on the html css.

2, structure and style separation

Although early html and css achieve separation structure and style, but the internal css same two types of patterns:

• Structure pattern (e.g., length and width, distance)

• Skin styles (such as color, shading)

? So OOCSS recommend these two styles apart.

For example, there are three buttons, white / green / red, can be defined as:

class="btn btn-default"

class="btn btn-green"

class="btn btn-red"

If you really have a number with a purple button, you can create a separate class of purple button. This can greatly reduce the amount of CSS code.

3, the separation container and the contents

Content should never be limited to a particular container, for reuse, leaving the score.

# 错误写法
.header .action {
}
.header .action .login {
}
.header .action .register {
}

# 正确写法
.header{
}
.action{
}
.login {
}
.register {
}

Inheritance selector is useful because it can reduce the styles of conflict triggered by the same name (often occurs in people collaborative development). However, we should not be overused.

(2) the pros and cons

benefit:

• Modular, reusable

• Reduce code duplication

• Improve scalability, maintainability, readability

Disadvantages:

• Although reducing the depth of nested selectors, but much more classes

• If the code is not a lot of repetition of visual patterns, such as some small projects, the application may not be practical OOCSS

(3) Examples

Bootstrap is used OOCSS.

E.g:

html

    <div class='header'>
        <ul class='menu'> 
            <li class='menu-item active'>1</li>
            <li class='menu-item'>2</li>
            <li class='menu-item'>3</li>
        </ul>
        <div class="action">
            <button class="btn btn-login">login</button>
            <button class="btn btn-register">register</button>
        </div>
    </div> 

css：

.header {
}
.menu {
}
.menu-item {
}
.item.active {
}
.action {
}
.btn {
}
.btn-login {
}
.btn-register{
}

2, and

BEM- Block Element Modfier (block element editor). Born in 2009.

(1) Content

BEM consists of three:

• Block - block, such as header

• Element - sub-elements, such as menu item at block

• Modfier - state, such as .current, .active

(2) Rules

1, naming conventions

• -Underlined: only as a hyphen , refers to the connection between the symbol words of a block or a plurality of child elements.

• __ Double-underlined: for sub-block and the block connecting element.

• -- Double underlined: used to describe a condition of a child element of the block or blocks.

  In some companies (such as Tencent) specification, the double-underlined are single underlined ( _) instead.

E.g:.block-name__element--modifier

demo - html：

    <div class='header'>
        <ul class='header__menu'> 
            <li class='header__menu-item--active'>1</li>
            <li class='header__menu-item'>2</li>
            <li class='header__menu-item'>3</li>
        </ul>
        <div class="header__action">
            <button class="header__btn--login">login</button>
            <button class="header__btn--register">register</button>
        </div>
    </div> 

demo - less:

.header {
    &__menu {}
    &__menu-item {}
    &__action {}
    &__btn {  
        &--login {}
        &--register {}
    }    
}

2, avoid nesting

BEM up only three B + E + M.

So please avoid .block__el1__el2format directly instead .block_el2.

Block here would like namespace of.

(3) the pros and cons

benefit:

• Hierarchy clear, readable

• Without relying level selector scope defined constraints, to avoid cross-contamination style assembly.

Disadvantages:

• Named unsightly long, inconvenient writing (writing may be simplified by less / sass)

• In smaller components, BEM format may seem tasteless. But for the public, the style definition of global module, it is recommended to use BEM format. (In particular, the common components released)

other:

BEM name will make the Class class name longer, but after gzip compress the bandwidth overhead is negligible.

BEM is not allowed to use the tag selector, even the most simple li have to be written .menu-item.

(4) Practice

Hungry What's framework elementUI is a kind of BEM, or you can also research site company.yandex.ru/ .

3、SMACSS

SMACSS(Scalable & Modular Architecture CSS, namely CSS scalability and modular architecture ). Jonathan Snook made in 2011, when he was working at Yahoo, write CSS to Yahoo Mail.

(1) Rules

1, Categorizing CSS Rules (CSS classification rules)

CSS will be divided into five different categories:

• Base Basic specification

  Such as CSS Reset and CSS Normalize.

• Layout Layout specification

  For example, left and right columns, grid system.

• Module Module

  Such as a list of products, a navigation bar. Reusable.

• State State norms

  For example selected.

• Theme Style specifications

2, Naming Rules (naming)

Add the class name 前缀:

• Base prefix is ​​not needed. But not class label and ID.
• l- Layout is used as a prefix:l-inline
• m-Module is used as a m-calloutprefix: . But it can not prefix.
• is- Used as a prefix of State:is-collapsed
• Theme typically a new theme.css, with the class name that existed before. If you want to use a separate class name, available theme-prefix.

example:

<div class="l-box m-profile m-profile--is-pro-user">
  <img class="m-avatar m-profile__image" />
  <p class="m-profile__bio">...</p>
</div>

(2) Examples

Standing Line Demo: Https://Codepen.Io/savemuse/pen/gWVpvd

4、 Atomic CSS

Atomic CSSYahoo is also proposed, as can be understood from the literal meaning 原子 CSS.

(1) Example

<div className="P(10px) M(20%) Pos(f) Start(50%) Bgc(#fff)" />

Have a special tool Atomic css, html above will help the class name resolves to normal css. (slightly)

(2) the pros and cons

Benefits: The smallest component of CSS style, to maximize the reusability .

Disadvantages: It is simply writing inline-style, just the way we use the class name to represent it.

(3) summary

This approach is really radical. I do not accept.

Third, the summary

---

Despite aggressive Atomic, I / BEM / SMACSS has the following recommendations for the rest of the OOCSS:

• They thought their complementary but also conflict , there can be trade-offs in the actual development of the use of

• They can be combined with CSS pre-processor (such as less / sass) for better efficiency

• The above mentioned benefits are introduced together their comparative summary, they found that the core issue is resolved: Modular