En este post voy a repasar algunas técnicas, ideas y metodologías que uso para escribir un código CSS escalable, mantenible, predecible y reusable.
El 99% de los programadores está de acuerdo: “Nombrar cosas es por mucho lo más difícil de hacer cuando programas”. Buscar los nombres correctos para variables, métodos ó los nombres de clases para elementos HTML es muy complicado, esto es debido por que no podemos predecir el futuro de los diseños y funcionalidades. Por ejemplo:
El nombre de una clase de un elemento HTML puede tener mucho sentido hoy, pero si el diseño cambia una semana después, ese nombre de clase puede no encajar en la nueva estructura. También pasa lo mismo cuando una característica es añadida ó removida en una aplicación debido a que el cliente así lo decidió. Como resultado de estos cambios tenemos que hacer un refactoring de nuestro código para que ahora pueda tener sentido. Este ciclo se repite constantemente a lo largo de cualquier proyecto, por lo cual tenemos que tener mucho cuidado cuando nombramos los elementos.
No existe una técnica única para nombrar elementos correctamente, pero existen ciertas guías que pueden ayudarnos. En este artículo quiero enfocarme en cómo nombrar los elementos en CSS.
En el momento en el que estemos bloqueados y no sabemos que nombre de clase ponerle a un elemento HTML, usa las siguientes sugerencias, las cuales podemos dividir en:
Nombres de clases funcionales
Ejemplos de estos nombres: save_button , delete_button , selected_tab. El nombre de estos elementos está basado en la función que desempeñan. Con solo leer el nombre sabemos que ese boton es por ejemplo para guardar.
El diseño puede cambiar pero la función de ese elemento no lo hará. Nombrar elementos de esta manera seria lo ideal pero no a todos los elementos podemos darles nombres basados en su funcion. Por ejemplo una caja de texto necesita una sombra para verse bien ó un icono tiene que ser azul por que se mira bonito.
No todo estilo visual en un sitio web tiene una justificación funcional para poder nombrarlo.
Nombres de clases basado en el contenido
Ejemplo de estos nombres: intro_text , description_item , image_product. Este tipo de nombres describen el contenido de los elementos. Esta es la manera más obvia y facil de nombrar elementos. En sitios web pequeños es lo mejor que puedes hacer, pero para grandes proyectos no es lo ideal escribir todo tu estilo usando una única clase.
Nombres de clases basado en la presentación
Ejemplos de estos nombres: red_button , big_text , vertical_menu, horizontal_menu , bold_text . Este tipo de nombres describe el estilo del elemento, es decir la manera en como lucen y son presentados en el sitio web. También este tipo de nombres son muy descriptivos para cualquier programador, por ejemplo: “border_image” con solo leer ese nombre sabes que el estilo seria unos bordes en la imagen.
La ventaja de estos nombres es que son reutilizables, por ejemplo “big_text” puede ser usado en muchos elementos donde queremos el texto en grande, no importa si es un título de página, nombre de persona ó título de producto, solamente nos interesa que sea un grande.
Piensa en esto : Los nombres de clases tienen significado y propósito, evita nombres que no sean descriptivos. Mantén en mente que los nombres de clases son para programadores, no para usuarios., Piensa en que un nombre de clase con solo leerla tiene que entregar toda la información posible sobre lo que hace a los programadores y a tu futuro yo.
Siempre debemos procurar que nuestro código CSS sea:
Predecible: Tus reglas CSS deben comportarse como su nombre lo indica. Cuando cambias ó actualizas un estilo solo debe afectar la parte que estas trabajando, no debería de afectar otra partes adicionales Ejemplo: vertical_menu , big_button, text_center .
En estos ejemplos se puede ver claramente la intención del estilo.
Reusable: Tus estilos deberían de ser lo suficientemente abstractos y estar lo menos atados posibles a un elemento en específico, para permitirte construir nuevos estilos a partir de ellos, sin tener que reescribir el mismo estilo de nuevo. Ejemplo: shadow_big , round_square.
Estas dos clases se puede usar en un mismo elemento para darle sombras y crear bordes redondeados y así crear un nuevo estilo combinado.
Mantenible: Cuando el diseño web cambia y hay nuevos elementos en escena, tu código CSS no debería de sufrir un cambio drástico, un nuevo elemento Y no debería de afectar al elemento X antiguo.
Ejemplo: Si tienes un sidebar a la izquierda y el nuevo diseño dice que ahora son 2 sidebar al mismo tiempo en ambos lados. Con solo crear una clase nueva llamada “sidebar_rigth” deberías de solucionar el problema
<div class=”sidebar sidebar_left”>menu</div>
<div class=”sidebar sidebar_rigth”>menu</div>
<div class=”sidebar sidebar_rigth”>menu</div>
De esta manera la clase “sidebar” aplica el estilo general y las otras solo cambian la posición.
Escalable: Esto significa que tu código CSS debe de ser fácilmente editable por una persona o por un equipo, que no tiene una curva de aprendizaje alta y es facilisimo de entender. Solo por que tu eres el único programador hoy actualizando este código no quiere decir que siempre sera así
Malas practicas en CSS
Ahora vamos a ver un poco de malas practicas CSS para saber que no debemos de hacer.
Dar estilo basado en el padre: Ejemplo:
#produc title_shadow {
}
}
#menu item_visited {
}
}
.contact .image_responsive {
}
}
En los 3 ejemplos anteriores no podremos reusar los estilos de “title_shadow” para texto con sombras, “item_visited” para links visitados y “image_responsive” para imagenes responsivas por que estamos forzando a que sean hijos de otros elementos.
Cuando tengas estilos generales, siempre analiza si puedes reusarlos en otros elementos de tu web.
Selectores CSS muy complicados: Es cierto que CSS nos brinda muchos selectores que podemos usar, pero ojo no por eso vamos a abusar de ellos. Los siguientes son algunos malos ejemplos:
#menu ul li {
}
}
#sidebar > div + p {
}
}
table tr ul p {
}
}
Entre más selectores uses más amarrado esta al HTML, lo que provoca que cualquier cambio en el diseño web afecte a tu CSS también. Este tipo de reglas no son reusables, ni mantenibles por que están apuntando a un elemento en una posicion específica en el HTML
¿ Como podria otro elemento usar el mismo estilo, si tiene una estructura HTML distinta ?
Simple no puede. En lugar puedes usar nombres de clases directos. Los ejemplos anteriores podrían reescribirse así:
.menu_item {
}
}
.paragraph_description {
}
}
.descrition_table {
}
}
Nombres de clases simples y sin significado:
.title {
}
.content {
}
}
.name {
}
}
Este tipo de nombres hay que evitarlos, son muy genéricos y no son informativos para el programador, por ejemplo ”title” ¿ titulo de que ?. con solo leerlo no podemos saber si es en un menú, en una sidebar ó titulo de artículo.
Otro problema es que como el nombre es muy generico, algun compañero podria sobreescribir tu CSS con mucha facilidad por accidente. Este tipo de nombres producen CSS impredecible.
Un estilo que hace mucho:
.user_messages {
position: relative;
border: 1px solid gray;
background-color: white;
font-size: 15px;
marging-top: 50px;
left: 10px;
}
position: relative;
border: 1px solid gray;
background-color: white;
font-size: 15px;
marging-top: 50px;
left: 10px;
}
Imagina que el estilo anterior es para para un caja que muestra los mensajes de usuarios, arriba en el centro de la página. Tiene un margen y lo mueve un poco a la derecha.
¿ Que pasa si quiero mostrar esta misma caja al mismo tiempo en una sidebar derecha ?
Luciria muy mal , porque el estilo está haciendo muchas cosas: Esta definiendo aspecto y posicion dentro de la misma regla. El aspecto es algo que podemos reusar pero la posicion no, por eso toda la regla está comprometida. Lo mejor sería dividirla así:
.user_messages {
position: relative;
border: 1px solid gray;
background-color: white;
font-size: 15px;
}
position: relative;
border: 1px solid gray;
background-color: white;
font-size: 15px;
}
.user_message_top {
marging-top: 50px;
left: 10px;
}
marging-top: 50px;
left: 10px;
}
Así el elemento en la sidebar solo puede usar la clase “user_messages” para obtener el estilo.
Usar clases solo para dar estilos y solo eso
El problema aquí es que en proyectos grandes te encuentras con nombres de clases que tienen muchos propósitos por ejemplo: para dar estilos , para hacer alguna función por medio de javascript , como ancla para algún plugin jquery , etc.
Las clases tienen muchas responsabilidades y cuando lees los nombres no son muy descriptivos, no hay nada que te indique para que son. Removerlas ó actualizarlas es todo un caos. La unica recomendacion que puedo hacer aquí es que tus clases solo deben ser usadas para dar estilos y nada más que eso. Y si necesitas alguna clase para hacer algo con javascript la recomendación es que crees otra clase y le pongas al inicio “js-”
Ejemplo: js-drapdrop , js-list-autocomplete , js-grid
Cualquier clase que no comience con “js-” ya sabemos que solo es para dar estilo nada mas y podremos removerla o cambiar el nombre con confianza.
Metodologías CSS
Ahora solo nos falta por hablar sobre algunas metodologías CSS para nombrar clases, las cuales pueden ser muy útiles para escribir un código limpio. Las metodologías CSS son en palabras sencillas, consejos para estructurar mejor nuestro código CSS con el fin de que sea mantenible y escalable.
Existen muchas metodologías para escoger : OOCSS, SMACSS, BEM solo para nombrar algunas. Yo quiero hablar sobre BEM.
BEM es una metodología que consiste en : “block , element , modifier”. Sugiere escribir tu código CSS de manera estructural basado en elementos y modificadores. Usando BEM no esta permitido usar Ids. Ejemplo:
.block {}
.block__element {}
.block--modifier {}
.block__element {}
.block--modifier {}
block : define un bloque que contiene elementos
block__element : elementos que componen al bloque
block--modifier : reglas que modifican el estilo del bloque, ya sea estilo de presentación, posicion ó maquetado.
block__element : elementos que componen al bloque
block--modifier : reglas que modifican el estilo del bloque, ya sea estilo de presentación, posicion ó maquetado.
Para entender mejor esto veamos la siguiente imagen:
En la imagen podemos ver una caja de búsqueda y un botón, esto es considerado un block y todos los elementos dentro de él son parte de este block. Siguiendo la metodología BEM podemos escribir las clases de esta manera.
.search {}
.search__input {}
.search__button {}
.search--big {}
.search--tiny {}
.search__input {}
.search__button {}
.search--big {}
.search--tiny {}
Hasta aquí lo más simple de BEM, no sería prudente escribir un tutorial completo sobre esto cuando en internet existen muchos y muy buenos. Si quieres saber más sobre esta metodología recomiendo leer los siguientes enlaces:
Recuerda que BEM ó cualquier otra metodología no va a resolver todos tus problemas, son solo maneras muy poderosas de hacer nuestro código mantenible y escalable para que todos en tu equipo tengan una idea clara de cómo mejorar el actualizar y mejorar el CSS.
links
http://csslint.net/
http://seesparkbox.com/foundry/naming_css_stuff_is_really_hard
http://engineering.appfolio.com/2012/11/16/css-architecture/
https://css-tricks.com/bem-101/
http://styleguides.io/
http://seesparkbox.com/foundry/naming_css_stuff_is_really_hard
http://engineering.appfolio.com/2012/11/16/css-architecture/
https://css-tricks.com/bem-101/
http://styleguides.io/
