1. Write... In CUHK projects CSS The general problem of

• High coupling —— When changing the style , Will also affect the style of other places , Cause unexpected style problems
• Low reuse —— Write the same style repeatedly , It's boring and leads to CSS Volume is too large , This affects the development experience and page loading experience

2.CSS What problems can modularity solve

Style reuse 、 Load on demand 、 Local action Bureau

3. CSS Modular solutions

Basic principle ： Basically all current solutions , By controlling the style weight 、 Defines a globally unique style name , To achieve modularity 、 Control the effect of the action Bureau

3.1 Official program

Everyone knows that in a page CSS The scope of style is global , This is both its advantages and disadvantages , The style override rule is based on the label style inheritance rule 、 Style Selector weight 、 The style definition order determines the final display style , and CSS There is no official control CSS Scoped solutions .

In the early stages of front-end development , We write CSS The evolutionary process of is roughly as follows ：

1. style attribute ： At the very beginning , Pass the style directly through style Property to write the label , A large number of styles are filled with HTML in , Lead to HTML Labels and styles are difficult to maintain
2. <style> label ： later , In order to maintain HTML The concise , take CSS Unified writing in <style> In the label , But you can't reuse styles 、 Cannot cache style
3. <link> label ： then , Write the style in .css In file , adopt <link> Tag to introduce .css file , But it didn't solve CSS Scope problem
4. @import grammar ： Last , @import Syntax solves the problem of finer grained reuse , Can be in a .css Through the file @import Introduce multiple .css file , But the loading speed is slow , And still unresolved CSS Scope problem

3.2 Agreed scheme

There are mainly these schemes ：BEM、OOCSS、MCSS、AMCSS、SMACSS、Atomic CSS、ITCSS、SUITCSS

The basic idea of this kind of Scheme ：

• Regulate by convention CSS The name of , To resolve naming conflicts
• By providing or recommending layered designs CSS Code , To achieve the purpose of style reuse

Typical implementation ： Introduce implementation Atomic CSS Of thought Tailwind CSS frame

3.3 Instrumental solutions

Scoped CSS

principle ： By adding a globally unique attribute selector to each style definition at compile time , And add the same attribute name where the style is used , To achieve modularity CSS Effect of local scope
advantage ： Easy to get started
shortcoming ： Because the weight of the attribute selector is not high enough , As a result, the external style can still affect its vue In component styles , Therefore, the effect of local scope is not thorough enough
Typical implementation ： stay Vue In the component <style> Add on label Scoped attribute

CSS Modules

principle ： By directly replacing each style name with a globally unique name at compile time , To achieve modularity CSS Effect of local scope
advantage ：CSS Modules Can maximize the combination of existing CSS ecology ( The preprocessor / Post processor, etc ) and JS Modular capabilities
shortcoming ： It is difficult to cooperate with component library
Typical implementation ： stay Webpack Of css-loader Enable CSS Modules

CSS in JS

principle ： And CSS Modules be similar , By directly replacing each style name with a globally unique name at compile time , To achieve modularity CSS Effect of local scope
advantage ： By integrating business-related HTML、CSS、JS The code is written together , For later maintenance and transplantation ; make the best of JS Programming ability to achieve complex style dynamic effects
shortcoming ： It takes some learning costs ; Increased code complexity ; Can't take advantage of mature CSS The preprocessor （ Or post processor ）; You can't easily use pseudo classes , Media inquiries, etc
Typical implementation ： introduce styled-components plug-in unit