¿CSS seco? ¿como el Martini?
No, Dont Repeat Yourself, nacio en el 2012.
¿Y de que va?
De no repetirse, de no repetirse, de no repetirse.
Bueno, para no repetir código tengo sass, variables, extends…
La filosofia es no repetir las propiedades en cada clase sino agrupar las propiedades en grupos y asignar las clases a esos grupos.
No usa las clases para definir el diseño sino para referirse al contenido, es decir, no usa cosas como .left sino .header
¿Que eso de los grupos?
Aquí no haces clases y asignas propiedades, sino que haces grupos de propiedades y asignas las clases.Si tienes 5 elementos que usan el fondo blanco, habitualmente defines las 5 clases/selectores y añades en cada una: background:#FFF. O bien añades una “utility class”, (una clase que sirve para una función especifica y “universal”, como .light_background{background:#
#LIGHT_BACKGROUND,
.clase1 ul,
.clase2 h2,
.clase3,
.clase4 li p,
.clase5 .top
{
background:#FFF
}
Los grupos se nombran en mayusculas según la función que hacen (#TEXT_RED, #MARGIN_BIG, #FLOAT_LEFT) y las clases semánticamente según su contenido (.top, .user .featured)Primero hacer grupos de propiedades:
{background:white;
font-size:20px}
{background: grey;
padding:20px}
{font-family: impact}
Luego nombrar esos grupos logicamente y en mayusculas utilizando ids que no se usan en el html:
#WHITE_PANEL
{background:white;
font-size:20px}
#GREY_PADDED
{ background: grey;
padding:20px}
#HEADINGS
{font-family: impact}
y luego asignar las clases necesarias.
#WHITE_PANEL, .menu-toggle,.post-term a,.term-link a,.site-title-text,.taxonomy-list-title .term-name {background:white; font-size:20px} #GREY_PADDED, .screen-title,.cycled-feature h3,.text { background: grey; padding:20px} #HEADINGS , h3,big,.footer h2,.cycled-feature .entry {font-family: impact}
Echadle un ojo a este css y lo vereis enseguida:
https://s3.amazonaws.com/
Que es de esta web:
https://es.globalvoices.org/
Si veis el html vereis que eso de “tocar el html lo menos posible” tampoco se cumple mucho…
¿Y que ventajas tiene?
– Css mas cortos.
– Promueve buenas practicas de diseño ya que tienes que pensar en patrones de diseño en vez de en elementos sueltos
– Solo usa css “puro”, sin preprocesadores
– Al ver todas las clases afectadas por una propiedad es más fácil ver las interdependencias y herencias, sabes a quien afectara una propiedad al cambiarla
– No necesita editar el html, puede servir para “estilar” sitios donde no tienes acceso (o es difícil) a la fuente html, como wordpress.
– Es compatible con otras metodologías como smacss , ya que solo se mete en como organizar clases y selectores
¿Y como se apaña con el responsive?
Tienes que duplicar los grupos en cada punto de ruptura con las nuevas propiedades.
¿Y tu que piensas?
Lo veo flojo.
Y que llevar tan al extremo el hecho de no repetir código arrastra inconvenientes en otros aspectos. Creo que es más sencillo y legible usar preprocesadores y gastar unos kbs más si hace falta. Si no ves problema en usar preprocesadores para no repetir código este sistema pierde muchos puntos…
Al final hay listas kilometricas de clases asignadas a una propiedad que a mi modo de ver traslada el problema de sitio más que solucionarlo.
Tambien es verdad que se hace muy raro porque obliga a pensar al revés, desde la propiedad > clase > grupo en vez de elemento > clase > propiedad como estamos habituados por la filosofía de css.
A pesar de todo creo que tiene cosas interesantes y hay que tenerla en cuenta si no para seguirla al 100, quizá para aplicar algunos conceptos como los grupos definidos de propiedades.