Buenas Prácticas para CSS en Drupal 8

1. Evite confiar en la estructura HTML

• CSS debe definir la apariencia de un elemento en cualquier lugar y en cualquier lugar donde aparezca.
 
• Usa las clases para asignar apariencia al marcado. Nunca use los selectores de id en CSS.
 
• Mantenga los selectores cortos. El mejor selector es una sola clase o elemento!
 
• Algunas veces los selectores múltiples son pragmáticos. Por ejemplo:

/**
  * Add a horizontal rule between adjacent list rows
  *
  * Could be part of an implementation of the Pears “slats” component:
  * http://pea.rs/content/slats-html5 
  */
.slat + .slat {
  border-top: 1px solid #cccccc;
}

Sin embargo, se debe tener mucho cuidado al utilizar selectores de múltiples partes:

1. Evite los elementos sin semántica nativa (div, span) en los selectores de varias partes.
2. Evite el selector descendente (por ejemplo, .my-list li) siempre que sea posible, especialmente para componentes que puedan envolver otros componentes. El selector de descendencia tiene el hábito de afectar involuntariamente a los elementos anidados. Prefiere el selector de niños: .my-list li
3. Evita más de 2 combinadores en un selector. La siguiente regla está al máximo: .my-list li a
4. En caso de duda, agregue una clase y el estilo del elemento directamente.

2.Definir elementos como componentes usando sus propias clases.

Para evitar confiar en la estructura de marcado y los nombres de clase excesivamente genéricos, defina explícitamente el elemento de un componente, prefijándolos con el nombre del componente seguido de dos guiones bajos:

.component {}

/* Component elements */
.component__header {}
.component__body {} 

3. Extender los componentes utilizando clases modificadoras.

Cree variantes de componentes explícitamente, agregando un sufijo con el nombre de la variante precedido por dos guiones. Para mantener la hoja de estilo DRY, esta clase de modificador solo debe contener los estilos necesarios para extender el original. Esto significa que tanto las clases base como las modificadoras deben aparecer juntas en el marcado:

CSS

HTML

4. Componentes separados

Los componentes no deben ser responsables de su posicionamiento o diseño dentro del sitio. Nunca aplique anchos o alturas, excepto los elementos que tienen estas propiedades de forma nativa (por ejemplo, las imágenes tienen estas propiedades, por lo que está bien usar CSS para modificar su ancho y alto). Dentro de los componentes, separar las reglas estructurales de las reglas estilísticas. Los componentes no deben ser responsables de su posicionamiento o diseño dentro del sitio. Nunca aplique anchos o alturas, excepto los elementos que tienen estas propiedades de forma nativa (por ejemplo, las imágenes tienen estas propiedades, por lo que está bien usar CSS para modificar su ancho y alto). Dentro de los componentes, separar las reglas estructurales de las reglas estilísticas. Enviar comentarios Historial Guardadas Comunidad

Separe el estilo del comportamiento utilizando clases dedicadas para la manipulación de JavaScript en lugar de confiar en las clases que ya están en uso para CSS. De esta manera, podemos modificar las clases por motivos de estilo sin temor a romper JS, y viceversa. Para dejar clara la distinción, las clases utilizadas para la manipulación de JavaScript deben tener el prefijo 'js-'. Estos ganchos de JavaScript nunca se deben utilizar para fines de estilo. Consulte la sección "Formato de nombres de clase" para obtener más información sobre las convenciones de nomenclatura.

Evite aplicar estilos en línea usando JavaScript. Si el comportamiento describe un cambio de estado, aplique un nombre de clase que describa el estado (por ejemplo, 'is-active') y permita que CSS proporcione la apariencia. Utilice únicamente estilos en línea aplicados a través de JavaScript cuando el valor de los atributos de estilo se debe calcular en tiempo de ejecución.

Drupal 8 usa el sistema SMACSS para categorizar conceptualmente las reglas CSS. Tenga en cuenta que se ha cambiado alguna nomenclatura de SMACSS para evitar confusiones con la terminología existente de Drupal.

