La gente de Woork ha escrito un interesante artículo en el que nos cuentan unas pautas con las que conseguir un CSS más fácil de mantener. A simple vista son unas pautas lógicas y que con un poco de experiencia consigues aplicarlas y optimizas sustancialmente el tiempo de mantenimiento de tu código.
Intentaré hacer una pequeña traducción de las mias, aportando mi visión del tema.
1) ¿Uno o multiples ficheros?
Muchos son los desarrolladores que usan multiples ficheros CSS para tener el código separado y quizas así consigan un poco más de control sobre el código, por otro lado he visto larguísimos ficheros CSS con miles y miles de líneas para evitar esto, lo que supone otro problema.
@import "file1.css";
@import "file2.css";
@import "file3.css";Mi opinión? Pues depende mucho del proyecto, la complejidad del mismo y de la optimización que deseemos aplicar a cada una de las páginas. Si estamos desarrollando un theme para Wordpress quizas la opción más apropiada se la de usar un solo CSS ya que este no va a crecer exageradamente, pero si por contra estamos desarrollando una página con una cantidad considerable de secciones/opciones sería conveniente dividir y pensar en optimizar la carga de cada una de las secciones/opciones.
2) Tabla de contenidos, ¿Sirven para algo?
Hace poco más de un año debatimos sobre el tema de los comentarios en el CSS, y la opinión general sobre el tema fué que había que encontrar un término médio y no crear una página CSS con más comentarios que código CSS.
En Woork explican que en alguna ocasión las han usado para los casos en los que se ha usado un único fichero CSS y de esa forma consiguen un poco de claridad del código insertado despues. Por contra en el caso de múltiples ficheros te ves obligado a ir actualizando varios ficheros cada vez que realizas un cambio en la estructura.
/**
* @style Standard Layout
* @media screen
* @version 1.0
* @author Franky
* @copyright Franky’s pwn comp-a-ni
* @licensor da customa
* @layout in pixels:
* | 788 |
* | 10 | 768 | 10 |
* | 10 | 27 | 741 | 10 |
*/
Mi opinión? El documentar es bueno, hay que documentar nuestro código en medida que sea fácilmente comprensible por una persona ajena a lo que estás haciendo pero nada más. Osea hay que decir lo justo, ni más ni menos, pero hay que decir algo. Usando un sistema jerarquico lógico bastaría para clarificar nuestro código.
3) Crear secciones para agrupar atributos similares
Una técnica que tambien te encuentras mucho por Internet es la de separar en secciones el CSS. Estas separaciones tienen un sentido y es el de agrupar atributos similares. Por ejemplo los que definen el tamaño, posición y aspecto.
#content {
height:200px;
width:760px;
margin:0 auto;
background-color:red;
color:#000;
}Mi opinión? Implica un reciclaje para los que no lo hacen, pero ayuda. El ver a simple vista todos los atributos que hacen un elemento esté en esa posición o tenga ese tamaño es un ahorro de tiempo considerable para futuras actualizaciones del código.
4) Tabular el código
Una técnica que da una calidad estética a los ficheros CSS es el tabular los valores de los atributos frente a los atributos. Esto muestra muy claramente el código de nuestro fichero.
#content {
height: 200px;
width: 760px;
margin: 0 auto;
background-color: red;
color: #000;
}Mi opinión? Pese a no hacerlo nunca, reconozco que más que una mejora visual es una ayuda a la comprensión del código para alguien ajeno a él.
