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

This article will explain in detail the ways of organizing CSS for you. The editor thinks it is very practical, so I share it with you as a reference. I hope you can get something after reading this article.

OOCSS

OOCSS means object-oriented CSS. There are two main points of view in this approach:

Separation of structure and design

Separation of container and content

Using this structure, developers can get general classes that can be used in different places.

At this step, there are two points (usually good and bad):

Good: reduce the amount of code through reuse (DRY principle).

Bad: use in combination. When you change the style of a particular element, you probably need to change not only CSS (because most of the classes are public), but also add new classes.

In addition, this OOCSS approach itself has no clear rules, but abstract suggestions, so the results of this approach will be different in production.

As a result, this idea of OOCSS inspires others to create more specific code structures of their own. Front-end Learning Autumn qun: 767273102. If you have anything you don't understand, feel free to ask me.

SMACSS

SMACSS means extensible, Scalable and Modular Architecture (Scalable and Modular Architecture) CSS. The main purpose of this approach is to reduce the amount of code and make it easier to maintain.

Jonathan Snook divides the style into five parts:

Base rules. These are the main web element styles-body, input, button, ul, ol, etc. In this part, we mainly use

HTML tags and attribute selectors, use-classes for special cases (for example, you have a style selection for JavaScript)

Layout rules. These are the styles of global elements, such as the size of, etc. Jonathan recommends using id selectors in these elements because they do not appear more than once on the page. However, the author of this article believes that this is not a good practice. In the style file, whenever id appears, it will cause some trouble somewhere else.

Modules rules. Blocks are used multiple times in a single page. For module classification, id and tag selectors (for reuse and context independence, respectively) are not recommended.

State rules. In this section, the different states of the module and the basis of the web page are specified, which is the only place where the keyword! Important can be used.

Theme rules. Design styles that you may need to change.

It is also recommended that you set namespaces for classes that belong to a particular grouping and use separate namespaces for classes used in JavaScript.

This approach makes it easier to write and maintain code and attracts many developers.

Atomic CSS

Using Atomic CSS, create a separate class for each reusable attribute. For example, margin-top: 1px; you can create a class mt-1,width: 200px; you can create a wmur200.

This style allows you to minimize code by repeating declarations, and it's relatively easy to change the module style, for example, when changing a technical task.

However, this approach also has big disadvantages:

Class names are descriptive attribute names rather than semantic descriptions of the element itself, which sometimes complicates development.

Display settings directly in HTML.

Because of these shortcomings, this method has received a lot of criticism. However, this approach is very effective for large projects.

In addition, Atomic CSS is also used in different frameworks to indicate the style of corrective elements, and there are other ways to present the layer.

MCSS

MCSS is a multi-layer CSS. This style of writing code suggests that the style be divided into several parts, called layers.

Bottom layer (Zero layer or foundation). This layer of code is responsible for resetting browser styles such as reset.css and

Normalize.css)

The basic layer (Base layer) contains the styles of elements that are reused by the site: buttons, text input boxes, and so on.

The project layer (Project layer) contains separate modules and a "context"-based on the client browser, viewing the device of the site / application, user roles, and so on, to modify the elements.

The Cosmetic layer code is the style of OOCSS, making minor changes to the appearance of the element. It is recommended that you retain only styles that affect the appearance of elements, but do not destroy the layout of the site (such as colors and unimportant indents).

The level of interaction between levels is important:

The base layer (base layer) defines a neutral style and does not affect other layers.

The elements of the base layer (base layer) only affect the classes of that layer.

The elements of the project layer (project layer) can affect the base layer and the project layer.

The decoration layer (cosmetic layer) is designed in the form of a descriptive OOCSS class ("atomic" class), and does not affect other CSS code, and can be selectively used in tags.

AMCSS

AMCSS is "Attribute Modules for CSS (attribute module of css)".

Let's look at an example:

Button

The chain of such a class is not simple, so let me organize these values by properties.

The results are as follows:

Button

To avoid naming conflicts, it's a good idea to add namespaces to attributes. Then our button looks like this:

Button

If you use the validator to check the code, you will find that there is no am-button attribute, so you can add data- before the attribute name.

Use a little-known selector "~ =" (IE7+) as the class attribute: this selector selects elements whose attribute values contain the specified word, separated by spaces. Therefore, the selector of this class~= "link" is similar to the selector of a.class.button. Even if specifically used, because the class selector is only a special case of the property selector.

Therefore, the CSS code

.button {...} .button-- large {...} .button-- blue {...}

Convert to

[am-button] {...} [am-button~= "large"] {...} [am-button~= "blue"] {...}

If you don't think such code is common, you can also use the less radical form of AMCSS:

FUN

FUN represents the flat structure (Flat hierarchy of selectors), functional style (Utility styles), and named split component (Name-spaced components) of the selector.

Each letter is followed by a specific principle:

F, flat hierarchy of selectors: it is recommended that you use classes to select elements, avoid useless concatenation, and do not use id.

U, utility styles: encourage the creation of atomic-style services to solve typical patchwork tasks, such as W100 for width:

100% positional force fr means float: right

N, name-spaced components: Ben suggests adding a namespace to specify the style of a particular module element. This approach avoids the overlap of class names.

Some developers have noticed that it is quite convenient to use this principle to write and maintain code; to some extent, the author has produced the best results and demonstrated the technology in a concise way.

This approach also requires a lot of project and code structure, and it only establishes the preferred form of the record element and the method used by the tag. But in small projects, these rules are sufficient to create sufficiently high-quality code.

This is the end of this article on "what are the ways to organize CSS?". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please 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.