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

This article mainly explains "what are the css theories". The content of the explanation is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "what are the css theories"?

OOCSS, SMACSS, and BEM are all about css methodology (to be exact, BEM should be a complete front-end development theory, not limited to css) and can be used as a guide for implementing a good css architecture (css architecture).

Css is easy to understand, but not easy to apply and maintain. Css can be a problem point in a variety of development scenarios. Therefore, we should write and organize css carefully and attentively.

OOCSS

OOCSS (Object Oriented CSS), which literally means object-oriented CSS, is a css theory put forward by Nicole Sullivan. Its two main principles are:

Separate structure and skin (separate structure and theme) Separate container and content (separate container and content)

Use an example to illustrate. Please take a look at the following arrangement of pictures and texts:

The protagonist of this work is the adopted son of Baron Schwarzer, a local nobleman in the northern part of the empire, and is also a member of the "Ⅶ group" of the special class of Tolz Petty Officer School.

.media {

1.

Padding: 10px

two。

}

3.

.media: after {

4.

Display: table

5.

Clear: both

6.

Content: ""

7.

}

8.

.media-image-container {

9.

Float: left

10.

Margin-right: 10px

11.

}

twelve。

. media-image {

13.

Display: block

14.

}

15.

. media-body {

16.

Overflow: hidden

17.

}

18.

. media-shadow {

19.

Box-shadow: 1px 1px 3px rgba (0,0,0,.5)

20.

}

The above code represents the page elements of this arrangement of images and text in media. If you think of the html, css, and javascript (if any) that make up it as a whole, it is equivalent to a component, or object. It can be reused anywhere on the site.

How does this reflect the two principles of OOCSS?

Separate structure and skin

The separation of structure and theme lies in applying some visual style effects (such as background, color) as separate "themes". The shadow effect in the above example is not written directly in the style rules of media, but in a separate class called media-shadow. Therefore, it has become an optional and detachable theme. If you don't need a corresponding theme, don't add anything, and if necessary, add the corresponding class, that's the way of thinking.

Separate container and content

Separating the container from the content requires that the page element is independent of its location. In the above example, css's selector is short and has no inheritance selector (for example, .header .media {}), so this graphic-text arrangement of elements can be used anywhere and will have a consistent appearance.

If you need to make the component look different in a specific place, continue to add class to the component, using "different parts" as a configurable option. The appearance of the component still does not depend on its location.

Instructions

As you can see, OOCSS-style css can be described as two points:

Add class without using inheritance selectors

OOCSS pursues the reuse of components, and its class naming is relatively abstract and generally does not reflect the specific content.

SMACSS

SMACSS (Scalable & Modular Architecture for CSS) is a css theory put forward by Jonathan Snook. There are three main principles:

Categorizing CSS Rules (Classification of css) Naming Rules (naming rules) Minimizing the Depth of Applicability (minimize adaptation depth)

What do these principles mean?

Categorizing CSS Rules

This is the core of SMACSS. SMACSS believes that there are five categories of css, which are:

Base Layout (Major Components) Module (Minor Components) State Theme

Base Rules, the base style, 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.

Layout Rules, layout style. It, along with the following Module Rules, describes the specific elements in the page. Elements are divided into hierarchical levels, and Layout Rules belongs to the higher level, which can be used as a container for lower-level Module Rules elements. The left and right columns, grid system and so on all belong to the layout style.

Module Rules, module style. It can be a product list, a navigation bar. Generally speaking, the elements defined by Module Rules are placed within the Layout Rules elements mentioned earlier. Modules are independent and can be reused in a variety of situations.

State Rules, the state style, describes the appearance of any element in a particular state. For example, a message box may have both success and error states, and any item in the navigation bar may have current status.

Continuing with the example in OOCSS, the following new is-hidden that keeps the element from being displayed belongs to State Rules:

...

1.

Copy the code

two。

. is-hidden {

3.

Display: none

4.

}

Theme Rules, theme style, 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 a separate class name, that is, you can define .mod {} in Module Rules and then use .mod {} in Theme Rules to define the parts that need to be modified.

Naming Rules

Naming Rules means that when you want to name class and so on, consider using naming to reflect the category corresponding to the style.

According to the first five categories, 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.

Base Rules does not use class and ID, but is a tag selector-based style, such as p, a, without naming.

Naming rules do not need to be strictly observed, you can make other conventions according to the actual situation and your own preferences. It is feasible to record your own agreement (write documentation) and then follow it.

Minimizing the Depth of Applicability

Literal translation is to minimize the depth of adaptation. To illustrate through a simple description:

/ * depth 1 * /

1.

.sidebar ul h4 {}

two。

/ * depth 2 * /

3.

. sub-title {}

The difference between the upper and lower ends of css lies in the coupling between html and css. As you can imagine, because the above style rules use inheritance selectors, there is actually a certain dependency on the structure of html. If you move the h4 element to another location, you may no longer have these styles. 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.

It seems that this is very similar to OOCSS's principle of separating containers from content.

Main goal

SMACSS focuses on achieving two main goals:

More semantic html and css reduce BEM dependence on specific html structures

BEM, namely Block, Element, Modifier, is a front-end development theory put forward by the development team of Yandex (the most famous Internet enterprise in Russia). BEM describes the page through Block, Element, and Modifier.

Block is an independent block in a page that can be reused in different situations. Each page can be thought of as composed of multiple Block.

Element is the element that constitutes Block, which has meaning only within the corresponding Block, and depends on the existence of Block.

A Modifier is an attribute or state that describes a Block or Element. There can be multiple Modifier on the same Block or Element.

Together, these three parts can be reflected in class naming, thus providing developers with a more friendly and meaningful way to organize css. It takes the form of:

.block {}

1.

.block _ modifier {}

two。

.block _ _ element {}

3.

.block _ _ element_modifier {}

Going back to the previous example of the arrangement of pictures and text in OOCSS, the words for the application of BEM are:

The protagonist of this work, the adopted son of Baron Schwarzer, a local nobleman in the northern part of the empire, is also a member of the "Ⅶ group" of the special class of Tolz Petty Officer School.

The advantage of this way of writing is that it carries more useful information in the agreed form of class naming. In the case of multi-person cooperation, the newcomers to the project can easily tell which parts are Block, which are corresponding Element, and which are Modifier, and further infer which parts of html can be used independently.

BEM is a complete front-end development theory, and it only mentions the css class naming convention it uses. As you can see, BEM's naming conventions can make the code easier to maintain.

Can these theories really be applied?

Yes, and it works. However, please do not be too optimistic, any theory is only an attempt to solve the problems of css writing and maintenance, and a summary of its experience. In terms of actual specific projects, you may still encounter confusion. The most important thing about these theories is that they provide an idea (even if they also provide a code base for development patterns) that you may not apply directly, but you should realize through them that you need to think a little more before writing code.

Do not write css directly but use less, sass and other precompilers, also need a reasonable way of coding and organization, because the compiled css can be analyzed, so the principles are the same.

Thank you for your reading, the above is the content of "what does css Theory have". After the study of this article, I believe you have a deeper understanding of what css theory has, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

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.