No te repitas (SECO). Es un concepto simple con la capacidad de cambiar completamente la forma en que escribes el código. Sin embargo, si recuerdo mis primeros días con CSS, no creo que el concepto significara mucho para mí. Claro, está bien, no me repitas, gracias por el consejo. ¿Cómo se traduce eso en un consejo aplicable?
Hoy vamos a ver los conceptos básicos de cómo repensar el CSS que has estado escribiendo al recortar el contenido y reducir la redundancia. El resultado será un CSS más simple que es más fácil de crear y mantener.
Donde creo que estas
Este artículo no es para el chico que pasa sus días recorriendo blogs de desarrollo web para tener la oportunidad de dejar comentarios y mostrar cuánto más sabe que todos los demás. Si ya eres un genio de CSS, escribe un libro.
En su lugar, estoy escribiendo esto para las masas de desarrolladores que finalmente están empezando a entender el problema de CSS. Ha estado diseñando sitios web durante un año, tal vez dos, y está listo para dar un paso más allá de cómo escribir código efectivo y aprender a escribir código eficiente.
"Está listo para dar un paso más allá de cómo escribir código efectivo y aprender a escribir código eficiente".Al igual que yo en este momento de mi carrera, has escuchado la jerga muchas veces, pero aún no has experimentado eso, ¿haz clic? donde de repente escribir CSS eficiente tiene sentido. Con suerte, encontraremos ese clic hoy.
Sass @extend
No te asustes. Vamos a hablar de un preprocesador. No se preocupe, no voy a exigirle que use uno o convierta toda esta pieza en un tutorial de Sass en lugar de un tutorial de CSS. Vamos a aprender cómo escribir CSS antiguo de una manera más eficiente.
No te asustes. Vamos a hablar de un preprocesador.Dicho esto, Sass, para todas sus complejidades, en realidad utiliza la herencia de selector de una manera mucho más fácil para envolver su mente alrededor de CSS. Es un proceso muy directo y lineal que hace que el concepto de no repetirse sea increíblemente fácil de entender. Vamos a ver.
Tres cajas
Para ver cómo funciona esto, imagine que tenía tres clases muy similares pero aún distintas. Aquí hay un ejemplo con las clases? Cuadro,? ?caja grande,? y? smallbox? (Esperemos que sus nombres de clase sean un poco más específicos).
Como puede ver, los tres cuadros requieren los mismos estilos básicos, pero el tamaño de cada uno es diferente, por lo que sí requerimos tres clases separadas. Aún así, toda esta redundancia no es buena.
Entonces, ¿cómo secamos esto? Ahí es donde entra la función Sass @extend. Echa un vistazo:
¿Ves lo que pasó aquí? Incluso si no sabes nada de Sass, este código es bastante fácil de entender. Esencialmente, en lugar de escribir las mismas propiedades una y otra vez con los mismos valores, podemos usar @extend para decir "Oye, solo toma el código de la clase de caja". Luego continuamos y solo definimos las propiedades que requieren cambio.
El código resultante es más corto y más conciso sin sacrificar la legibilidad. Desafortunadamente, esto es Sass y la función @extend no existe en CSS antiguo.
Aprendiendo de la salida de Sass
Entonces, ¿cuál fue el punto de la gran lección de Sass si no podemos usar @extend en CSS? Lo que hay que recordar es que el producto final de Sass, LESS y cualquier otro preprocesador es el sencillo CSS de Jane. Entonces, si Sass está haciendo magia en la salida real, deberíamos poder detectarla.
Veamos cómo manejó convertir esos @extendios en CSS:
Jajaja Este código es mucho más conciso que nuestro concepto original y, sin embargo, aún es puro CSS. La función @extend es en realidad lo suficientemente inteligente como para generar lean CSS mediante el uso de selectores agrupados, que están separados por comas.
A través de @extend, señalamos a Sass las redundancias en nuestro código y las reunimos en una sola regla. Después de esto, definimos las otras clases usando solo el código que necesitaba ser diferenciado.
Saltando Sass
La gran lección para aprender aquí es que no necesita un preprocesador para hacer todo este trabajo por usted. Puede omitir Sass por completo y simplemente escribir código limpio y conciso en primer lugar (aunque personalmente todavía creo que Sass es la rodilla de las abejas). Puede que no sea tan intuitivo, pero una vez que se familiariza con la detección de redundancia, se convierte en una tarea bastante fácil.
La lección importante para mí fue que no necesariamente me doy cuenta de que estoy codificando de forma descuidada, ya que estoy experimentando con diferentes ideas en mi código, ¡y eso está bien! Codificar así desde el principio es algo que viene con la experiencia. Mientras tanto, solo asegúrate de tener un principio simple en tu cabeza: ¡no has terminado simplemente porque todo funciona!
"Consiga un principio simple en su cabeza: ¡no ha terminado simplemente porque todo funciona!"Podrías jugar horas y horas con un diseño o diseño funky, y cuando todo finalmente cae en tu lugar, dejas escapar un suspiro de alivio y sigues con la vida. ¡Pero no has terminado! El paso que deberías tomar a continuación es examinar todo el código que escribiste con frustración y descubrir cómo simplificarlo.
Un ejemplo real
Para ver cómo se ve este proceso, echemos un vistazo a un ejemplo de la vida real que programé para un tutorial anterior. Básicamente, el efecto que buscaba es una pila de cartas.
Para lograrlo, creé un elemento con un estilo básico, luego lo usé: antes y: después para duplicar el elemento. El resultado fue una pila de tres cartas de una sola clase. Aquí está el trozo de código que resultó:
Me encuentro con este problema todo el tiempo cuando uso: antes y: después. Construyo cada elemento individualmente, retrocedo un paso y luego me doy cuenta de que básicamente, ¡acabo de escribir el mismo código tres veces diferentes!
Todo lo que tenemos que hacer para limpiar esto es algo que cualquier niño de la escuela podría hacer: detectar la repetición. En el código anterior, cada tarjeta tiene la misma altura, anchura, sombra, degradado y radio de borde. Todo este código debe escribirse una sola vez. Podemos agrupar esto juntos así:
Esto se encarga de las propiedades y los valores que se repiten en las tres tarjetas, pero también existe cierta redundancia que existe solo entre los pseudo elementos. Vamos a ocuparnos de esto a continuación.
Ahora que hemos agrupado todo este contenido, podemos eliminarlo de las otras secciones donde se repitió. Aquí está el bloque de código completo, recortado:
Como puede ver, ¡hemos recortado casi veinte líneas de código en un pequeño ejemplo! Piense en cuánto impacto tienen estos principios en el curso de un sitio web completo.
Facil mantenimiento
Muy a menudo, los principios como los que estamos aprendiendo hoy se presentan como reglas que deben seguirse simplemente porque esa es la forma en que debería estar haciendolo Para la mayoría de las personas, este no es realmente un argumento convincente. ¿A quién le importan las prácticas comunes y el bien mayor? ¿Qué hay para mi ahí dentro?
"Te estás ahorrando mucho tiempo y problemas usando estas técnicas".La buena noticia aquí es que el CSS leaner es mucho más fácil de mantener y tamizar a largo plazo. Te estás ahorrando mucho tiempo y problemas usando estas técnicas. Por ejemplo, imagine que ha escrito el código original del ejemplo anterior y luego decidió que desea cambiar los colores del degradado. ¡Tendría que pasar y actualizar dieciocho líneas de código para este simple cambio!
Ahora imagine que tuvo que hacer lo mismo en nuestro ejemplo conciso, aquí solo tiene que actualizar seis líneas de código. Por supuesto, la sintaxis del gradiente y la situación del prefijo del navegador aún son muy difíciles, pero seis es mejor que dieciocho.
Repensando la estructura de su código
Antes de terminar con esto, vale la pena comentar que hay muchas maneras de hacer que su CSS sea más simple. Esta es una categoría amplia de discusión que definitivamente no se limita a las técnicas anteriores.
Por ejemplo, muchos codificadores han desarrollado sistemas mediante los cuales usted intencionalmente separa diferentes tipos de código si su CSS en nombre de la eficiencia. Una forma de hacer esto en nuestro ejemplo de caja original podría ser separar el estilo visual arbitrario del CSS estructural. Siguiendo esta ruta, nuestro código se vería más así:
Aquí hemos desarrollado una base? Caja? Clase que se aplicaría a varios elementos HTML, cada uno de los cuales también se emparejaría con una clase estructural que define la forma, la posición, el orden de apilamiento, etc. de la caja. Casi cualquier cosa que no sea extra dulce para los ojos.
Obviamente, la compensación aquí será un pequeño margen de beneficio adicional. Encontrará que los codificadores difieren ferozmente sobre si es aceptable o no agregar incluso un solo carácter de marcado adicional en el nombre de CSS más eficiente.
Escuelas populares de pensamiento
Actualmente, hay dos ideas o métodos muy populares en este sentido de repensar cómo estructuramos nuestras hojas de estilo: OOCSS (Object Oriented CSS) y SMACSS (Arquitectura escalable y modular para CSS).
Aunque efectivamente bastante distintas, estas metodologías son muy similares conceptualmente y ambas buscan ayudarlo a crear CSS más eficientes, mantenibles e incluso reutilizables. Te recomiendo que mires a los dos para ver lo que piensas.
¿Cómo se escribe Lean CSS?
En los ejemplos anteriores, aprendimos todo acerca de cómo Sass usa una función mágica llamada @extend para ayudarlo a escribir código más ágil con muy poco esfuerzo y cómo podemos usar los principios que funcionan en esa función para realizar estas funciones utilizando el CSS antiguo. También discutimos brevemente la idea de reevaluar completamente la estructura de su código para crear algo que sea más modular y fácil de mantener.
Deje un comentario a continuación y háganos saber qué piensa de estos métodos. ¿Usas Sass? ¿Con qué frecuencia se agrupan los selectores para reducir la redundancia? ¿Qué opinas de OOCSS y SMACSS? ¿Cual es mejor?