Existen muchas metodologías CSS y las odio a todas. Algunos más (viento de cola y otros) y otros menos (BEM, OOCSS, etc.). Pero al final del día, todos tienen defectos.

La gente utiliza estos enfoques por buenas razones, por supuesto, y muchos de los problemas abordados son los que yo también he encontrado. Entonces, en esta publicación, me gustaría escribir mis propias pautas sobre cómo mantengo CSS organizado.

Esta no es una metodología CSS completamente descrita que cualquiera pueda comenzar a usar. Tal vez podría convertirse en uno con algo de trabajo adicional, pero el propósito de esta publicación es simplemente mostrar cómo tomo estas decisiones al escribir CSS.

Elementos incorporados

Como regla general, trato de utilizar tipos de elementos integrados tanto como sea posible y con la menor cantidad de tonterías posibles.

Tener la necesidad de mil tipos diferentes de botones es una señal de que podría haber algún problema con el diseño en un nivel más profundo, por lo que, aunque en algunos casos tengo el atractivo de que CSS sea inerte hasta que se utilicen clases específicas del marco , en la mayoría de los casos lo veo ideal cuando un botón es simplemente ¡Haz clic en mí! y parece un botón sin más magia.

div.btton debería convertirse en botón

Elementos personalizados

No todos los elementos de diseño tienen un equivalente HTML semánticamente adecuado y, para estos casos, suelo recurrir a elementos personalizados.

No he visto muchos casos de nombres de elementos personalizados utilizados sin ningún javascript adjunto, pero ha demostrado ser una opción sorprendentemente sólida para escribir HTML claro que también se ve como quiero.

Es más probable que, con el tiempo, los elementos completamente separados en términos de diseño desarrollen requisitos que solo se pueden implementar con JavaScript, lo que le deja con un camino claro para implementar aquellos que no necesitan ningún cambio en el HTML ni el CSS.

div.vsep debería convertirse en separador vertical

Clases

Las clases deberían funcionar como modificadores del nombre del nodo existente, en lugar de tipos de elementos completamente nuevos, y a menudo tienen efectos similares pero diferentes en diferentes tipos de elementos.

Un botón peligroso es un botón.peligro

Atributos

Algunas formas de modificar elementos no son simples interruptores de encendido/apagado para los que las clases son útiles, sino que se comportan más como pares clave-valor.

En estos casos, los atributos personalizados con selectores coincidentes han demostrado ser la mejor opción casi siempre que los he usado. A diferencia de las clases con guiones, muestran a nivel de sintaxis cuál es el atributo y cuál es el valor, lo que facilita a los editores resaltarlos, al ojo humano analizarlos rápidamente y facilitar la interfaz mediante JavaScript.

Para aquellos de nosotros que todavía tenemos la esperanza de que la función attr() algún día pueda llegar a CSS para algo más que contenido, esto también es una capa adicional de preparación para el futuro.

identificaciones

Los ID son, por definición, únicos dentro del documento. Como tal, cualquier regla dirigida a un ID en particular será limitada y puede requerir refactorización si luego resulta que, después de todo, debería haber más de un elemento de este tipo en la página.

Como tal, los ID deben usarse con moderación y solo cuando no tenga sentido tener más de un elemento en un documento.

Los beneficios sobre las clases, tanto en un sentido práctico como de legibilidad, son bastante pequeños, por lo que pecar del lado de las clases suele ser la mejor idea cuando no se puede identificar una relación clara de 1 a 1 entre el elemento y el estilo.

CSS en línea

Cualquier aplicación del mundo real tendrá en algún momento elementos que simplemente requerirán ajustes individuales para hacerlos más agradables estéticamente en el contexto en el que aparecen.

En estos casos, el atributo de estilo es el camino a seguir. Cualquier motivo por el cual su uso se considere una mala práctica se aplica a cualquier tipo de estilo en línea, incluidas las clases de utilidad. El problema no es el atributo, sino mezclar estilo y marcado.

La única diferencia entre estilo y clase para estilos integrados es que uno indica propósito, permite usar CSS simple y es mayoritariamente universal, mientras que el otro no lo es.

En pocas palabras, ancho: 100px tiene un significado definido universalmente, mientras que .width-100 podría significar cualquier cosa.

Clases de utilidad

En muy raras ocasiones, los estilos de elementos específicos se vuelven tan complejos que incluirlos explícitamente perjudicaría la legibilidad o incluso sería imposible (por ejemplo, si requiere consultas de medios).

En estos casos, las clases de utilidad son básicamente la única opción, incluso si son feas.

En un mundo ideal, estos podrían manejarse por separado de las clases de mixin específicas, e incluso he considerado usar prefijos para diferenciarlos más fácilmente, pero finalmente no he encontrado una buena manera de hacer que no sean feos.

Me gusta la idea de anteponer a las clases de utilidad un prefijo para representar que agregan algún tipo de funcionalidad al elemento, en contraste con las clases normales, que especifican qué tipo de elemento es.

Botón flotante rojo

Y eso fue todo. Por supuesto, no hay dos proyectos iguales y, a veces, las reglas deben modificarse un poco para que sigan siendo prácticas, pero en general, ese es mi marco para decidir cómo hacer que algo en la pantalla se vea de cierta manera.

¿Qué piensas? ¿Lo odias? ¿Crees que tiene sentido? ¿Déjamelo saber en un comentario?