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

Today, the editor will share with you the relevant knowledge points of CSS design pattern case analysis, the content is detailed and the logic is clear. I believe most people still know too much about this knowledge, so share this article for your reference. I hope you can get something after reading this article. Let's take a look at it.

Design pattern: OOCSS

OOCSS is a relatively basic design pattern, other design patterns are more or less the shadow of OOCSS. So what is OOCSS? I guess you already know when you see OO, yes, it is object-oriented, so does object-orientation have anything to do with writing CSS? Of course there is.

OO: object oriented

Everyone is familiar with object-oriented, so let's take a brief look at the following code:

Class Person {void study () {}} class Teacher extends Person {void study () {} void teach () {}} class Student extends Person {void study () {}}

There is a Person class that has some methods, and both Teacher and Student inherit Person with some revisions and extensions. Then we can think of the Person class as someone else writing the code, adding Teacher and Student to revise and extend the source code without changing other people's source code. This method of writing can be applied to CSS. Let's look at the following code scenario:

.menu {color: green; font-size: 14px;} .fix {color: red;}

Scene: the designer just wants us to change the style of one of the boxes, the other remains the same.

You can't change menu easily at this time, because once you change it, it will affect what you don't need to change. Then we can directly use the object-oriented idea and add a separate class to revise and extend it. If we take a look at the CSS we usually write, isn't it object-oriented?

Of course, OOCSS has specific principles. So what are the principles and what are the specific principles of it? Let's take a look:

Principle 1: separation of container and content

The separation of container and content, as the name implies, looks directly at a code case:

Hello

Hello

/ /-code 1-.post .metadata {/ / css code} / /-code 2-.post {} .metadata {/ / css code}

Scene: the content is the same in two different containers

First look at the style of code 1, this is obviously not good, the container and content are nested dependencies, and do not separate the container from the content. The style of the content cannot be reused. The style of code 2 separates the container from the content, which can be reused in different containers.

Principle 2: separation of structure and skin

The structure can be thought of as a basic object, while the skin can be seen as another object, that is, the object should be separated from the object. The basic object can not be changed, and the skin object is constantly separated to achieve the modification and expansion of the basic object.

/ / basic object. Menu {color: green; font-size: 14px;} / / skin. Relationship between fix {color: red;} OOCSS and Vue

The component of OOCSS,Vue that we write every day is OOCSS. We have the following code:

/ /-define components-

Export default {name: 'MateData'} / / basic object. Menu {color: green; font-size: 14px;} /-use components-/ / skin. Fix1 {color: red;}. Fix2 {font-size: 20px;}

Application of OOCSS

Grid grid systems, layout components, etc.

Design pattern: BEM what is BEM

BEM, namely Block, Element and 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 (the key is to solve the naming problem of multi-person collaboration).

Block is a separate block on a page that can be used 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. The same Block or Element can have more than one Modifier,Modifier and cannot exist alone.

When naming, Block is used as the beginning, different Block and Element are separated by two bottom lines, and different Modifier are separated by -.

Advanced version of OOCSS

BEM is an advanced version of OOCSS, as shown in the following figure:

Scene: two tab columns on the page, the overall layout is similar, only the details are different

Then when you write the style with BEM, a block menu is defined, which contains the element menu_tab below to complete the overall layout, and the details are fine-tuned with the modifier menu_tab-style1. The code is as follows:

From the above code, you can see that BEM is OOCSS.

If you are interested in BEM, you can visit BEM's official website: https://en.bem.info/methodology/css/

Function:

Naming rules to make the page structure clearer

In addition, with regard to the symbols used in naming conventions, modifications can be discussed within the team, not necessarily according to this symbol, BEM just provides an idea.

Design pattern: SMACSS

SMACSS is a way to examine your design process and as a way to fit

Those rigid frameworks into a flexible thought process.

(SMACSS uses a flexible thought process to check whether your design process and approach are in line with your architecture, more like a specification.)

Core idea: classification

The core of SMACSS is classification, which is mainly divided into five categories: Base, Layout, Modules, State and Theme.

Base is a reset of the default style of the browser, and the common normalize.css belongs to it. Here the style will only set the tag element itself, there will not be any class or id, but can have attribute selectors or pseudo-classes.

Some of the functions of Layout for page layout belong to a higher level, and 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. SMACSS also conventionally names the class that identifies the layout using the prefix lmer _.

Modules common reuse small module, 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 the classes under the module are prefixed with the module, for example: .menu .menu-title, etc.

Different display effects of State, such as showing and hiding, are different from the way BEM extracts decorated classes. SMACSS is to extract higher-level style classes for stronger reusability, all named with is- prefixes, such as: is-hidden.

Theme for different theme skin maintenance, you can modify the first four categories of style, and should be separated from the first four categories (easy to switch, that is, "skin change"). Naming conventions require the addition of a theme- prefix.

Minimum adaptation depth principle / * 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.

