current position:Home>Front end Engineering Series - modularization - CSS modularization

Front end Engineering Series - modularization - CSS modularization

2021-08-26 00:23:58 Axe

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


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

copyright notice
author[Axe],Please bring the original link to reprint, thank you.

Random recommended