CSS: Estrategias para reducir los estilos específicos
Posteado Por CatrianMantener las hojas de estilos con niveles bajos de elementos específicos no es una tarea fácil pero que vale la pena. Cuando lo logramos dejamos espacio para sobrescribir estilos cuando lo necesitamos y evitamos disgustos con nosotros mismo cuando necesitamos hacer un ajuste. Ser muy específicos con los selectores es una práctica que termina por llenar la copa y la saturación y repetición en CSS no son una buena práctica; seguro que todos hemos tenido nuestra buena dosis de dolor de cabeza lidiando con la etiqueta !important y con estilos en línea.
Pero ¿cómo podemos lograr un CSS armonioso y facilmente editable? Acá algunos consejos:
Escriba la clase que necesita
Puede que esté escribiendo un selector específico para sobrescribir otro existente, o que el elemento que va a usar está presente en varias secciones del sitio, entonces lo sobrescribe con otro más específico:
1 2 3 4 5 6 | .encabezado { /* estilos normales */ } body.empresa .encabezado { /* sobrescritos por específicos */ } |
Sea como sea que le resulte, hay que ver que usar una especificación alta en este caso puede no llegar a ser funcional. Para prevenir esto ¿es posible alterar el nombre de la clase directamente en el elemento a la que se lo va a aplicar? Muchas veces una buena solución es usar funciones o variables fuera de CSS para aplicar una u otra clase en el elemento dependiendo de la situación.
1 2 3 4 5 | <header class="<%= clase %>"> Puede mostrar una clase o ambas si es necesario </header> |
1 2 3 4 5 6 7 8 | .encabezado { /* estilos normales */ } .encabezado-empresa { /* sobrescritos por específicos */ /* posibilidad de extender las propiedades de la clase */ } |
Tenga en cuenta el orden de las hojas de estilo.
Bajo la misma línea de «voy a sobrescribir un estilo» puede llegar un momento en que aplique una clase adicional a un elemento:
1 2 3 | <header class="encabezado encabezado-empresa"> </header> |
Pero el CSS en donde escribe las definiciones para .encabezado-empresa está siendo sobrescrito por la clase ya existente (.encabezado). Esto puede suceder por el orden de los selectores en la hoja de estilos, ambos estilos tiene la misa importancia, así que se aplican las reglas del estilo que se haya declarado al final.
Arreglar esto significa que el o los estilos que se declaren de últimos son los que se aplican. Una forma de conseguirlo es organizar la forma en la que se cargan las hojas de estilo:
1 2 3 4 5 6 7 | @import "css-de-terceros"; @import "estilos-globales"; @import "estilos-de-seccion"; @import "estilos-especificos-y-sobrescritos"; |
Elementos fuera de control
¿Cuántas veces no hemos lidiado con estilos de terceros que dañan nuestro sitio o que no se ajustan a nuestra especificación de diseño? Simplemente debemos trabajar con esto y hacer todo lo posible por ajustarlos a nuestras necesidades. Una opción es tener un CSS específico que ajuste los estilos del CSS del tercero, pero ¿qué pasa cuando el tercero hace una inyección de código directamente en el HTML? Podemos usar la etiqueta !important o sobrescribir los estilos del tercero con sentencias jQuery una vez se haya cargado la página. Como último recurso, pida al tercero si puede solucionarlo.
El contenedor de una sola clase
Una manera forzada de manejar la sobrescritura es usar un elemento que contenga a los otros que desea modificar
1 2 3 4 5 | <div class="cambiar"> ... contenido existente ... </div> |
Así, ahora tiene la posibilidad de sobrescribir cualquier estilo existente dentro del contenedor con tan solo adicionar una clase. Puede que no sea «lo mejor», pero mantiene el CSS reducido.
1 2 3 | .cambiar .existente { } |
Solo una vez…
Si está sobrescribiendo algo sobrescrito, es un buen momento para detenerse y reconsiderar la solución.
¿Puede cambiar eso por un elemento de una sola clase? Sobrescribir un elemento puede ser una solución eficiente, como una variación en un patrón en lugar de crear uno nuevo. Sobrescribir algo sobrescrito es la receta para el desastre y la confusión.
En definitiva, sobrescribir elementos de CSS puede ser una buena práctica, siempre y cuando se mantenga al mínimo y, ahora que sabemos de qué se trata y lo que puede llegar a hacer en un proyecto, lo mejor es que, para la siguiente oportunidad, tenga una aproximación mucho más práctica y organizada de su CSS.
