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

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

Preface

Speaking of CSS naming conventions, you should all be familiar with, or should have heard of, BEM. BEM is a CSS Class naming method proposed by the Yandex team to help developers create better and structurally consistent CSS modules.

BEM divides the class name of the page into Block, Element, and Modifier.

Block: a block is a visual or semantic whole. It is a specific and unique element, for example, a pop-up window on a page, or a search box.

Element (Element): generally considered to be part of a block, element comparison is prefixed with the block name of its parent, such as the title of the pop-up window, the close button, and the confirm button

Modifier (Modifier): the modifier indicates the specific state of a specific element, for example, the two states of the close button when the mouse is not on and when the mouse is not on it.

Now, using Bootstrap's pop-up widget, give a more specific example:

There is a difference between the state when the mouse is on and what is not on it.

As you can see from the above example, the block and the element are connected by two underscores (_ _), while the element and the modifier are connected by two dashes (- -).

Of course, today's article will not focus on what BEM is, if you have not been in contact with BEM before, you can try to understand it, and try it several times in the project to feel its charm. In addition, there are already a lot of articles introducing BEM on the Internet. If you look for it patiently, you will definitely find excellent tutorials. Today's article will share two CSS methodologies that are less introduced: SUIT CSS and SMACSS.

SUIT CSS

"official documentation: SUIT CSS naming convention (https://github.com/suitcss/suit/blob/master/doc/naming-conventions.md)

SUIT CSS is a CSS methodology based on component development, which divides class names into two types: tool classes and component classes.

Tool class

There are many fixed tool classes in CSS, such as: floating left and right, text truncation, vertical center. The role of utility classes is to help programs reduce some repetitive code and provide a consistent implementation.

Naming rule: U-[sm- | md- | lg-]. The tool class starts with u -, followed by the class name (the class name is named using a hump), and responsive rules such as sm, md, and lg can be added in the middle.

Take a chestnut:

? Take a look at my blog, fussy front-end engineers, welcome to follow my official account "more amazing front-end"

Component class

Component classes are used to describe specific components, components are the cornerstone of a specific application, so the design of components is particularly important.

Naming rules: [-] [- descendant name] [--modifier], this naming method has several advantages when writing HTML and CSS:

Helps to distinguish between the root element of the component, the descendant element, and the class used to modify it

Probability of duplicate demoted class names

Can make the class name more semantic

Let's take a look at the specific role of the various parts of the naming convention:

Namespace (optional)

Namespaces are optional, and if you want to avoid conflicts between your own defined component class name and the introduced third-party style class name, you can add a namespace to your own class name. However, if there is no third-party style in your business, you can do so without a namespace.

.sfq-Modal {} / * my pop-up component * / .sfq-Button {} / * my button assembly * /

Component name

Component names are named using large hump rules (uppercase hump rules, Pascal Case), which can also avoid conflicts of the same name style as much as possible.

.Modal {}...

Component name-descendant name

The descendant of a component refers to the part attached to the component, such as the title of the pop-up assembly, buttons, and so on. Descendant names are named using the Little Hump Rule (uppercase Hump Rule, Camel Case).

Welcome to follow the X love front-end engineer, welcome to follow my official account "more amazing front-end"

Component name-modifier

A modifier is a class name that represents a specific state of a component. The modifier name is also named using the small hump rule, and the component name directly needs to be connected with two dashes (- -), which is consistent with BEM.

Click to follow "more amazing front end" click to follow "more amazing front end"

Variable name

SUIT CSS defines not only tool classes and component classes, but also how CSS variables are named. Naming rules:-- component name [- descendant name |-- modifier]-(CSS attribute | variable name).

: root {/ * background color of the base button * /-- Button--default-backgroundColor: # 909399; / * background color of the main button * /-- Button--primary-backgroundColor: # 409EFF;}

Summary of SUIT CSS

SUIT CSS not only defines the naming of tool classes and component classes, but also provides a complete basic class, as well as a test suite to test whether your CSS class name conforms to the specification. For more information on how to use it, please see the official documentation (https://github.com/suitcss/suit)). SUIT CSS can be said to have made improvements on the basis of BEM, especially the design without double underscores, which is much more beautiful than BEM in appearance, and various names are named through the hump, omitting some short dashes, which makes the length of the class name of SUIT CSS more concise than BEM.

SMACSS

"SMACSS official website: http://smacss.com/

SMACSS (Scalable and Modular Architecture for CSS) is an easy-to-develop, easy-to-maintain methodology written by CSS that divides CSS rules into five categories:

Base (basic)

Layout (layout)

Module (module)

State (status)

Theme (theme)

You should be able to find the above five categories in the styles of your existing project, and the combination of these styles will make your code look particularly complex, and if you consciously classify these styles, it will greatly reduce the complexity. In addition to classifying styles, there are some applicable guidelines for each category.

Basic rules

The underlying rule acts on the element selector to define the default style for HTML tags. The base style is mainly used to set the title size, default link color, default font style and body background.

/ * basic style example * / body, form {margin: 0; padding: 0;} a {color: # 039;} a:hover {color: # 03F;}

Layout rules

The essence of CSS is to lay out the elements in the page, but each element of the page is also divided into primary and secondary. For example, large blocks such as the head and tail are the main components, which we call Layout. On the other hand, the navigation bar (belonging to the header) and the website description (belonging to the tail) are secondary components, which we call the Module.

Here's a specific example to take a look at the page layout of the Nuggets:

Juejin.cn

The page has a header, a navigation bar, a content area, and a sidebar, all of which are part of the layout.

Juejin.cn

SMACSS allows the use of ID selectors in layout styles, which helps to distinguish the location of nodes in the layout at a glance in HTML. Other classes that are not ID selectors need to add an l-prefix to indicate that this belongs to the layout style.

Module rule

As mentioned earlier, modules are secondary components that are more loose than layout components, and this distinction is really vague, so some scenarios also eliminate layout rules and divide all reusable components into modules.

Module rules do not have a detailed naming style in the official documentation. I have read a lot of articles, and most of them refer to BEM when naming modules, so I will not introduce them separately here.

Status rule

State is used to describe what the module looks like in different states, using the is- prefix, which helps us to distinguish the state of elements in HTML.

Welcome to follow us.

Some states have a high priority and can be added as appropriate! important, such as those used to control the display or hiding of elements.

. is-hide {display: none! important;}. Is-show {display: block! important;} this is the end of the study of "what are the CSS methodologies?". I hope to solve everyone's 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.