1. Base

   Las reglas básicas consisten en estilos de elementos HTML únicamente, como los utilizados en un restablecimiento de CSS o Normalize.css. Las reglas básicas nunca deben incluir selectores de clase. Para evitar "deshacer" los estilos en los componentes, los estilos base deben reflejar la apariencia más simple posible de cada elemento. Por ejemplo, el uso más simple del elemento ul puede ser completamente sin estilo, eliminando los marcadores de lista y las sangrías y confiando en una clase de componente para otras aplicaciones.
 

2. Layout

   Disposición de los elementos en la página, incluidos los sistemas de cuadrícula. Los sistemas de rejilla deben considerarse estantes. Contienen contenido pero no son contenido en sí mismos. Usted coloca sus estantes y luego los llena con sus cosas [es decir, componentes]. - Harry Roberts, Directrices CSS
 

3. Componentes (SMACSS)

   Elementos reutilizables, discretos de la interfaz de usuario; Los componentes deben formar la mayor parte del CSS de Drupal.
 

4. State

   Estilos que tratan con cambios transitorios en la apariencia de un componente. A menudo, estos son cambios del lado del cliente que se producen cuando el usuario interactúa con la página, como deslizar los enlaces o abrir un diálogo modal. En algunos casos, los estados son estáticos durante la vida útil de la página y se configuran desde el servidor, como el elemento activo en la navegación principal. Las principales formas de estilo de estado son:
 

- Clases personalizadas, a menudo pero no siempre aplicadas a través de JavaScript. Estos deben tener el prefijo .is-, por ej. .is-transiction, .is-open;

- pseudo-clases, tales como: hover y: checked

- Atributos HTML con semántica de estado, como detalles

- Media-Query: estilos que alteran la apariencia en función del entorno del navegador inmediato.

 

5. Theme

   Estilo puramente visual, como borde, cuadro-sombra, colores y fondos, propiedades de fuente, etc. Idealmente, estos deberían estar lo suficientemente separados de la estructura de un componente para que sean "intercambiables", y omitirlos por completo no debería romper la funcionalidad o los componentes básicos del componente. usabilidad
 

5. Nombre componentes usando semántica de diseño

Si bien la especificación HTML5 menciona que los nombres de clase deben "describir la naturaleza del contenido", no hay razón para esto. Los elementos HTML ya imparten semántica sobre el contenido y las máquinas no pueden derivar semántica a nivel de contenido a partir de nombres de clase.

Los nombres de clase utilizados como enganches de CSS deben reflejar la semántica de diseño sobre la semántica de contenido. En general, deben reflejar la intención y el propósito del elemento de diseño que representan

Tenga en cuenta que esto no excluye los nombres de clase de presentación. Las clases del sistema de cuadrícula como .grid-3, las clases de utilidad como .leader y .trailer (para agregar espacios en blanco basados en una cuadrícula de línea de base) y .text-center son ejemplos de clases de presentación que representan semántica visual. Son significativos para los desarrolladores y altamente reutilizables.

Esto no significa volver a clases como .blue-box. Obviamente, este es un mal nombre de clase, ya que no refleja el significado visual, solo un atributo muy superficial. Es útil preguntar "¿por qué es esto una caja y por qué azul?". Pensando en esto, podríamos darnos cuenta de que este cuadro es en realidad una versión del estilo utilizado en todo nuestro sitio para las notificaciones, y este tono particular de azul se usa para notificaciones no urgentes:

6. Formato de nombres de clase

Los nombres de las clases deben usar palabras completas en lugar de abreviaturas. Los estilos para un componente de botón deben usar, por ejemplo, class = "button" en lugar de class = "btn"

Los nombres de clase para los componentes siempre deben usar un guión entre palabras. Use class = "button-group" en lugar de class = "buttongroup"

The HTML class attribute has been made to do a lot. Drupal uses a naming convention to make clear what a particular class is for and what other parts of the system it affects: