SMACSS de especificación CSS

1. Introducción

SMACSS es un patrón de diseño de CSS, que se puede leer como [S MA CSS] Smart CSS, nombre completo: Arquitectura modular y escalable para CSS, traducido como: Arquitectura modular y escalable de CSS.
Como sugiere el nombre, es un CSS modular, estructurado y extensible . Su significado es estandarizar un método de desarrollo CSS unificado, lo cual es conveniente para que los desarrolladores mantengan el código CSS.
Primero pegue el sitio web oficial: http://smacss.com/

2. Clasificación de estilo

El núcleo de SMACSS es clasificar y dividir los estilos del proyecto en cinco categorías:

2.1 Base

Formateo de estilos de elementos CSS como reset.css, normailze.css. Se recomienda utilizar normailze.css como base y agregarlo según la situación real.

2.2 Diseño (diseño)

El CSS utilizado para el diseño solo es responsable del diseño y no se preocupa por el contenido interno. Por ejemplo, el diseño de la página de detalles de noticias es similar, pero el estilo del contenido puede ser diferente.

2.3 Módulo (módulo)

Reglas CSS modulares y reutilizables que se pueden usar como componentes, como menús, cuadros emergentes, listas, etc.

2.4 Estado

Se usa para describir el estado del diseño y el módulo, ¿está oculto o expandido? activo o inactivo?

2.5 Tema

Se refiere a los estilos de Diseño y Módulo.

3. Convención de nomenclatura

3.1 Base

Se utiliza para restablecer el estilo de la página web, generalmente utilizando selectores como elementos, atributos, pseudoclases, hijos, hermanos, etc. No debe ser: clase, ID, !importante, etc. como:

html,body{
    margin:0;
    padding:0
}
a{
    color:#333;
}

3.2 Diseño

Generalmente use l- o layout- como prefijo. El diseño se divide en diseño grande y diseño pequeño. Encabezado, pie de página, barra lateral, etc. son diseños grandes y hay diseños pequeños como cuadrícula. En general, solo hay un diseño grande, como el encabezado, solo use el selector de ID. Teniendo en cuenta la reutilización de diseños pequeños, se recomienda usar class. como:

.l-grid{ }

3.3 Módulo

Como el CSS más importante, no se necesita ningún prefijo, solo use el nombre del propio módulo semántico.

.callout{ }
.field{ }

3.4 Estado

Generalmente se usa is- como prefijo, como por ejemplo:

.callout .is-collapsed{ }

3.5 Tema

Defina estilos comunes, elementos que se repiten en los proyectos, como reglas para colores, formas, bordes, sombras, etc. como:

.button-large {
    width: 60px;
    height: 60px;
}

Se han registrado SMASS y BEM, el próximo artículo registrará OOCSS