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

This article will explain in detail how to write a maintainable CSS library, the content of the article is of high quality, so the editor will share it with you for reference. I hope you will have a certain understanding of the relevant knowledge after reading this article.

How to write a maintainable CSS library? Talk about the design pattern / architecture of CSS. Next, I will tell you about three mainstream CSS design ideas and a recently common CSS design idea: OOCSS, SMACSS, BEMCSS, METACSS.

OOCSS

OOCSS, which literally means object-oriented CSS, is a css theory proposed by Nicole Sullivan. Although it is a theory, it is more like a specification of agreement among programmers:

Separate structure and skin (separation of structures and themes) reduces dependence on HTML structures

Separate container and content (separation of containers and content) increases the reusability of styles

In OOCSS's view, reuse of class is emphasized, and id should be avoided as a selector for CSS. OOCSS pursues the reuse of components, and its class naming is more abstract, which generally does not reflect specific things, but pays attention to the extraction of the presentation layer.

SMACSS

Smacss uses a flexible thought process to check whether your design process and approach are in line with your architecture.

There are three main specifications of the design:

Categorizing CSS Rules (for css classification)

Naming Rules (naming convention)

Minimizing the Depth of Applicability (minimize fit depth)

Categorizing CSS Rules

This is the core of SMACSS. SMACSS believes that there are five categories of css: 1 Base 2 Layout 3 Module 4 State 5 Theme or Skin

Base Rules

The basic specification describes the default appearance of page elements in any situation. Class and ID are not used in its definition. Css reset also falls into this category. Common ones such as normalize.css,CSS Tools

Layout Rules

Layout specification, elements are divided into hierarchical levels, Layout Rules belongs to the higher level, it can be used as a container for lower-level Module Rules elements. Left and right column, grid system and so on all belong to the layout specification. Layout is the basic of a website, whether left or right or centered, or even any other layout, in order to achieve the basic browsing function of the page, layout is essential. SMACSS has also agreed on a prefix lripple _ layout-to identify the class of the layout. Take the most common example.

. layout-header {}. Layout-container {}. Layout-sidebar {}. Layout-content {}. Layout-footer {} Module Rules

Module specification, module is the most basic idea of SMACSS, but also the basis of most CSS theory, modularization of the style can achieve the purpose of reuse and maintenance, but SMACSS put forward a more specific modularization scheme. The module in SMACSS has its own name, and all classes under the module are prefixed with this module. Examples are as follows:

.todolist {}. Todolist-title {}. Todolist-image {}. Todolist-article {}

You can see that todolist as a module, including title,image,article and other components, but also can be added, such as .todolist-background-danger and other modified classes, in the module can use its name as a prefix to organize any module structure, but the purpose is to make it easier to use, improve scalability and flexibility, if just to modify, write a large number of classes without any reusability, it is a self-defeating approach.

State Rules

The state specification, which should be well understood by many front-end developers, describes the appearance of any element in a particular state. For example, a message box might have states such as success and error. Unlike the way OOCSS extracts decorated classes, SMACSS extracts higher-level style classes for greater reusability, such as how to hide an element:

. is-hidden {display: none;} Theme Rules

Theme specification, describes the appearance of the page theme, generally refers to the color, background image. Theme Rules can modify the styles of the first four categories and should be separated from the first four categories (easy to switch, that is, "skinning"). SMACSS's Theme Rules does not require separate class naming, that is, you can define .header {} in Module Rules and then use .header {} in Theme Rules to define the parts that need to be modified (after loading overlay before loading style content)

Naming Rules

Naming convention

According to the first five categories:

Base Rules (Pass)

Layout Rules uses prefixes such as l-or layout-, such as .l-header, .l-sidebar.

Module Rules is named after the module itself, such as .media and .media-image arranged with graphics and text.

State Rules uses the is- prefix, for example: .is-active, .is-hidden.

If Theme Rules is a separate class, use the theme- prefix, such as .theme-a-background, .theme-a-shadow.

Minimizing the Depth of Applicability

The principle of minimum adaptation depth, a simple example:

/ * depth 1 * / .sidebar ul h4 {} / * depth 2 * / .sub-title {}