When using SMACSS in a project, each category is a directory, but in Vue, Layout and Modules do not need to maintain directories separately, because the layout components and module components we write are equivalent to these two categories.

To learn more about SMACSS, you can visit: https://smacss-zh.vercel.app/preface.html

Design pattern: ITCSS

This is a CSS design methodology advocated by csswizardry that allows CSS to be better managed and maintained.

Using ITCSS can mainly help us with the following points:

Manages source order.

Filters explicitness.

Tames the cascade.

Sanitises inheritance.

It probably means:

Manage the writing order of CSS code.

The clarity of the filter means layering to clarify the role of each layer of CSS.

Control the weight of CSS

Safe use of inheritance

Core idea: layering

The core of ITCSS is layering, which is mainly divided into seven layers, which is more refined than the classification of SMACSS.

Settings: global variables used by the project

Tools: mixin,function

Generic: the most basic setting normalize.css,reset

Base: type selector

Objects: an undecorated design pattern, equivalent to SMACSS's Layout

Components: UI component

Trumps: helper can only use important! The place

Here is the architectural model of ITCSS:

From this model, it can be seen that the more down it is, the more specific it is, and the more it is limited to something specific. In addition, the next layer always inherits all the styles of the previous layer.

Each layered example

Settings

Global variables, such as color, font size, etc.

$yellow: # FAAF00;$yellow-bright: # FAF7F0

Tools

Mixin,function, wait.

@ mixin sample-mixin () {.}

As of Tools, no specific css will be generated

Generic

Reset,normalize, wait.

*, *:: before,*::after {box-sizing: border-box;}

Base

Type selector such as link, p, etc. Only this layer uses type selector

P {margin: 0 line-height: 1.5;}

Objects

Cosmetic-free, do not use things such as color, border-color, background-color, etc.

With this CSS, you can only see a blank space on the browser.

Layout is mainly used to make pictures.

. o-container {box-sizing: border-box; margin: 0 auto;}

Components

UI component

To this part, according to the UI analysis of which components need to be implemented, it can be distributed to multiple people to implement at the same time.

# button component. C-btn {display: flex; justify-content: center; align-items: center;. &-- primary {background-color: # ff5959; color: # fff;} &-- large {font-size: 16px; padding: 16px 14px;...}}

HTML is something like this

Samplesample

Trumps

Put all kinds of helper

The most important function is when it is not suitable or not easy to put in Component.

For example, margin probably shouldn't put Component, so you can fine-tune it with Trumps.

This will prevent your Component from getting very large.

Only this floor can be used! Important to avoid more than one! The chaotic situation of important

.u-color {&-- white {color: $white! important;}} .u-hidden {display: hidden! important;}

When in use, each tier is maintained as a folder. When used in Vue, Objects and Components are equivalent to our components and do not require separate maintenance.

In addition, it is worth noting that whether it is the classification of SMACSS or the layering of ITCSS, it is an idea that we can dynamically add or delete a classification or hierarchy according to the actual project.

Design pattern: ACSS

ACSS uses a tight library of class names. These class names are usually abbreviated and separated from the content they affect. In the ACSS system, we know the role of the class name; but there is no relationship between the class name and the content type, that is, each style corresponds to a class, also known as the atomic class CSS.

.float-left {float: left;}. Float-right {float: right;}. Zmur0 {z-index: 0;} .z-auto {z-index: auto;}

From the above code, you can see that ACSS has strong reusability and low maintenance costs, but destroys the semantics of css naming. In the end, it is likely that the code will look like this. But existence is reasonable, and ACSS also has its role, so move on.

one

two

three

four

five

six

Mixed use of CSS design patterns (examples of CSS architecture)

In the design of a project, we can select a variety of CSS design patterns, combined with the advantages and disadvantages of different design patterns, design a complete ginkgo CSS architecture.

Examples are:

If we choose ITCSS, BEM, ACSS to combine, design a CSS architecture.

When we design the CSS architecture, the first thing that comes to mind must be SMACSS and ITCSS, because they classify and classify CSS.

SMACSS:

Base

Layout

Tools

Modules

State

Theme

ITCSS:

Setting

Generic

Base

Objects

Components

Trumps

From the above table we can see that the ITCSS layering is more refined, so we chose ITCSS, and then we went on to look at the Objects and Components layers of ITCSS, which is equivalent to OOCSS and equivalent to developing Vue components, so we use an advanced version of BEM that chooses OOCSS when developing components. We know that if a project uses all ACSS disadvantages and obvious, then we chose ACSS because there may be this style to the font size in the project, so we can maintain this type of style in the ACSS directory. Generic is similar to Base, so just keep Base. I assume that Trumps doesn't need it, so remove this layer as well. So our architecture is now like this.

ITCSS+BEM+ACSS

Setting

Tools

Base

Objects

Components

ACSS

The directory structure is:

-| comments- | styles-- | acss-- | base-- | settings-- | the above tools is all the contents of the article "CSS Design pattern instance Analysis". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to 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.