Shulou(Shulou.com)06/01 Report--

This article mainly introduces "what are the OOCSS and SMACSS design patterns of CSS". In the daily operation, I believe that many people have doubts about what the OOCSS and SMACSS design patterns of CSS are. The editor consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful to answer the doubts of "what are the OOCSS and SMACSS design patterns of CSS?" Next, please follow the editor to study!

OOCSS

OOCSS is not a new technology, but a design pattern for writing CSS, or a "code of ethics". Generally speaking, I think there are only two key points:

Reduce dependence on HTML structure

Increase the repetitive use of CSS class

Reduce dependence on HTML structure

CSS Code copies content to the clipboard

.

.

.

General navigation bar writing, the structure should be like the above HTML example, if you want to define the style of those tags, CSS may be written as .nav-- main ul li a {}, regardless of performance problems, we can see that over-reliance on the structure of element tags, it is possible that after the HTML structure changes, the CSS must be reconstructed, resulting in unnecessary maintenance costs.

If you consider from this example, in principle, it will certainly be connected to the tag, one will only have one, usually will not exist independently, then it can be written as .nav-main a {}, it will be a better way to write, or even directly add class nav--main_item. The latter is the usage advocated by OOCSS.

This way of writing, on the one hand, the efficiency is better in theory (I can't verify it), and on the other hand, the level is relatively simple.

Increase the reuse of CSS class

In OOCSS's view, reuse of class is emphasized, and id should be avoided as a selector for CSS. The idea is like

OOP

Try to extract duplicate code, such as the following example, which is the CSS style property of the two buttons:

CSS Code copies content to the clipboard

.button {

Display: inline-block

Padding: 6px 12px

Color: hsla (0,100%, 100%, 1)

& .button-default {background: hsla (180,1%, 28%, 1);}

& .button-primary {background: hsla (208,56%, 53%, 1);}

}

The above CSS takes out the repetition of two different styles of button and defines them in the same class.

Go. So, to use this style, HTML might look like this:

CSS Code copies content to the clipboard

First declare this as the style of a button with button, and then use button-default or button-primary as the difference between the background color of the button. By doing so, the maintenance cost becomes lower, for example, if you want to change the size of all the buttons on the site, just change the padding of .button.

SMACSS

My understanding of SMACSS is not very deep, maybe I will have a deeper understanding after reading Scalable and Modular Architecture for CSS. The current concept of SMACSS is limited to the way it divides CSS's different business logic:

But I don't think the original design is very proper, so I made some improvements myself:

Base

Base is to set the default value of the tag element. For example, the reset of the browser can be written here. If you are using Compass, just @ include global-reset. Only the tag element itself will be set here, and there will not be any class or

Id, but you can have property selectors or pseudo-classes:

CSS Code copies content to the clipboard

Html {}

Input [type=text] {}

A:hover {}

At this point, the study on "what are the OOCSS and SMACSS design patterns of CSS" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.