Como desarrollador frontend con casi 15 años de experiencia, he sido testigo de primera mano de la evolución del desarrollo web. Para mí, ha recorrido un largo camino desde los días en que subía archivos modificados a través de FTP (sí, GitHub se lanzó hace 15 años, pero recién lo descubrí en 2011) hasta la era moderna de interfaces receptivas, bibliotecas de UI y sitios web generados directamente desde Figma. Sin embargo, sigo encontrando proyectos que emplean estilos anidados como: .some-class ul li div a { /* some style */ } o, #nav .nav-link svg { /* some style */ } Puede parecer impactante, pero tales prácticas de codificación impregnan todo, desde proyectos multimillonarios y de rápido crecimiento hasta humildes empresas emergentes. Profundicemos en por qué este enfoque puede plantear problemas. El conflicto de los estilos anidados Los estilos profundamente anidados a menudo generan conflictos de estilo, especialmente si tiene un proyecto grande. CSS, como una hoja de estilo en cascada, cae en cascada y se aplica a los elementos según su especificidad. Los estilos profundamente anidados pueden invalidar involuntariamente otros estilos debido a su especificidad. Considere este ejemplo: .some-class ul li div a { color: red; } ... .some-class a { color: blue; } Es de esperar que todos los enlaces en sean azules. Sin embargo, debido a la mayor especificidad de la primera regla, cualquier enlace anidado dentro de un será rojo, no azul. Esto puede generar incoherencias visuales inesperadas y mucho tiempo perdido en la depuración. .some-class ul > li > div La complejidad de la especificidad Comprender el concepto de especificidad (o el "peso" de los estilos) en CSS es crucial para comprender por qué la anidación profunda puede ser problemática. La especificidad determina qué regla CSS se aplica si varias reglas compiten por un solo elemento. Se calcula en función del tipo y la cantidad de selectores. La especificidad se calcula en base a un sistema de ponderación de cuatro categorías: Estilos en línea identificaciones Clases, atributos y pseudoclases Elementos y pseudo-elementos Aquí, considere la regla: body #content .data img:hover { /* some style */ } La especificidad es . Esa es una ID ( ), dos clases ( y ) y dos elementos ( e ). 0 1 2 2 #content .data :hover body img Ahora, considere la regla: #nav .nav-link svg { /* some style */ } La especificidad aquí es . Esa es una ID ( ), una clase ( ) y un elemento ( ). 0 1 1 1 #nav .nav-link svg La especificidad no opera en un sistema de "transferencia" como los números decimales tradicionales. Por ejemplo, un selector con una especificidad de no es igual a una especificidad de aunque en un sistema decimal, y serían equivalentes. 0 1 0 11 0 1 1 1 11 1+1 Finalmente, el selector universal ( ), los combinadores ( , , , ' ') y la pseudoclase de negación ( ) no tienen efecto sobre la especificidad. Sin embargo, dentro del argumento , los selectores se cuentan como de costumbre. * + > ~ :not() :not() Para los estudiantes visuales, recomiendo sobre la especificidad de CSS. este video Comprender la especificidad de CSS y cómo se calcula le permite escribir un CSS mejor y más predecible y depurar problemas cuando los estilos no se aplican como se esperaba. La regla y la especificidad !important A veces, los desarrolladores recurren al uso de la regla cuando enfrentan dificultades con conflictos de especificidad de CSS. Esta regla hace que una propiedad CSS sea extremadamente específica, lo que significa que anulará casi cualquier otra declaración. !important Por ejemplo: #nav .nav-link svg { color: blue; } .nav-link svg { color: red !important; } A pesar de que la primera regla tiene una mayor especificidad debido al selector de ID, el color del sería rojo debido a la de la segunda regla. svg !important Los riesgos del uso excesivo !importante Si bien puede ser una solución rápida cuando se enfrentan problemas de especificidad, no se recomienda su uso extensivo. El uso excesivo puede afectar la capacidad de mantenimiento, la previsibilidad y el rendimiento. En proyectos más grandes, el uso excesivo de a menudo indica una dificultad para administrar la especificidad de CSS. En lugar de recurrir a , a menudo es mejor invertir tiempo en refactorizar su CSS y reducir el uso de selectores demasiado específicos. !important !important !important Puedes consultar tu producto ahora mismo 🙂. He comprobado el mio: Si bien puede ser una solución rápida y tentadora; es como usar un mazo para romper una nuez. Un enfoque más fácil de mantener es mantener sus selectores lo más simples y planos posible, lo que hace que su CSS sea más fácil de entender, administrar y ampliar en el futuro. Y recuerda, la mejor manera de ganar una guerra es no comenzar una en primer lugar. !important !important Atravesando el árbol CSS Otro problema con los estilos profundamente anidados es el impacto en el rendimiento de la representación del navegador. Cuando un navegador aplica estilos a un elemento, atraviesa el DOM de derecha a izquierda, comenzando con el selector de teclas (en nuestros ejemplos, y ) y moviéndose a través de los ancestros hasta que encuentra una coincidencia o llega a la parte superior. Cuanto más anidado sea el estilo, más tiempo llevará este recorrido, lo que podría afectar el rendimiento y ralentizar los tiempos de carga de la página en proyectos a gran escala. a svg Cuando especifica una regla CSS, como: .some-class ul li a { /* some style */ } Puede visualizar esta regla comenzando desde la parte inferior del árbol (desde la etiqueta ) y avanzando hacia arriba a través del árbol (a través de , y ). a li ul .some-class El navegador primero buscará (me refiero a TODOS) elementos a, luego verificará si estas están dentro de los elementos . Después de eso, verificará si estos elementos están dentro y, por último, verificará si estos están dentro de un elemento con la clase de . todos a a li li ul ul .some-class Así es como los navegadores leen los selectores de CSS y la razón por la cual los selectores complejos pueden conducir a una representación de página más lenta. El navegador tiene que realizar varias comprobaciones para cada elemento para ver si se ajusta a la regla especificada. Cuanto más profunda sea la regla, más verificaciones tiene que hacer el navegador, lo que puede afectar el rendimiento. Mejores prácticas para administrar CSS en proyectos más grandes Módulos CSS le permiten escribir CSS en módulos individuales, que tienen un alcance local para el componente en el que está trabajando. Esto significa que los estilos en un módulo CSS solo se aplican a ese módulo específico y no se filtrarán ni afectarán a otros elementos de la página. Los módulos de CSS Exploremos cómo los módulos CSS usan nombres de clase con hash para garantizar la encapsulación de estilo. Cuando usa módulos CSS, los nombres de clase que define en su archivo CSS se codificarán en tiempo de compilación. Este hash crea un nombre de clase único que corresponde a su componente. Echemos un vistazo a un ejemplo: Suponga que tiene un Módulo CSS definido como tal: /* Button.module.css */ .button { color: white; background-color: blue; } Y lo usa en su componente de esta manera (prefiero importar el objeto de estilos como en lugar de , un consejo rápido que ahorra tiempo de escritura y aumenta la eficiencia de la codificación): s styles import React from 'react'; import s from './Button.module.css'; const Button = () => { return ( <button className={s.button}>Click me</button> ); }; export default Button; Cuando se compila su aplicación, su HTML renderizado podría verse así: <button class="Button_button__3FQ9Z">Click me</button> En este caso, es el nombre de clase con hash que se generó a partir de su módulo CSS. Tenga en cuenta que la estructura exacta y la longitud del hash pueden variar según la configuración de su proyecto. Button_button__3FQ9Z Este nombre de clase único garantiza que los estilos que ha definido en solo se aplican a este botón y no afectarán a ningún otro elemento de su aplicación. También garantiza que ningún otro estilo pueda afectar este botón a menos que apunten explícitamente al nombre de la clase con hash. Esta encapsulación de estilos es uno de los principales beneficios de los Módulos CSS. Button.module.css Bibliotecas CSS-in-JS Otra forma popular de manejar CSS es mediante el uso de bibliotecas CSS-in-JS, como o . Estas bibliotecas le permiten escribir su CSS directamente dentro de su JavaScript, lo que tiene varios beneficios: componentes con estilo emoción : de forma similar a los módulos CSS, los estilos tienen como ámbito el componente en el que están definidos. Estilos con ámbito : es fácil crear estilos dinámicos basados en accesorios o estado en su componente. Estilos dinámicos : puede usar la lógica de JavaScript directamente en sus estilos, y todo lo relacionado con un componente se encuentra en un solo lugar, lo que puede hacer que su código sea más fácil de entender y trabajar con él. Experiencia de desarrollador mejorada Aquí hay un ejemplo de cómo puede usar componentes con estilo en una aplicación React: import React from 'react'; import styled from 'styled-components'; const Button = styled.button` color: white; background-color: ${(props) => props.primary ? 'blue' : 'gray'}; `; const App = () => { return ( <div> <Button primary>Primary Button</Button> <Button>Secondary Button</Button> </div> ); }; export default App; En este ejemplo, el componente tiene estilos dinámicos que cambian según su propiedad . Button primary Metodología BEM Si no está trabajando con un marco de JavaScript que admita módulos CSS o similar, aún puede administrar su CSS de manera efectiva utilizando metodologías de nomenclatura como BEM (Bloque, Elemento, Modificador). BEM significa "Modificador de elemento de bloque" y es una metodología que lo ayuda a crear componentes reutilizables y compartir código en CSS. Así es como puede estructurar su CSS usando BEM: /* Block */ .top-menu { } /* Element */ .top-menu__item { } /* Modifier */ .top-menu__item_active { } En BEM, el 'Bloque' es la entidad independiente que es significativa por sí misma, el 'Elemento' es una parte del Bloque que no tiene un significado independiente y está vinculado semánticamente a su Bloque, y el 'Modificador' es una bandera en un bloque o elemento que se utiliza para cambiar la apariencia o el comportamiento. El uso de una metodología consistente como BEM puede hacer que su CSS sea más fácil de entender y mantener, particularmente en proyectos más grandes. En conclusión Hay varias formas de administrar CSS en proyectos más grandes, desde módulos CSS y bibliotecas CSS-in-JS hasta metodologías de nombres como BEM. La clave es encontrar un enfoque que encaje bien con su equipo y proyecto y aplicarlo de manera consistente. Recuerde, escribir CSS se trata tanto de escribir un código que sea eficiente y eficaz como de escribir un código que sea comprensible y mantenible. ¡Feliz codificación!
