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

In this issue, the editor will bring you about how to understand the SMACSS in the CSS architecture. The article is rich in content and analyzes and narrates it from a professional point of view. I hope you can get something after reading this article.

Because CSS has only one scope, if we do not pay attention to the maintenance of CSS code, the code we write will be difficult to read and maintain, so we abstract the BEM methodology with the help of the web page itself.

BEM's simple three-tier method has no problem in dealing with small and medium-sized websites, but it may be more difficult to deal with the style of complex websites, and we need to find a better way.

So SMACSS was born, and the relationship between SMACSS and BEM is a bit like the relationship between Flex layout and Grid layout in layout.

But please note that SMACSS and BEM are by no means included and included before, just like in the application of Flex layout and Grid layout, we will be more inclined to Grid, ordinary and simple two-dimensional layout will use Flex, we will use the right method at the right time, SMACSS and BEM are almost the same, master the idea, the application is a small matter.

What is SMACSS?

It is not hard to imagine that SMACSS is an acronym, which is the opening note of the website: Scalable and Modular Architecture for CSS, the name clearly means to write modular, structured and extensible CSS.

When you finish learning SMACSS, you will have a deeper understanding of Scalable and Modular Architecture for CSS.

How to pronounce SMACSS? SMACSS is not a word, but it has its own pronunciation, with the same sound as the word {smacks}.

Classification of SMACSS

If you find a core word for BEM, it is layering, if you also find a core word for SMACSS, it must be classification, a word difference, let's see how SMACSS classifies.

The core of SMACSS is classification, which divides the styles of projects into five categories:

Base (basic)

Layout (layout)

Module (module)

State (status)

Theme (theme)

Next, let's take a look at the specific contents of the five parts.

Base

Default styles are generally placed in basic (Base) rules. These default styles are basically element selectors, but they can also include attribute selectors, pseudo-class selectors, child selectors, and sibling selectors. In essence, a base style defines what an element should look like anywhere on the page.

For example:

Html {margin: 0; font-family: sans-serif;} a {color: # 000;} button {color: # ababab; border: 1px solid # f2f2f2;}

We see that the code for Base is very similar to CSS resets.

We usually seek the help of Normalize.css or sanitize.css for this part of the code, but we don't need to do it ourselves.

Layout

Let's first distinguish which part of the website belongs to Layout and which part belongs to Module. Take a look at the following screenshot of the website:

First, let's make a rough division, including the head, body, tail and so on, which belong to Layout.

Once again, the elements in the Layout can be further subdivided, such as the navigation bar, which are the components Module.

Layout is very close to the HTML tag, as the skeleton of the website, responsible for layout, Module is more responsible for business presentation and interaction.

The relationship between Layout and Module is (> means included):

Layout > Module

If the website is complex, it can be as follows:

> Layout > Module > Layout > Module...

Therefore, the Layout rule is to split the page into several parts, each of which may have one or more modules.

The general layout class name starts with .l -.

It should be noted that officially, the primary layout use can use the ID selector, the secondary layout can use the class selector, for this I absolutely cannot accept, I think all classes should be used.

Take an example:

.l-header {} .l-primarynav {} .l-main-content {}

Note that now in project development, Layout is often directly used as components, such as, and other components, and then you can follow the Module rules within them.

Module

After reading the previous section, Module is easy to understand.

Module is a reusable and modular part of our design. Illustrations, sidebars, product lists, etc., all belong to modules.

Module from an engineering point of view, it's okay to call it component.

Take an example, a POST component:

The class name is simple, prefixed with moudle-name or component-name.

State

For Module or even Layout, dynamic interaction is inevitably needed, such as whether the button disables disable, whether the layout activates active,tab components, whether to expand expand, etc., so we need to maintain state to operate the dynamic part, which is the fourth part State.

The class name of State, which usually starts with .is -, for example:

. is-collapsed {}. Is-expanded {}. Is-active {}. Is-highlighted {}. Is-hidden {}. Is-shown {}. Is-successful {} Theme

Everyone has used the skinning function of the website more or less, so Theme is quite common, the repeated elements on the entire site, such as color, shape, border, shadow and other rules are basically under the jurisdiction of Theme, in other words, Theme is the place where public class names are defined.

In most cases,. We don't want to redefine them every time we create them. Instead, we want to define a unique class, which we will add to the default element later.

.button-large {width: 60px; height: 60px;} Like

Do not confuse these SMACSS theme rules with the basic rules, because the basic rules are only for the default appearance, and they tend to be similar to resetting to the default browser settings, while the theme unit is more like a style that provides the final appearance, and this particular color scheme is unique.

Theme rules are also useful if your site has multiple styles or multiple themes for different states, so you can easily change or swap during certain events on the page, such as using the theme toggle button. At the very least, they keep all theme styles in one place, so you can easily change them and keep them organized.

SMACSS directory

The naming convention of SMACSS is used in the project, and the purpose is something like this:

Because CSS has only one scope, it will lead to code confusion, difficult to read, and difficult to expand, so there is BEM, but when the project is more complex, we need a new and higher level of style management program, this is SMACSS, not for BEM layering, it uses the method is classification, the project style files are divided into five categories, so that my style management has become more convenient.

What is the basic syntax of css? the basic syntax of css is: 1, the css rule consists of a selector and one or more declarations; 2, the selector is usually a HTML element that needs to change the style; 3, each declaration consists of an attribute and a value; 4, attributes and attribute values are separated by colons.

This is how to understand the SMACSS in the CSS architecture shared by the editor. If you happen to have similar doubts, you might as well refer to the above analysis to understand. If you want to know more about it, you are welcome to follow the industry information channel.

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.