Web BizarroWeb Bizarro

Suscríbete a nuestro Newsletter

X

Únete a nuestra lista de correos para recibir semanalmente actualizaciones de nuestro contenido.

Escribir mejor CSS

Escribir mejor CSS 10.FEB.14

Alvaro José Rios Ch
Fundador WebBizarro

Anteriormente habíamos hablado de como escribir mejor código HTML, lo mismo aplica para el código CSS, el de desarrollo porque el de producción generalmente esta minificado. Si no son delos que usan un preprocesador y prefieren escribir el CSS directamente es mejor tener una guía definida para que su equipo de trabajo no tenga un colapso mental al tratar de hacerle mantenimiento.

 

Principios Generales

En primer lugar debemos tener en cuenta algunas cosas a la hora de escribir CSS.

- No tratar de optimizar el código prematuramente, mantenerlo legible y entendible.

- Todo el código CSS debe verse como si una sola persona lo escribió así el grupo de trabajo sea grande.

- Debes forzarte a elegir y usar un patrón de diseño para las hojas de estilo.

- Si no pueden decidir que reglas son las mejores entonces elijan alguna ya existente.

 

Espacios

Al igual que cuando escribimos HTML hay algunas reglas sobre esto.

- Nunca mezclar tabuladores y espacios (preferiblemente espacios)

- Si usas espacios debes elegir la cantidad que vas a usar para todo el proyecto (preferiblemente 4)

 

Comentarios

Creo que esta de más decir que el código debe estar comentado, no se puede suponer que los otros miembros del equipo sabrán que hace cada parte de nuestro código o que nadie más tocara nuestro código en el futuro.

- Coloca los comentarios sobre una nueva línea por encima del código a explicar.

- Mantenga la longitud de la línea a 80 caracteres máximo como preferencia.

- Use correctamente las mayúsculas y las sangrías en los textos que escriba.

 

/* ==========================================================================
   Section comment block
   ========================================================================== */

/* Sub-section comment block
   ========================================================================== */

/**
 * Short description using Doxygen-style comment format
 *
 * The first sentence of the long description starts here and continues on this
 * line for a while finally concluding here at the end of this paragraph.
 *
 * The long description is ideal for more detailed explanations and
 * documentation. It can include example HTML, URLs, or any other information
 * that is deemed necessary or useful.
 *
 * @tag This is a tag named 'tag'
 *
 * TODO: This is a todo statement that describes an atomic task to be completed
 *   at a later date. It wraps after 80 characters and following lines are
 *   indented by 2 spaces.
 */

/* Basic comment */

 

Formato

Para elegir el formato que usara para escribir el código debes tener en cuenta lo siguiente. Debe ser fácil de leer, fácil para hacer observaciones y minimizar la posibilidad de introducir errores accidentales.

- Utilice un selector único por cada línea.

- Incluya un espacio dentro de la llave de apertura de un conjunto de reglas.

- Incluya una declaración por cada línea del bloque de reglas.

- Use un nivel de sangría por cada declaración.

- Solo incluya un espacio después de los dos puntos (:) en cada declaración.

- Use comillas simples o dobles a lo largo de todo el documento, de preferencia doble.

- Utilice minúsculas para los valores hexadecimales, ejemplo #aaa

- En la medida de lo posible evitar las unidades que coloquen valor 0, ejemplo: margin: 0.

- Incluya un espacio después de cada valor para cada propiedad.

- Al final de cada línea debe haber un punto y coma.

- Separe cada conjunto de reglas por una línea en blanco.

 

Orden

En cuanto al orden de las propiedades en la hoja de estilo lo mejor es mantenerlas ordenadas alfabéticamente.

 

Excepciones

Las declaraciones individuales se pueden mantener en una sola línea dejando un espacio entre las llaves y la regla.

.Selector-1 {width: 10%;}
.Selector-2 {width: 20%;}
.Selector-3 {width: 30%;}

Algunas propiedades separadas por comas largas se pueden agrupar en varias líneas para que sean más fáciles de leer.

.selector {
    background-image:
        linear-gradient(#fff, #ccc),
        linear-gradient(#f3c, #4ec);
    box-shadow:
        1px 1px 1px #000,
        2px 2px 1px 1px #ccc inset;
}

Estas son algunas consideraciones que puedes elegir a la hora de escribir código CSS, recuerda que no son reglas sino recomendaciones o guías y muchas de estas cosas se pueden automatizar si usas un buen editor de texto y te tomas unos minutos para configurarlo.