BEM (Block Element Modifier) ​​es una convención de nomenclatura de clases CSS ampliamente adoptada y diseñada para simplificar el mantenimiento de hojas de estilo en cascada. Reconocido por su eficacia en la organización del código y la promoción de la reutilización, BEM desempeña un papel crucial en la mejora de la claridad y la estructura de CSS. En la siguiente discusión, asumimos una comprensión fundamental de la convención de nomenclatura BEM, dirigiendo nuestro enfoque hacia refinar su sintaxis y abordar desafíos potenciales. A medida que profundizamos en los matices de BEM, presentamos un enfoque alternativo, ABEM (Atomic Block Element Modifier), que busca superar ciertas limitaciones y al mismo tiempo alinearse con los principios del Diseño Atómico. La sintaxis estándar de BEM es: “nombre-bloque__nombre-elemento–nombre-modificador”. Dividir los estilos en componentes pequeños facilita el mantenimiento en comparación con lidiar con una alta especificidad dispersa en la hoja de estilo. Sin embargo, la sintaxis plantea desafíos en la producción y puede causar confusión a los desarrolladores. Este artículo presenta una versión refinada de la sintaxis denominada ABEM (Modificador de elemento de bloque atómico): un prefijo de diseño atómico A/m/o es un prefijo de diseño atómico. No debe confundirse con Atomic CSS, que es algo completamente diferente. El diseño atómico es una metodología para organizar los componentes que maximizan la capacidad de reutilizar código. Divide los componentes en tres carpetas: átomos, moléculas y organismos. Los átomos son componentes súper simples que generalmente constan de un solo elemento (por ejemplo, un componente de botón). Las moléculas son pequeños grupos de elementos y/o componentes (p. ej., un campo de forma única que muestra una etiqueta y un campo de entrada). Los organismos son grandes componentes complejos formados por muchos componentes moleculares y atómicos (p. ej., un formulario de registro completo). La dificultad de utilizar el diseño atómico con BEM clásico es que no hay ningún indicador que indique qué tipo de componente es un bloque. Esto puede dificultar saber dónde está el código de ese componente, ya que es posible que tengas que buscar en 3 carpetas separadas para encontrarlo. Agregar el prefijo atómico al inicio hace que sea inmediatamente obvio en qué carpeta está almacenado el componente. camelCase Classic BEM separa cada palabra individual dentro de una sección con un solo guión. Observe que el prefijo atómico en el ejemplo anterior también está separado del resto del nombre de la clase por un guión. Mire lo que sucede ahora cuando agregamos un prefijo atómico a BEM classic vs camelCase: De un vistazo, el nombre del componente al leer el método clásico parece que se llama «o subscribe form». El significado de la “o” se pierde por completo. Sin embargo, cuando aplica la “o-” a la versión camelCase, queda claro que se escribió intencionalmente para ser una información separada del nombre del componente. Ahora podría aplicar el prefijo atómico al BEM clásico poniendo la “o” en mayúscula de esta manera: Eso resolvería el problema de que la “o” se pierda entre el resto del nombre de la clase, sin embargo, no resuelve el problema subyacente central en el sintaxis BEM clásica. Al separar las palabras con guiones, el carácter del guión ya no está disponible para que lo utilicemos como mecanismo de agrupación. Al usar camelCase, nos liberamos para usar el carácter de guión para agrupaciones adicionales, incluso si esa agrupación es solo agregar un número al final del nombre de una clase. camelCase también tiene el beneficio adicional de hacer que la agrupación de nombres de clases sea más fácil de procesar. Con camelCase, cada espacio que vemos en el nombre de la clase representa una agrupación de algún tipo. En BEM clásico, cada espacio podría ser una agrupación o un espacio entre dos palabras del mismo grupo. Mire esta silueta de una clase BEM clásica (más el prefijo atómico) e intente descubrir dónde comienzan y terminan las secciones de prefijo, bloque, elemento y modificador: Ok, ahora intente con esta. Es exactamente la misma clase que la anterior, excepto que esta vez usa camelCase para separar cada palabra en lugar de guiones: esas siluetas son lo que tu mente ve cuando escanea tu código. Tener todos esos guiones adicionales en el nombre de la clase hace que las agrupaciones sean mucho menos claras. A medida que lees tu código, tu cerebro intenta procesar si los espacios que encuentra son nuevas agrupaciones o simplemente palabras nuevas. Esta falta de claridad hace que la carga cognitiva pese en tu mente mientras trabajas. Uso de selectores multiclase (responsablemente) Una de las reglas de oro en BEM es que se supone que cada selector solo debe contener una única clase. La idea es que mantiene CSS mantenible manteniendo la especificidad de los selectores baja y manejable. Por un lado, es preferible una especificidad baja a una especificidad desenfrenada. Por otro lado, una regla estricta de una clase por selector es lo mejor para los proyectos. El uso de algunos selectores de clases múltiples en nuestros estilos puede mejorar la mantenibilidad en lugar de disminuirla. Tener algunas declaraciones de especificidad más altas no significa instantáneamente que nuestro CSS sea más difícil de mantener. Si se usa de la manera correcta, darle a ciertas reglas una mayor especificidad puede hacer que CSS sea más fácil de mantener. La clave para escribir CSS mantenible con especificidad desigual es agregar especificidad a propósito y no solo porque un elemento de la lista esté dentro de un elemento de la lista. Separar el modificador conduce a un HTML más limpio. Este es el mayor cambio en la sintaxis que introduce ABEM. En lugar de conectar el modificador a la clase de elemento, lo aplica como una clase separada. Una de las cosas de las que prácticamente todo el mundo se queja cuando empieza a aprender BEM es de lo feo que es. Es especialmente malo cuando se trata de modificadores. Eche un vistazo a esta atrocidad, solo se le han aplicado tres modificadores y, sin embargo, parece un choque de trenes: la repetición dificulta la lectura de lo que está tratando de hacer. Ahora mire este ejemplo de ABEM que tiene los mismos modificadores que el ejemplo anterior: es mucho más limpio. Es mucho más fácil ver lo que esas clases de modificadores intentan decir sin que toda esa basura repetitiva se interponga en el camino. Al inspeccionar un elemento con DevTools del navegador, aún ve la regla completa en el panel de estilo, por lo que conserva la conexión con el componente original de esa manera: no es muy diferente al equivalente BEM. Resumen de la técnica del modificador ABEM Entonces, para hacer el mejor uso del modificador ABEM, use la sintaxis .-modifierName & o &.-modifierName de forma predeterminada (depende de qué elemento tenga la clase). Utilice la orientación directa si anidar un componente dentro de sí mismo está causando un problema. Utilice el nombre del componente en el modificador si se encuentra con colisiones de nombres de modificadores compartidos. Haga esto solo si no puede pensar en un nombre de modificador diferente que aún tenga sentido. Resumiendo La metodología detrás de la convención de nomenclatura BEM es que permite dividir CSS en pequeños componentes fácilmente manejables en lugar de dejar CSS en un lío difícil de manejar de alta especificidad que es difícil de mantener. Sin embargo, la sintaxis oficial de BEM tiene mucho que desear. La sintaxis oficial de BEM: .list-unique-class-41 ul{ list-style-type: ; } .list-unique-class-41 ul li{ color: ; } No es compatible con el diseño atómico. No se puede ampliar fácilmente. A su mente le toma más tiempo procesar la agrupación de los nombres de las clases. Es terriblemente incompetente cuando se trata de gestionar el estado de componentes grandes. Intenta animarle a utilizar selectores de clase única cuando los selectores de clase doble facilitan el mantenimiento. Intenta poner espacios en todo, incluso cuando el ritmo de los nombres causa más problemas de los que resuelve. Hace que HTML esté extremadamente inflado cuando se hace correctamente. Enfoque ABEM: .list-unique-class-99 ul{ list-style-type:; } .list-unique-class-99 ul li{ color: ; } Facilita el trabajo con Atomic Design. Libera el carácter de guión como método adicional que se puede utilizar para agrupar. Le permite a su mente procesar la agrupación de los nombres de las clases más rápido. Es excelente para manejar el estado de componentes de cualquier tamaño, sin importar cuántos subcomponentes tenga. Fomenta la especificidad controlada en lugar de simplemente una especificidad completamente baja para mitigar la confusión del equipo y mejorar la mantenibilidad del sitio. Evita el espacio entre nombres cuando no es necesario. Mantiene HTML bastante limpio con un mínimo de clases adicionales aplicadas a los módulos y al mismo tiempo conserva todas las ventajas de BEM. La publicación ABEM: una guía completa para mejorar la capacidad de mantenimiento de CSS apareció por primera vez en Experion Technologies: servicios de ingeniería de productos de software.

Source link