Esta serie de artículos se ha actualizado:
Comparta una práctica herramienta de andamiaje de biblioteca de componentes vite + vue3 para mejorar la eficiencia del desarrollo
Andamiaje yyg-cli listo para usar: cree rápidamente una biblioteca de componentes vue3 y un proyecto de depósito de la familia vue3
Elegancia de nivel empresarial de Vue3 en la práctica - marco de biblioteca de componentes - 1 Cree
la elegancia de nivel empresarial pnpm monorepo Vue3 en la práctica - marco de biblioteca de componentes - 2 Inicialice la
elegancia de nivel empresarial de Vue3 raíz del espacio de trabajo en la práctica - marco de biblioteca de componentes - 3 Cree un entorno de desarrollo de biblioteca de componentes
En el artículo anterior, compartí el entorno de desarrollo básico para construir una biblioteca de componentes y creé el módulo de componente foo y el módulo de entrada de la biblioteca de componentes. Este artículo comparte el diseño de arquitectura de estilo de la biblioteca de componentes.
1 patrones arquitectónicos CSS comunes
Hay muchos patrones de arquitectura CSS comunes: OOCSS , ACSS , BEM , SMACSS , ITCSS , etc. Entre ellos, SMACSS e ITCSS son muy similares. Lo que uso con más frecuencia en proyectos de nivel empresarial es la versión simplificada de ITCSS + BEM + ACSS , por lo que este artículo presenta primero estos tres modos, y los otros modos los puedes comprobar en línea por ti mismo.
1.1 ACSS
El modo ACSS es casi un atributo de estilo correspondiente a una clase de estilo. Este método es muy flexible, altamente reutilizable y de bajo costo de mantenimiento, pero destruye la semántica de los nombres CSS. Los nombres comunes incluyen: d-flex, m-10, w-20, etc.
1.2 BIEN
El patrón BEM es una metodología de nomenclatura y su jerarquía de nomenclatura es: bloque B bloqueo , elemento Elemento , modificador Modificador , que también es el origen del nombre "BEM". El elemento Elemento usa dos guiones bajos cortos (__) y el modificador Modificador usa dos guiones cortos (–), como el siguiente fragmento HTML y el nombre de clase correspondiente:
<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>
El uso de BEM puede estandarizar comandos y aclarar la estructura de la página.
1.3 TICSS
ITCSS es una estructura jerárquica de estilo con siete niveles en total, los siete niveles de arriba a abajo son:
- Capa de configuración: generalmente algunas variables de estilo, como valores que definen valores de color comunes, tamaños de fuente, etc.;
- Capa de herramientas: funciones de herramientas generales, incluidos mixins, funciones, etc.;
- Capa genérica: estilo básico general, generalmente para restablecer el estilo predeterminado del navegador, como normalize.css, restablecimientos y otras bibliotecas;
- Capa base: realice estilos personalizados comunes para algunos elementos utilizados globalmente, como configuraciones de página, configuraciones de etiquetas ul, etc.;
- Capa de objetos: todos los lugares donde se usa OOCSS, es decir, clases especiales separadas por ciertas estructuras y estilos;
- Capa de componentes: los componentes específicos pueden corresponder a cada componente en la biblioteca de componentes;
- Capa Trumps: reescribir algunos estilos, como restablecer el ancho a 100 px, solo afectará un área pequeña determinada de elementos DOM, con el peso más alto, similar a ACSS, pero generalmente con !importante agregado .
2 arquitectura CSS de la biblioteca de componentes
Las capas ITCSS son muy detalladas y el estilo de nuestra biblioteca de componentes se simplifica en función de ellas, omitiendo la capa Base o la capa Objetos. Para la capa Trumps, usamos ACSS en su lugar. Para la capa Componentes, cada componente usa BEM internamente. Por tanto, la arquitectura de estilo de nuestra biblioteca de componentes es: versión simplificada de ITCSS + BEM + ACSS.
2.1 Descripción general de la estructura CSS
El estilo de la biblioteca de componentes utiliza el preprocesador SCSS y, desde la estructura general, se divide en los siguientes niveles:
- Capa base : El nivel más básico de toda la estructura CSS, correspondiente a los Ajustes, Genérico y Base de ITCSS . Eso incluye definiciones de variables, estilos básicos comunes y estilos básicos personalizados.
- Capa de herramientas : al igual que las herramientas ITCSS , proporciona funciones generales de herramientas.
- Capa acss : similar a Trumps de ITCSS , define algunas clases de estilo atómico, como clases base de estilo relacionadas con flex, margen y relleno.
- Capa de componentes : al igual que los componentes de ITCSS, implementa los estilos de cada componente, y los estilos de cada componente se organizan y nombran utilizando el método BEM .
2.2 Implementación de la capa base
Como se mencionó anteriormente, la capa base incluye definiciones de variables de estilo, estilos básicos comunes y estilos básicos personalizados.
Primero, cree un directorio base en el directorio paquetes/scss para almacenar los archivos scss de la capa base.
- ajustes
La configuración es la definición de algunas variables. Cree el archivo _var.module.scss en el directorio paquetes/scss/base/ , que define las variables de estilo.
$primary-color: #488019;
$common-padding: 20px;
:export {
primaryColor: $primary-color;
}
- Genérico
Genérico suele ser un restablecimiento de los estilos del navegador, unificando la visualización de etiquetas HTML en diferentes navegadores y protegiendo las diferencias entre navegadores. En esta parte, puede utilizar las bibliotecas de código abierto normalize.css , reset.css , etc. Esta capa se puede omitir en la biblioteca de componentes y se puede introducir el CSS correspondiente en cada aplicación específica. Sin embargo, el programador Elegant Brother aún introdujo el restablecimiento del estilo del navegador en la biblioteca de componentes, lo que ahorra problemas en el proceso de desarrollo de la aplicación. Usamos el código abierto normalize.css como genérico . El código para normalize.css se puede encontrar en GitHub.
Continúe creando el archivo _normalize.scss en el directorio paquetes/scss/base/ y copie el contenido de normalize.css directamente en él.
- Base
Base almacena principalmente algunos estilos de restablecimiento personalizados, como html, cuerpo, sección, etc. Aún no tenemos contenido personalizado para esta parte, por lo que no es necesario escribirlo.
- Archivo de entrada
Finalmente, todos los scss de la capa base deben introducirse a través de una entrada unificada. Cree index.scss en el directorio paquetes/scss/base/ . Este archivo importa los dos archivos scss creados anteriormente:
@use "var.module";
@use "normalize";
2.3 Implementación de la capa de herramientas.
La capa de herramientas se usa para almacenar funciones de herramientas y mixins. Hay un excelente proyecto de código abierto sassMagic en github . Lo usaremos como capa de herramientas.
Simplemente copie el código en el src del proyecto al directorio paquetes/scss/tools/ (si hay un error en el archivo _sassMagic.scss, simplemente elimine la introducción del archivo inexistente). Cambio el nombre del archivo _sassMagic.scss aquí a index.scss , de modo que solo necesite usar @use ".../tools" cuando lo use más adelante .
2.4 Implementación de la capa acss
La capa acss se utiliza para definir algunos estilos atómicos, aquí definimos las clases atómicas de diseño flexible y margen/relleno.
Cree el directorio acss en paquetes/scss/ y cree dos archivos en este directorio: _flex.scss y _mp.scss .
paquetes/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;
}
paquetes/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 Implementación de la capa de componentes.
La capa de componentes corresponde al estilo de cada componente específico en la biblioteca de componentes. Cree los componentes del directorio en paquetes/scss . Primero cree un estilo para el componente foo creado en el artículo anterior : cree el archivo _foo.module.scss en el directorio paquetes/scss/components/ :
@import "../tools";
@import "../acss/mp";
@import "../base/var.module";
@include b('yyg-foo') {
color: $primary-color;
@include e('description') {
color: #333333;
@extend .mv-20;
}
}
Continúe creando el archivo index.scss en el directorio packages/scss/components/ , que presenta los archivos scss de todos los componentes en el directorio de componentes :
@use "foo.module";
Si agrega otro componente, debe crear el archivo de estilo del componente en el directorio de componentes e introducir el archivo scss en componentes/index.scss .
2.6 Entrada de estilo
Cree index.scss en paquetes/scss e importe todos los scss que contiene. Cuando utilice la biblioteca de componentes, solo necesita importar este archivo.
@import "./acss/flex";
@import "./base";
@import "./components";
3. Introduzca estilos en la biblioteca de componentes.
Finalmente, solo necesita introducir scss/index.scss en la biblioteca de componentes . Introduzca index.scss en el módulo de entrada packages/yyg-demo-ui/index.ts de la biblioteca de componentes :
import '../scss/index.scss'
(El código anterior ha incluido esta oración)
En este punto, se completa la construcción de la arquitectura de estilo de la biblioteca de componentes. La estructura de directorios de todo el estilo es la siguiente:
Gracias por leer este artículo. Si este artículo le ha brindado un poco de ayuda o inspiración, apóyelo tres veces seguidas, dé me gusta, síganos y recopile. El programador Elegant Brother continuará compartiendo más información útil con usted.