CSSBlog ES - /* El mejor recurso para enriquecer tu estilo */

Los chicos de Woork nos explican cómo hacer más ordenado nuestro código CSS, hay que seguir estas pautas:

1) ¿Uno o varios ficheros?

Hay gente que utiliza varios ficheros CSS en su código, otros, solo uno, ¿qué es lo mejor?. Lo mejor, depende, si tenemos una web con un fichero CSS enorme, mejor partir ese CSS y dividirlo en categorías, ¿no?. Si tenemos un fichero CSS normal, mediano, de pocos KB (De 1 a 4 KB, por ejemplo), no nos hará falta dividirlos en varios archivos CSS.

El código para dividirlo es este:

@import "file1.css";
@import "file2.css";
@import "file3.css";

Más pautas en el resto de la entrada.

2) Tabla de contenidos

Si queremos organizar y “taggear” nuestros archivos correctamente, ¡lo mejor es utilizar una tabla que describa el contenido de nuestro archivo! Aunque si ese archivo se actualiza muchas veces, llegará a ser molesto cambiarlo, os dejo a vuestra elección.

Este es el código para poner una tabla de contenidos:

/**
* @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 |
*/

3) Separar unos atributos de otros

Hay gente que en su CSS separa los atributos CSS unos de otros (deja un espacio entre una línea de código y el otro), creando así secciones con un grupo de atributos similares:

#content {
height:200px;
width:760px;
margin:0 auto;

background-color:red;
color:#000;
}

Así el código CSS se encontrará mejor, nos dará menos quebraderos de cabeza.

4) Tabular el código

Tabular el código es una buena opción para alguien que esté aprendiendo CSS a nivel básico, ya que le ayudará a moverse mejor entre él, pero para los usuarios avanzados, no se nota demasiado la diferencia entre tabularlo y no, aunque si deseas organizar el código, esta es la mejor forma, claro está:

#content {
height:		    200px;
width:		    760px;
margin:		    0 auto;

background-color:   red;
color:		    #000;
}

Vía: Woork

Vía: Anieto2K