Talking about CSS modularization and css Modularization

Talking about CSS modularization and css Modularization
Why is CSS modularized?

Are you worried about naming the class?
Are you worried about using the same class name as others?
Are you upset about the unclear hierarchy?
Are you uncomfortable with the difficulty of reusing code?
Why are you afraid of the huge size of common.css?

If yes, congratulations! This article will solve these problems one by one!

So how can we solve the CSS naming problem?

Let's take a look at how CSS is standardized: Use meaningful or common IDs and class names. The name of the ID and class should reflect the function of the element or use a common name, rather than an abstract obscure name. The purpose of reflecting the use of elements is preferred. The use of a common name indicates that the element has no specific meaning and is similar to the element of the same level. It is usually used for auxiliary naming; the use of functional or general names can be more suitable for document or template changes.

Frequently used names (multiple records and multiple English words): page, wrap, layout, header (head), footer (foot, ft), content (cont), menu, nav, main, submain, sidebar (side), logo, banner, title (tit), popo (pop), icon, note, btn, txt, iblock, window (win), tips, etc.

Note: The type selector should not use tags, IDs, and classes as the positioning element selector. In terms of performance, the hierarchy of the selector should be minimized.

How to Build CSS with clear structure?

Everyone said that CSS learning and writing are simple, so if those who have been writing CSS for many years have calmed down and thought about it, there are systematic and standardized CSS writing by themselves, instead of writing CSS rashly. In addition, when I write CSS on my own in the team, can other students see the code and know what you are writing? If not, let's look at some of the concepts and ideas mentioned here, such as Sass, SCSS, LESS, BEM, OOCSS, and AMCSS. Let's get to know more about css?

• First, let's take a look at BEM)

BEM refers to block, element, and modifier. It is a front-end naming methodology proposed by the Yandex team. This clever naming method makes your CSS class more transparent and meaningful to other developers. BEM naming conventions are more strict and contain more information for a team to develop a large project that is time consuming.

The naming conventions are as follows:

1. . Block {} // block is commonly referred to as a component or module in Web application development. Each block is logically and functionally independent from each other.

2. . Block _ element {} // element is an integral part of the block. Elements cannot be used without blocks. BEM does not recommend nesting other elements in the element.

3. . Block -- modifier {} // modifier used to define the appearance and behavior of a block or element. The same block has different appearances after different modifiers are applied.

BEM is not a framework, it is just an idea

Advantages and disadvantages of BEM

Advantage: BEM has the advantage that only one class selector is used for the generated CSS class names, which can avoid the complex attribute cascade problem caused by nesting of multiple class selectors in traditional practices. In BEM naming rules, all CSS style rules only use one category selector. Therefore, the specificity of all style rules is the same, so there is no complicated priority problem. This simplifies the stack rules of attribute values. The benefit of naming rules in the code list is that each CSS class name is simple and clear, and the hierarchy of the class name can correspond to the tree structure of the DOM node. Disadvantage: CSS class names are long and complex. At first glance, the CSS class names generated according to BEM naming rules are complicated, but they can be easily understood after being familiar with naming rules.

• Let's take a look at OOCSS (Object Oriented CSS)

OOCSS represents Object-Oriented CSS (Object Oriented CSS). It is a practice that applies object-oriented methodology to CSS code organization and management. The most critical aspect of OOCSS is to improve its flexibility and reusability. This is also the most important aspect of OOCSS. OOCSS advocates that by adding more classes to the basic components, the CSS rules of the basic components can be extended to make CSS more scalable.

We have a container that is 1/4 wide on the page, with a blue background, a 1 px gray border, a 10px left and right margin, a 5px top margin, and a 10px bottom margin, in the past, we often created a class for this container and added all these styles. As shown below.

1.  1 // template 2  3 <div class="size1of4"></div> 4  5 // style 6  7 .size1of4 { 8  9  background: blue;10 11  border: 1px solid #ccc;12 13  margin: 5px 10px 10px;14 15  width: 25%;16 17 }

    

However, if oocss is used, we will not do this. I will create more classes for this container, and each style corresponds to a class, so that the style of these components can be reused later, to avoid repeated Writing of the same style, take this instance as an example. We will add the following classes to this container: bgBlue, solidGray, mts, mlm, mrm, and mbm.

