[Yuanchuang Essay Competition] Vue3 enterprise-level elegance in practice - component library framework - 4 CSS architecture of the component library

This series of articles has been updated:
Share a practical vite + vue3 component library scaffolding tool to improve development efficiency.
Out-of-the-box yyg-cli scaffolding: Quickly create vue3 component library and vue3 family bucket project
Vue3 enterprise-level elegance in practice - component library framework - 1 Build pnpm monorepo
Vue3 enterprise-level elegance in practice - component library framework - 2 Initialize workspace-root
Vue3 enterprise-level elegance in practice - component library framework - 3 Build a component library development environment

In the previous article, I shared the basic development environment for building a component library and created the foo component module and component library entry module. This article shares the style architecture design of the component library.

1 Common CSS architectural patterns

There are many common CSS architecture patterns: OOCSS , ACSS , BEM , SMACSS , ITCSS , etc. Among them, SMACSS and ITCSS are very similar. What I most often use in enterprise-level projects is the simplified version of ITCSS + BEM + ACSS , so this article first introduces these three modes. You can check the other modes online for yourself.

1.1 ACSS

ACSS mode is almost a style attribute corresponding to a style class. This method is very flexible, highly reusable, and low maintenance cost, but it destroys the semantics of CSS naming. Common names include: d-flex, m-10, w-20, etc.

1.2 WELL

The BEM pattern is a naming methodology, and its naming hierarchy is: block B lock , element Element , modifier Modifier , which is also the origin of the name "BEM". The element Element uses two short underscores (__), and the modifier Modifier uses two short dashes (–), such as the following HTML fragment and corresponding class name:

<div class="demo-block">
  <a class="demo-block__element1">Link</a>
  <a class="demo-block__element1 demo-block__element1--modifier">Link</a>
</div>

<style>
  .demo-block {
      
      } // 块
	.demo-block__element1 {
      
      } // 元素
	.demo-block__element1--modifier1 {
      
      } // 修饰符
</style>

Using BEM can standardize commands and make the page structure clearer.

1.3 ITCSS

ITCSS is a style hierarchical structure with seven levels in total. The seven levels from top to bottom are:

Settings layer: usually some style variables, such as values that define common color values, font sizes, etc.;
Tools layer: general tool functions, including mixins, functions, etc.;
Generic layer: general basic style, usually to reset the browser default style, such as normalize.css, resets and other libraries;
Base layer: perform common customized styles for some globally used elements, such as page settings, ul tag settings, etc.;
Objects layer: All places where OOCSS is used, that is, special classes separated by certain structures and styles;
Components layer: Specific components can actually correspond to each component in the component library;
Trumps layer: Rewriting some styles, such as resetting width to 100px, will only affect a certain small area of DOM elements, with the highest weight, similar to ACSS, but usually with ! important added .

2 CSS architecture of component library

The ITCSS layering is very detailed, and the style of our component library is simplified based on it, omitting the Base layer or Objects layer. For the Trumps layer, we use ACSS instead. For the Components layer, each component uses BEM internally. Therefore, the style architecture of our component library is: simplified version of ITCSS + BEM + ACSS.

2.1 Overview of CSS structure

The style of the component library uses the preprocessor SCSS. From the overall structure, it is divided into the following levels:

Base layer: The most basic level of the entire CSS structure, corresponding to the Settings, Generic and Base of ITCSS . That includes variable definitions, common basic styles and customized basic styles.
Tools layer: Like ITCSS Tools, it provides general tool functions.
acss layer: Similar to ITCSS 's Trumps, it defines some atomic style classes, such as flex, margin, and padding related style base classes.
Components layer: Like the Components of ITCSS, it implements the styles of each component, and the styles of each component are organized and named using the BEM method.

2.2 Implementation of base layer

As mentioned earlier, the base layer includes style variable definitions, common basic styles, and customized basic styles.

First, create a base directory in the packages/scss directory to store the scss files of the base layer.

settings

Settings are the definition of some variables. Create the _var.module.scss file in the packages/scss/base/ directory, which defines style variables.

$primary-color: #488019;
$common-padding: 20px;

:export {
  primaryColor: $primary-color;
}

Generic

Generic is usually a reset of browser styles, unifying the display of HTML tags in different browsers and shielding differences between browsers. In this part, you can use the open source libraries normalize.css , reset.css , etc. This layer can be omitted in the component library and the corresponding css can be introduced in each specific application. However, the programmer Elegant Brother still introduced browser style reset into the component library, which saves trouble in the application development process. We use the open source normalize.css as Generic . The code for normalize.css can be found on GitHub.

