Desarrollando páginas web en múltiples ocasiones me ha hecho pensar en la mejor forma de estandarizar, organizar y mejorar la forma en que escribo mi CSS. Así que reuní algunas de las mejores técnicas que para mi criterio son importantes al momento de desarrollar nuestros estilos en cascada (CSS) y me gustaría compartirlas con ustedes.
1) Usa un archivo reset.css
Hace un tiempo solía usar el selector universal * { margin:0; padding:0; } para borrar los rellenos y márgenes que los diferentes navegadores aplican por default a los elementos de una página HTML. Desafortunadamente esto era una mala práctica ya que esos atributos eran aplicados a cada elemento de la página y en muchas ocasiones causaba inconvenientes.
Pero navegando por allí descubrí que se puede tener un archivo que estandarice los elementos de la pagina, eliminado márgenes, rellenos, etc. y eliminando las inconsistencias que existen entre los distintos navegadores. Este archivo comúnmente llamado reset.css se debe agregar siempre al inicio de nuestras páginas antes de empezar a escribir nuestra primera línea de CSS.
Aquí te puedes bajar un archivo reset.css
2) Aislar las propiedades que se repiten un montón
Si encuentras una propiedad que se repite muchas veces, aislarla evitará escribirla varias veces y además permitirá también cambiar el aspecto al mismo tiempo de todas las partes que la utilizan y comprimirá nuestro código CSS, es decir, facilitara el mantenimiento de nuestras páginas.
Nuestro código CSS queda reducido a esto:
3) Prueba un compresor de CSS en línea
Comprimir el CSS es una buena idea pero no por la razón que estas pensando ahora, (reducir el tamaño seguramente eso pensaste), sino mas bien porque al comprimir nuestro código CSS podemos aprender nuevas técnicas de ordenamiento de nuestro código e ir aprendiendo cada vez más como optimizarlo. Aquí hay algunos:
Te recomiendo que veas estos sitios más que compresores como una buena fuente para aprender trucos nuevos o métodos que harán tu CSS más eficiente. No exprimas tu CSS al máximo solo para perder unos kbs menos ya que lo que perderás en mayor medida será legibilidad de tu código.
4) Haz una tabla de contenido
¿A qué se refiere esto? Pues simple, consiste en separar claramente nuestro código CSS en secciones específicas para llegar a la zona que estamos buscando más rápidamente.
¿Cómo se hace esto? Bueno, antes que nada se crea el esquema o estructura que tendrá nuestro documento CCS, se hace una lista de todas las secciones que llevara y posteriormente se van separando cada una de las secciones para su mejor localización.
5) Separar las propiedades de posición de las propiedades tipográficas
¿Por qué? porque es probable que las propiedades tipográficas se reutilicen un montón y si tú mezclas las propiedades tipográficas y las de posición te encontrarías en la necesidad de estar repitiendo muchas veces las propiedades tipográficas.
Comúnmente hacemos esto:
Pero si ordenamos tipográficamente nuestro código, tendremos un mejor ordenamiento, clasificación de nuestro CSS, una mayor compresión y por ende será más fácil cualquier actualización de nuestra página:
6) ¿Cuando usar “id” o cuando usar “class”?
Pues la respuesta es siempre usar “class”, a menos que al elemento al que le decidas aplicar las propiedades CSS lo vayas a “manosear” con javascript y así se te facilite la manipulación en javascript, en ese caso usa “id”.
A veces cuando desarrollamos un trozo de HTML con su CSS especifico, de repente sin proveerlo nos damos cuenta de que ese trozo de HTML con su CSS respectivo podemos utilizarlo en otro parte de la misma página, ¿pero qué sucede si ya usamos selectores de tipo “id” en lugar de selectores de tipo “class”? pues pasa que tendríamos que cambiarle los nombres a todos los elementos HTML de nuestro trozo (¿y no es albur?) para que no se repitan los “ids” y además repetir nuestro código CSS algo que cuando andamos apurados significa mucho.
Lo mejor sería haber usado selectores de tipo “class”, ya que únicamente hubiéramos copiado el mismo HTML sin cambiarlo y ya listo, ese fue todo. Esa es una gran razón por la cual debes usar siempre selectores de tipo “class”.
Si piensas que usar un ”id” es mejor para poder manipular el elemento más cómodamente con javascript; es cierto, pero esto lo soluciones agregando la propiedad “id” al elemento que necesites manipular con javascript, no existirá ninguna problema si tiene una propiedad “id” y una “class” juntas.
7) Crea una biblioteca de clases CSS.
Si tienes una biblioteca de clases puedes agilizar el desarrollo de tus estilos CSS.
8) Utiliza las propiedades resumidas para mantener todas las partes de un tipo de estilo en una sola línea
Por ejemplo:
Es más eficiente que:
9) Cúrate de “divititis” aguda.
Evita usar “divs” para todo y utiliza más HTML semántico. HTML semántico consiste en utilizar el elemento HTML correcto para la tarea en cuestión y no utilizar “divs” para todo. Los “divs” son divisores genéricos de contenido y nada más. EL 90% de las veces habrá una etiqueta HTML creada específicamente para el tipo de contenido que se desea mostrar.
Por ejemplo: p, h1, h2, h3, h4, h5, h6, ul, ol, img, etc.
Un mal uso común de “divs” se puede encontrar en el siguiente ejemplo:
Muchas veces el código anterior puede reducirse a esto:
10) Evita “clasititis” aguda.
“Clasititis” es similar a “divitits” y se refiere a la excesiva utilización de las clases o (“ids”) cuando en realidad no son necesarias. ¿Para qué llenar de clases a cada elemento de un grupo si todos pueden heredar las propiedades de un solo padre?
Veamos un ejemplo:
A todos los enlaces se les dio una clase con el fin de aplicarles un estilo algo totalmente innecesario. Si le aplicamos un selector “class” o un “id” a la etiqueta “ul” y en su lugar aplicamos los estilo a esta etiqueta en lugar de a cada uno de los enlaces podemos ahorrarnos tener que agregar muchas clases extra.
Bueno pues eso es todo lo que por ahora puedo compartir con ustedes, espero que comenten en este blog sus consejos y/o mejores técnicas que conozcan de CSS y así podamos continuar mejorando. Espero sugerencias y hasta pronto.
El articulo esta genial, hay muchas cosas que aplicare de ahora adelante en diseño de mis paginas. Saludos
No veo los ejemplos, se podra solucionar?
Muchas gracias