What are the pros and cons of using atomic classes?

In the river
Links: https://www.zhihu.com/question/22110291/answer/20328000
Source: Know
Copyright belongs to the author, please contact the author for authorization.

In the book "Writing High-quality code for the development of the Web", a set of atomic classes was advocated and provided, so I started using atomic classes in personal and outsourced projects.

Use more, you will understand the advantages and disadvantages of the atomic class and how to use it. Here are some of my insights:

disadvantages of the Atomic class:

1, maintenance difficulties. Super-common atomic classes like M20 (for margin 20px) are spread over many div pages, if you want them to become margin 15px, or replace the margin 20px in m20{} (the meaning of losing M20 itself), or the HTML The M20 in the batch are replaced with M15. Give you one more request, replace the part with M15. I'm afraid I can only copy it one by one.

2, code redundancy. This includes examples of atomic classes given by the main title and "Writing High-quality code", in order to be flexible, the commonly used fonts are defined as f*, and the commonly used dimensions define m* and p*. But only a few of them are actually used, and all that is left is redundant code. This is very hard for me to be very neat about the medium code, although it's just dozens of lines of code.

3, control difficulties. When I first contacted the Atom class and used this to rewrite my very simple WordPress theme, I almost began to worship atomic classes. The theme is really simple, so I almost did not write CSS, but in the template file in the Div added a number of atomic classes to complete the layout. But when I'm going to change the style of an element, it's a bit of a crash, do I have to use the atomic class or the traditional selector?

1) If you use an atomic class, then I need to define a new atomic class (which is usually not a random modification of the previous atomic Class), and then write the new atomic class behind the HTML tag to overwrite the previous style. This way, you will encounter a label similar to <div class= "AA bb CC DD AB AD CD SD" >...</div>, great!
2) construct selectors with atomic classes. This will not define the new atomic class, but your CSS selector will look like this:. aa. bb. cc. Ad.ab. ce{} Are you sure you won't be dazzled?
3) No way, you can only set a corresponding class for the element you want to modify, such as

like the CSS Zen garden, the best CSS code is not related to HTML, and the atomic class, so that you can modify the CSS to add a lot of HTML operations, this is the biggest flaw.

advantages of the Atomic class:

Atomic classes also have a number of advantages, but not all atomic classes.

1, easy to extract reuse code, improve code reuse degree. The Clearfix class is one of the best examples of writing CSS into a clearfix class for clearing floating, adding this class to the element that needs to be cleared. There are other usage scenarios like that.

Application of the 2,CSS framework. Many of the CSS parts of the front-end framework, especially the grid system, are the specific applications of atomic classes.


practical applications of atomic classes:

The atomic class is not a tool, but a way of writing CSS, namely:extract the highly reusable style module, separate into an atomic class, add to the corresponding module.

The CSS front-end framework does just fine. For a front-end project, the button section can define a BTN class as a button initialization (A or button, input initialization, fillet, border, cursor, and so on), and then define classes such as Btn-blue, btn-red to refine the style of the button. Then for all the buttons for the whole project, you can implement the style with just two additional classes.

============= below is an informal usage of my own ================

Another application scenario is to replace the naming. In some recent projects, the main body is often divided into two columns and has a variety of subject styles (assuming. Main-blog. main-page). So I defined the. left. Right class, with default properties of Float:left Float:right. For different body styles, you can construct the following CSS code:

. Main-blog. left{..}
. Main-blog. Right {...}
. main-page. left{..}
. main-page. Right {...}

While this involves the content of the previous disadvantage 3, it solves the programmer's biggest challenge: naming. And the semantics are relatively clear, used to feel good, you can try it.

What are the pros and cons of using atomic classes?