Continue to create the _normalize.scss file in the packages/scss/base/ directory and copy the contents of normalize.css directly into it.

Base

Base mainly stores some custom reset styles, such as html, body, section, etc. We do not have custom content for this part yet, so there is no need to write it.

Entry file

Finally, all scss in the base layer need to be introduced through a unified entrance. Create index.scss in the packages/scss/base/ directory . This file imports the two scss files created above:

@use "var.module";
@use "normalize";

2.3 Implementation of tools layer

The tools layer is used to store tool functions and mixins. There is an excellent open source project sassMagic on github . We will use it as the tools layer.

Just copy the code in the project's src to the packages/scss/tools/ directory (if there is an error in the _sassMagic.scss file, just delete the introduction of the non-existent file). I rename the _sassMagic.scss file here to index.scss , so that I only need to use @use ".../tools" when using it later .

2.4 Implementation of acss layer

The acss layer is used to define some atomic styles. Here we define the atomic classes of flex layout and margin/padding.

Create the directory acss in packages/scss/ and create two files in this directory: _flex.scss and _mp.scss .

packages/scss/acss/_flex.scss：

.f {
  display: flex;
}
.f-c {
  display: flex;
  flex-direction: column;
}
.f-r {
  display: flex;
  flex-direction: row;
}
.f-1 {
  flex: 1 1 0;
}
.oy-h {
  overflow-y: hidden;
}
.oy-a {
  overflow-y: auto !important;
}
.ox-h {
  overflow-x: hidden;
}
.o-h {
  overflow: hidden;
}

packages/scss/acss/_mp.scss：

$direction: (l left, r right, t top, b bottom);

@for $i from 1 through 30 {
  @each $type in m, p, v, h, a {
    // margin
    @if ($type == m) {
      @each $d in $direction {
        .m#{nth($d, 1)}-#{$i} {
          margin-#{nth($d, 2)}: #{$i}px;
        }
      }
    }
    // padding
    @else if ($type == p) {
      @each $d in $direction {
        .p#{nth($d, 1)}-#{$i} {
          padding-#{nth($d, 2)}: #{$i}px;
        }
      }
    }
    // margin/padding left/right
    @else if ($type == h) {
      .ph-#{$i} {
        padding-left: #{$i}px;
        padding-right: #{$i}px;
      }
      .mh-#{$i} {
        margin-left: #{$i}px;
        margin-right: #{$i}px;
      }
    }
    // margin/padding top/bottom
    @else if ($type == v) {
      .mv-#{$i} {
        margin-top: #{$i}px;
        margin-bottom: #{$i}px;
      }
      .pv-#{$i} {
        padding-top: #{$i}px;
        padding-bottom: #{$i}px;
      }
    }

    // all
    @else {
      .pa-#{$i} {
        padding: #{$i}px;
      }
    }
  }
}

2.5 Implementation of components layer

The components layer corresponds to the style of each specific component in the component library. Create the directory components in packages/scss . First create a style for the foo component created in the previous article : Create the _foo.module.scss file in the packages/scss/components/ directory :

@import "../tools";
@import "../acss/mp";
@import "../base/var.module";

@include b('yyg-foo') {
  color: $primary-color;

  @include e('description') {
    color: #333333;
    @extend .mv-20;
  }
}

Continue to create the index.scss file in the packages/scss/components/ directory , which introduces the scss files of all components in the components directory:

@use "foo.module";

If you add another component, you need to create the style file of the component in the components directory and introduce the scss file in components/index.scss .

2.6 Style entry

Create index.scss under packages/scss and import all scss in it. When using the component library, you only need to import this file.

@import "./acss/flex";
@import "./base";
@import "./components";

3. Introduce styles into the component library

Finally, you only need to introduce scss/index.scss into the component library . Introduce index.scss into the entry module packages/yyg-demo-ui/index.ts of the component library :

import '../scss/index.scss'

(The code above has included this sentence)

At this point, the construction of the component library style architecture is completed. The directory structure of the entire style is as follows:

Insert image description here

Thank you for reading this article. If this article has given you a little help or inspiration, please support it three times in a row, like, follow, and collect. Programmer Elegant Brother will continue to share more useful information with you.