En esta guía frontend están recogidos los patrones de interfaz más habituales, pero lo normal es que en futuros desarrollos se deban desarrollar nuevos o crear estilos específicos para interfaces concretas. Con la idea de mantener la uniformidad, se detallan aquí las reglas de nomenclatura de clases.
Los nombres de las clases se escriben en inglés, sin mayúsculas. El guión medio - se emplea para la separación de palabras, el guión medio doble -- como clase modificadora, y el guión bajo doble __ para indicar descendiente de un bloque.
Las clases de retícula tienen una nomenclatura propia, con el prefijo .col-, y los sufijos que marcan el punto de corte y el número de columnas. Se puede ver en detalle en la sección de retícula.
.col-xs-6{}
.col-md-4{}
.col-xl-3{}
Los nombres de clases de bloques y elementos independientes se escriben en minúsculas y solo con guión medio -, si fuera necesario partir palabras.
.topbar{}
.secondary-nav{}
Cuando una clase se crea para modificar una anterior, y se escribe junto a la primera (por ejemplo, una variante de color en un botón), se escribe con el nombre de la clase a modificar, doble guion medio -- y el nombre del modificador.
.btn--highlight{}
.icon--caret-down{}
Las clases que se refieren a elementos que no se conciben sin un bloque contenedor (como por ejemplo, un elemento de navegación dentro del bloque de navegación) pueden escribirse con el nombre del bloque contenedor, doble guion bajo y el nombre del elemento. Para elementos de más de 1 nivel de dependencia, se pueden omitir los niveles intermedios y hacer referencia al bloque principal solamente.
.navigation__link{}
.modal__header{}
Las clases con prefijo .is- implican un cambio de estado, y a menudo se utilizan en conjunción con JavaScript. Por ejemplo, un elemento que está abierto, desplegado o activo.
.is-open{}
.is-active{}
.is-modal-open{}
Las clases que solo tienen sentido para una función JavaScript (y que se añaden también mediante JavaScript) se pueden escribir con el prefijo .js-.
.js-open{}
.js-trigger{}
.js-link{}