1.  1 // template 2  3 <div class="size1of4 bgBlue solidGray mts mlm mrm mbm"></div> 4  5 // style 6  7 .size1of4 {width: 25%;} 8  9 .bgBlue {background:blue}10 11 .solidGray {border: 1px solid #ccc}12 13 .mts {margin-top: 5px}14 15 .mrm {margin-right: 10px}16 17 .mbm {margin-bottom: 10px}18 19 .mlm {margin-left: 10px}

    

Advantages of OOCSS

• Reduce CSS code.

• It has clean HTML tags, semantic class names, and logical hierarchies.

• Semantic tag helps SEO.

• Better page optimization and faster loading time (because many components are reused ).

• Scalable markup and CSS styles. More components can be placed in the library without affecting other components.

• You can easily create a new page layout or create a new page style.

Disadvantages of OOCSS

• OOCSS is suitable for real large-scale website development, because large websites use a large number of reusable components, which may fail to be used in small projects. Therefore, you should decide whether to use OOCSS based on your project.

• If you do not use it skillfully, creating components may be useless for you. It may be a mess, which brings unexpected cups to your maintenance. It may be a nightmare of maintenance.

• It is best to write a description document for each component to facilitate call and maintenance.

• AMCSS (attribute module ).

The core of the attribute module or AM is to define the namespace for writing styles. In general, an attribute is added to an element, and the element is located through the attribute selector. Avoid using too many classes.

1.  1 // template 2  3 <div am- Row ></div> 4  5 <div am- Column = "12"> Full < /div> 6  7 </ div> <div am- Row > <div am- Column = "4"> Thirds </div> 8  9 <div am- Column = "4"> Thirds </div>10 11 <div am- Column = "4"> Thirds < /div> </ div>12 13 // style14 15 [am- Row ] { /* max-width, clearfixes */ }16 17 [am- Column ~= "1" ] { /* 1/12th width, floated */ }18 19 [am- Column ~= "2" ] { /* 1/6th width, floated */ }20 21 [am- Column ~= "3" ] { /* 1/4th width, floated */ }22 23 [am- Column ~= "4" ] { /* 1/3rd width, floated */ }24 25 [am- Column ~= "5" ] { /* 5/12th width, floated */ } /* etc */26 27 [am- Column ~= "12" ] { /* 100% width, floated */ }

    

The first thing you will notice is that there is an am-prefix. This is also the core part of AM, ensuring that the attribute module does not conflict with existing attributes. You can use any prefix name you like. I often use the ui-, css-, or other prefix, but these examples use the am-prefix. The validity of HTML is very important for you or your project, just like the attributes defined starting with data-prefix. The second thing you may notice is a value similar to 1, 4, or 12. Using a class name becomes very troublesome-there are many opportunities for conflict. But defining our own namespace actually makes the space small and will not cause conflicts during work. You can select the most concise and meaningful tag for better work.

Although we have so many good solutions to solve some css problems, is there any kind of thing or tool to replace us with this, as a programmer, we do not like to do things that are too troublesome. Next, let's talk about the css build tool.

OK. Let's explore how webpack is modularized.

With: local (without brackets) local mode can be switched on for this selector.: global (. className) can be used to declare an explicit global selector. with: global (without brackets) global mode can be switched on for this selector. webpack divides the class into two types: local and global ). The exported data is local by default, but you can use the global (...) switch to control global export. Let's take a look at the chestnuts.

1. 1 // enter 2 3: local (. className) {background: red;} 4 5: local. className {color: green;} 6 7: local (. className. subClass) {color: green;} 8 9: local. className. subClass: global (. global-class-name) {color: blue;} 10 11 // export 12 13. _ 23_aKvs-b8bW2Vg3fwHozO {background: red;} 14 15. _ 23_aKvs-b8bW2Vg3fwHozO {color: green;} 16 17. _ 23_aKvs-b8bW2Vg3fwHozO. _ 13LGdX8RMStbBE9w-t0gZ1 {color: green;} 18 19. _ 23_aKvs-b8bW2Vg3fwHozO. _ 13LGdX8RMStbBE9w-t0gZ1. global-class-name {color: blue ;}

    

