Los marcos CSS son conocidos por llevar a un club a la idea del HTML semántico. Este es un problema tan grave que los desarrolladores de todo el mundo han renunciado por completo a la idea de los marcos basados en cuadrículas únicamente sobre el principio de que conduce a nombres de clase no semánticos.
Con Sass, resulta bastante fácil solucionar este problema y usar una cuadrícula predefinida sin tener que recurrir a nombres de clase maliciosos. De hecho, la última versión de Sass (3.2) tiene una nueva característica que hace que esta tarea sea más fácil que nunca. Sigue leyendo para ver qué es y cómo funciona.
El problema
Personalmente, me encanta configurar y usar grillas en CSS. Soy un tipo nerd analítico, así que el diseño y todo esto si sus complejidades (las molestias) son, literalmente, mi cosa favorita de CSS.
Sin embargo, debo admitir que veo totalmente su punto de vista si ha abandonado las redes. Aquí hay un ejemplo del problema, como lo ilustra la cuadrícula de inicio de Twitter:
Lo ideal es que los nombres de sus clases se limiten a algo que le diga algo sobre el flujo de la página. Usted podría tener un? Destacado? sección o tal vez un? copyright? clase. Estos nombres de clase te dicen para qué sirven pero no son tan específicos que describen la naturaleza de cómo se estiliza el elemento. Usando este método, la estética del diseño podría cambiar completamente con un rediseño, pero los nombres de las clases podrían permanecer igual.
Sin embargo, con Bootstrap y otras cuadrículas, se ve obligado a insertar todos estos nombres de clase de cuadrícula que realmente se comunican y definen su diseño muy específicamente en su HTML. Semántico o no, creo que las cuadrículas son súper divertidas y fáciles de aprender, pero en última instancia, estamos utilizando las clases de una forma diferente a la que realmente se pretende.
? Semántico o no, creo que las cuadrículas son súper divertidas y fáciles de aprender, pero en última instancia, estamos utilizando las clases de una forma diferente a la que realmente se pretende. ?¿No sería bueno si pudiéramos tener lo mejor de ambos mundos? Los marcos de cuadrícula son extremadamente fáciles de implementar, pero la codificación semántica es posiblemente la mejor manera de ir para la industria en general. Es una batalla clásica entre la necesidad individual y el bien mayor.
Sass @extend
Cuando traemos a Sass a la imagen, realmente podemos tener nuestro pastel y comerlo también. La razón detrás de esto es el punto entero de Sass. Detrás de las escenas, puedes romper las reglas y hacer todo tipo de cosas locas porque, en última instancia, el resultado será un CSS de vainilla.
La función Sass que realmente salva el día aquí se llama @extend, y es indiscutiblemente la mejor función Sass (también es una de las razones más importantes por la que muchos usuarios de LESS ceden y cambian a Sass). Sass @extend es una característica simple con implicaciones importantes.
Para apreciar cómo funciona @extend, saltemos a un ejemplo que codifiqué para un tutorial anterior:
Aquí tenemos dos clases que esencialmente necesitan compartir la mayoría de sus estilos. Básicamente, la respuesta? clase es exactamente como el? comentario? Clase, solo con texto en cursiva y un color de fondo diferente. Para lograr esto, simplemente usamos una declaración @extend dentro de nuestra? Respuesta? clase, que apunta a nuestro? comentario? clase.
Esto le dice a Sass que cuando se emite el CSS, todos los estilos de? Comment? También debe aplicarse a "respuesta". La mejor parte aquí es que Sass es lo suficientemente inteligente como para generar esto de una manera que elimina la redundancia:
Sé lo que estás pensando, ¿por qué diablos no codificamos de esta manera en primer lugar? Absolutamente podríamos Sin embargo, para muchos, la forma Sass es un poco más lineal y más fácil de configurar sobre la marcha.
Clases de Grid extensible
Ahora que sabemos lo que hace @extend, veamos cómo podemos aplicarlo a una cuadrícula de CSS. Echemos un vistazo a un código de cuadrícula basado libremente en No lo piense demasiado en las cuadrículas de Chris Coyier.
Este código es hermosamente conciso y muy fácil de implementar, pero requiere que apliquemos nombres de clase no semánticos en nuestro CSS (.col-1-2, etc.). Si reconsideramos estas ideas con @extend, podríamos llegar a algo como lo siguiente:
Problemas en el paraiso
Como puede ver en el ejemplo anterior, @extend no es el héroe que queremos que se encuentre en esta situación. Nuestra versión Sass puede producir nombres de clase semánticos para nuestro HTML, pero nuestro CSS final se llenará de exageraciones.
El código que Sass escupe, aunque más conciso, todavía está lleno de nuestros diversos nombres de clase no utilizados, como? Columna? y? .col-1-3? Realmente solo queríamos configurar estas plantillas como @extend y no las necesitamos o queremos en nuestro CSS final.
Selectores de marcador de posición en Sass 3.2
Aquí es donde entra en juego Sass 3.2. Hay una nueva función llamada "selectores de marcador de posición". Eso resolverá muy bien nuestro pequeño problema. La buena gente detrás de Sass se dio cuenta de que los programadores con frecuencia establecían una clase de "clase base". que solo existía por el bien de @extender y creó selectores de marcador de posición como una forma de fomentar este comportamiento sin el efecto secundario desafortunado de una clase no utilizada en el CSS final.
En el siguiente ejemplo, podemos ver cómo funciona esto. Esta vez inserté tanto la entrada Sass como la salida CSS una al lado de la otra para que pueda ver fácilmente la transformación. Lea los comentarios para ver cuál es cuál.
Como puede ver, al usar un símbolo de porcentaje en lugar de un punto, pudimos definir? Col-2-3? como un selector de marcador de posición que puede extenderse pero no se transferirá a nuestra salida final.
Usando selectores de marcador de posición en nuestra cuadrícula
Implementemos esto a una escala mayor con todo el código con el que estuvimos trabajando antes. Esto es lo que podría parecer:
Como puedes ver, ahora. más de nuestras clases son en realidad solo selectores de marcador de posición que no obtendrán resultados para nuestro CSS final. ¡Esto nos permite configurar nombres de clase realmente simples y fáciles de implementar en nuestro Sass, mientras nos mantenemos en la salida semántica! Finalmente, lo mejor de ambos mundos!
Mala forma sass
No tan rápido, ¿por qué no mostré la salida del código anterior? Porque, en teoría, debería ser genial. Si todo saliera bien, la salida sería esta:
Desafortunadamente, Sass tiene un poco de rareza cuando se trata de usar múltiples extensiones. Aquí está la salida real:
Si es astuto, ya ha notado los selectores redundantes en las líneas cuatro y once. Debido a que los dos se extienden en realidad a dos selectores de marcadores de posición diferentes, Sass los trata como elementos separados en la salida, aunque se puedan combinar fácilmente.
Como puede imaginar, si todo su sitio se construyó sobre la premisa de múltiples selectores de marcadores de posición y de posición, entonces las redundancias probablemente sean abundantes en la salida final.
Debido a la forma en que funcionan la cascada y la herencia, puedo ver que este sería un problema realmente difícil de codificar, así que les cortaré un descanso a los muchachos Sass. Sin embargo, espero que esto sea algo que se aborde en el futuro.
¿Qué piensas?
Sass @extend tiene toneladas de promesa para mejorar drásticamente su eficiencia con CSS. También es una herramienta muy útil si está intentando configurar un sistema de cuadrícula semántica, especialmente cuando se combina con la nueva función de selector de marcador de posición de Sass 3.2.
Desafortunadamente, como vimos anteriormente, también hay desventajas en el uso de esta técnica. ¿Crees que los pros valen la pena? ¿Puedes pensar en una mejor manera de lograr esto? Quiero verlo, así que déjame un comentario.