The difference between the two pieces of css lies in the coupling of html and css (which coincides with OOCSS's principle of separating containers and content). As you can imagine, because the above style rules use inheritance selectors, there is actually a certain dependency on the structure of html. If html is refactored, it is possible that these styles are no longer available. Accordingly, the following style rule has only one selector, so it does not depend on a specific html structure, as long as you add class to the element, you can get the corresponding style.

Of course, inheritance selectors are useful to reduce style conflicts caused by the same name (which often occurs in collaborative development). However, we should not overuse it, using as short, unqualified selectors as possible, to the extent possible that there is no style conflict. This is the meaning of minimizing the depth of adaptation of SMACSS.

BEMCSS

BEM stands for: Block (block), Element (element / sub-block / component), Modifier (modifier), is a component-based CSS naming method and specification, proposed by the Russian Yandex team. Its purpose is to divide the user interface into independent (module) blocks, which makes the development easier and faster, and facilitates team collaborative development.

Characteristics

The development idea of component / modularization. The decoupling of the writing mode will not cause namespace pollution, such as the potential nesting risk caused by:. Xxx ul li writing. The naming format is flat, which avoids the reduction of parsing efficiency and rendering overhead caused by too many style levels. Components are structurally independent, style conflicts are reduced, and completed components can be quickly applied to new projects. It has good maintainability, readability and flexibility. Rules

The naming pattern of BEM has different ways in the community. The following is the naming convention proposed by the Yandex team (which is used by the code in this article):

. [Block block] _ _ [Element element] _ [Modifier modifier] has different naming patterns. The difference is that the connection symbols between BEM are different, depending on the individual:

. [Block block] _ [Element element]-- [Modifier modifier] any specification is based on actual requirements and is convenient for team development and maintenance expansion, and each specification is a "train of thought" and "suggestion" after reasonable evaluation.

Block (block)

Is an independent entity, commonly referred to as a module or component.

Example: header, menu, search

The rule block name should be able to express clearly that its purpose, function or meaning is unique. Use-join between block names. Each block name should be preceded by a prefix, which has a namespace in CSS (such as: M -, u -, representing: mod module, ui element, respectively). Each block is logically and functionally independent of each other. Because blocks are independent, they can be reused in application development, so as to reduce code duplication and improve development efficiency. Blocks can be placed anywhere on the page or can be nested within each other. The same type of block, there may be some differences in the display, so do not define too many appearance display styles, mainly responsible for the presentation of the structure. This ensures that blocks are reused and nested in different places to increase their scalability. To sum up, we can finally define the BEM rule as:

. [namespace]-[component name / block] _ _ [element name / element]-- the [modifier] scenario needs to build a search component.

M-search {} structure

If you plan to develop a framework, you can use representative abbreviations to represent namespaces: Element UI (el-), Ant Design (ant-), iView (ivu-).

Element (element)

Is a part of a block that corresponds to child elements / child nodes in the block.

Example: header title, menu item, list item

The rule element name should be able to simply describe its structure, layout, or meaning, and be semantically associated with the block. Blocks and elements are connected with _ _. Cannot be used separately from the block. The internal elements of a block are considered to be child elements of the block. The class name of an element in a block must be prefixed with the name of the parent block, so it cannot be written as: block__elem1__elem2. The context search component contains input and button, which is a child element in the list.

M-search {}. M-search__input {}. M-search__button {} structure

In principle, Search does not have more than two layers of nesting when writing, all styles are flat, and nesting occurs only when the. m-block_active is activated.

Modifier (modifier)

Define the appearance, state, or type of blocks and elements.

Example: color, disabled, size

Rule modifiers need to be intuitive and easy to express, their appearance, state, or behavior. The modifier connects the block to the element with _. Modifiers cannot be used alone. It can be extended if necessary, written as: block__elem_modifier_modifier, with the first modifier representing its namespace. The scenario assumes that the search component has multiple skins, and we choose one of them. And when the user does not enter the content, the button displays as a disabled style.

M-search {}. M-search_dark {}. M-search__input {}. M-search__button {}. M-search__button_disabled {} structure

Search

Summary

Many people think that BEM is written in an ugly way, and aesthetic appreciation is a matter of "the wise see wisdom, the benevolent see benevolence". It may be a little strange to just come into contact, but everything has an adaptation process. If it is just to look good and avoid its advantages, I think the loss outweighs the gain. It is personally recommended that you try to use the BEM specification to write code.

BEM naming makes the Class class name longer, but after being compressed by GZIP and so on, the size of the file doesn't really matter much.

Just like the CSS semantics proposed in the early years, do not remove the semantics for the sake of semantics, the function of semantics itself is to help you better identify the code, all the specifications are based on the development of the project and the cooperation of the team, the team can choose the most appropriate way according to the wishes of the members.

METACSS

Some general methods written globally are branches of the general method idea in SMACSS, generally named after the css attribute and the desired effect, usually with a css attribute as a unit

That represents the attribute:

.df {display: flex;} copy the code

That represents the function:

.tcut {text-overflow: ellipsis; white-space: nowrap; overflow: hidden;} copy the code

And so on, encapsulate it and put it globally, and quickly add attributes to develop the page.

Smacss covers all the details; bemcss focuses on the naming and semantics of css; oocss focuses on reusability, taking each dom node as an object, which is the idea of css returning to nature; metacss focuses on rapid development to quickly add attributes with finer granularity, adding attributes by adding categories, without having to modify the css to modify the style.

On how to write a maintainable CSS library to share here, I hope that the above content can be of some help to you, can learn more knowledge. If you think the article is good, you can share it for more people to see.

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.