: Local (className) is compiled into a unique identifiable identifier: global (className) is output as is, of course, we can also control the export format. The configuration is as follows:

1.  1 { 2  3  test: /\.css$/ , 4  5  use : [ 6  7    { 8  9     loader: 'css-loader',10 11     options: {12 13       modules: true ,14 15       localIdentName: '[path][name]__[local]--[hash:base64:5]'16 17     }18 19   }20 21 ]22 23 }

    

Implementation of CSS scoped?

Currently, scoped attributes are available in various frameworks, so that our css is modularized and will not pollute other modules. How is scoped implemented? Let's unveil it together, right?

If you are a diligent and studious student, you will surely find a scoped attribute in the HTML style tag. Let's take a look at the magic of this attribute.

For a long time, STYLE elements in the document are usually global in scope, and the selector is set according to the global CSS priority rules. To achieve local selection, you must first select the container element and then use the descendant selector. The scoped attribute allows the STYLE element to no longer act on the global, but to select future generations from the container where the current STYLE element is located.

1. 1 <div> 2 3 <style scoped> 4 5 span {color: red ;} 6 7 </style> 8 9 <span> I am a SPAN in 1st DIV </span> 10 11 </div> 12 13 <div> 14 15 <style scoped> 16 17 span {color: green ;} 18 19 </style> 20 21 <span> I am a SPAN in 2nd DIV </span> 22 23 </div> 24 25 <div> 26 27 <span> me is the SPAN in 3rd DIV </span> 28 29 </div>

    

Result:

We can see that the third div is not infected by the first and second styles. That is to say, css with the scoped attribute is an independent scope and will not affect other modules !! That's great. We can add the scoped attribute in the style to solve the problem in the future!BUTThis method takes effect only in Firefox. other browsers do not support the latest chrome browser. I @ # ￥ % ......

Don't worry, let's take a look at the vue code. After we add the scoped attribute to the style

Isn't that the application of AMCSS (attribute module) We just talked about? That is to say, when vue is compiling, it adds a unique attribute to the module with the scoped attribute, and achieves modularization through the class name + attribute selector method!

In fact, other frameworks also use similar methods. Let's take a look at the implementation of the wepy framework of the mini program?

This is what we just talked about OOCSS (facing the object CSS )!!

Right. Can we better understand what we just talked about with the framework?

How to load css as needed?

Sometimes some useful CSS should be put into a common.css, but when our project is large enough, the common content will become very huge and difficult to maintain.

First of all, we have to say that there are several popular CSS preprocessors, such as Less, Sass, Stylus, and postCss, which are a huge leap in the history of CSS. He mainly provides the following functions:

• Nested syntax

• Variable

• @ Import

• Mix in

• Inheritance

• Function

• Logical Control

After understanding the csspre-processor, how can we optimize our common.css?

To solve this problem, let's first take a look at how the mixin in LESS works.

1. 1 // you can mix the "class" selector or "id" selector, for example: 2 3. a, # B {4 5 color: red; 6 7} 8 9. mixin-class10 11 {12 13. a (); 14 15} 16 17. mixin-id {18 19 # B (); 20 21}

    

The preceding figure shows:

1.  1 .a, #b { 2  3  color: red; 4  5 } 6  7 .mixin-class 8  9 {10 11  color: red;12 13 }14 15 .mixin-id {16 17  color: red;18 19 }  

    

Tip: When you call a hybrid set, you can add or remove parentheses.

1. 1. a (); // The two call methods have the same effect. 2.;

    

If you want to create a hybrid set but do not want it to be output to your style, you can add a bracket after the name of the hybrid set.

1.  1 .my-mixin { 2  3  color: black; 4  5 } 6  7 .my-other-mixin() { 8  9  background: white;10 11 }12 13 .class {14 15  .my-mixin;16 17  .my-other-mixin;18 19 }

    

Output:

1.  1 .my-mixin { 2  3  color: black; 4  5 } 6  7 .class { 8  9  color: black;10 11  background: white;12 13 }

    

Well, we can use the mixins in less to re-modify our common. less, and it won't look very bloated. We can load our style as needed, isn't it great?

Here is our CSS modularization. If you have any comments or suggestions, contact me!

 

------------------

If you like our articles, follow our public account to interact with us.