Como escribir CSS

y no morir en el intento

Hoy comparto un articulo de un colaborador que de vez en cuando nos honra con alguna interesante colaboracion, se trata de HenryGr del blog https://brainsattic.com; y en este caso nos trae una coleccion de buenos consejos que estoy seguro hemos olvidado muchos, acerca de como escribir una “buena” hoja de estilos CSS. Gracias Henry!.

Si normalmente tienes que pelearte con ello, te invito a que recuerdes esas normas.

Buenas prácticas para un código CSS Eficiente y mantenible

Con el paso del tiempo, las especificaciones para el marcado CSS se hacen más grandes, por lo que escribir de una forma eficiente y “mantenible”, es cada vez más complicado, a la vez que necesario.

Entrando una nueva regla en brackets

El término mantenible, no está aceptado por la RAE, pero es de uso común en informática, la definición de “mantenibilidad” según wikipedia está aquí: https://es.wikipedia.org/wiki/Mantenibilidad

A continuación mencionaré algunas prácticas, herramientas o consejos para producir archivos CSS limpios, optimizados y mantenibles.

Siempre, crea una tabla de contenidos

La forma más fácil de encontrar lo que buscas (dentro de un archivo de código) es crear una tabla de contenido y organizar las ID y las clases en grupos. Por ejemplo, sugiero las siguientes secciones:

 /* reset */
 /* general */
 /* typography */
 /* header */
 /* footer */
 /* sidebar */
 /* Home Page */
 /* About Page */
 /* Media Queries */

Esta tabla de contenidos, puedes usarla en cada uno de tus proyectos.

Escribe tu CSS siguiendo los estándares

Si te bajas código de Internet, estoy seguro que de vez en cuando, te encontrarás con porciones de código pobremente escritas. El código mal escrito es difícil de seguir y, aún más difícil de mantener; por eso, es importante prestar atención a la forma, la limpieza, del código que escribes.

Hay dos formatos estándar de escribir código CSS. La primera y más difundida es la de utilizar la escritura en bloque:

 #element{
 margin: 0 auto;
 width:80%;
 display: block;
 }

Y la segunda, es la escritura en línea:

#element{ margin: 0 auto; width:80%; display: block; }

En mi opinión, la escritura en línea está bien, si no hay más de tres o cuatro propiedades en cada elemento; más de eso, se convierte en ilegible.

Utiliza un preprocesador como SASS

Yo no suelo ser partidario del uso de preprocesadores o de librerías, siempre abogo por aprender las cosas desde su base y, usar el código “justo y necesario”, pero es cierto que actualmente, una hoja de estilos con 500 o más declaraciones, es muy frecuente (y cada día más). El uso de un preprocesador como SASS, hace menos tedioso el desarrollo de hojas de estilo y su mantenimiento.

SASS te permite usar características que no existen en CSS aún, como variables, anidado, mezclado, herencias y más.

SASS ofrece un largo número de posibilidades que harán el código más fácil de mantener y más rápido de escribir. La mayor ventaja, es que es muy fácil de aprender. Por ejemplo, usar variables con SASS es tan sencillo como:

 $font-stack: Helvetica, sans-serif;
 $primary-color: #333;
 body {
 font: 100% $font-stack;
 color: $primary-color;
 }

Se ve bien ¡eh!? (ya vas a correr a instalar SASS, ¿eh?).

Haz un buen uso de los ID y las clases.

Para evitar redundancias en el código CSS, es importante que te asegures que haces un buen uso de los ID y las clases. Los ID han de usarse para elementos individuales, como el logotipo

 #logo{
 width: 250px;
 height:90px;
 display: block;
 float:left;
 }

Mientras que las clases, deben usarse para definir estilos que serán aplicados a varios elementos:

 .box{
 background: #E4F0FC;
 margin: 1em 0px 1.5em;
 padding: 9px 10px 9px 15px;
 color: #555;
 text-shadow: none;
 font-weight: bold;
 }

Un elemento puede tener, a la vez, un ID y una o más clases, como en el caso de:

 <li id="comment-27299" class="item">

Esto resulta útil en el caso en que quieras aplicar una clase genérica al elemento y, al tiempo, una identificación (ID) única, que te permita adjudicarle propiedades únicas.

Combina tus hojas de estilo

Cada vez que se invoca una hoja de estilos en una página HTML, el navegador cliente ha de realizar una petición http(s) para obtener el archivo correspondiente. Toda vez que cada petición http(s) requiere tiempo, deberías siempre que sea posible, combinar tus hojas de estilo, en un único archivo CSS, lo que hará que la carga de tu página sea más rápida.

Existen varias herramientas que te permiten combinar múltiples archivos CSS, algunas en línea como “CSS compressor”.

Usa un IDE

Yo debo confesar que uso un simple editor de texto plano (Geany en Linux y Notepad++ en Windows o Mac) aunque reconozco las bondades de editores específicos como los que incorporan algunos IDE. Si no quieres algo ‘tan pesado’, existen también editores dedicados, tanto de pago como gratuitos, como el Stylizer, que permite la visualización en vivo en diferentes navegadores, y otras herramientas útiles. Aquí tienes una lista (en inglés) de editores CSS, por si tienes curiosidad: http://css3files.com/2015/01/09/the-10-best-css-editors-of-2015/

Utiliza herramientas para optimizar y limpiar tu CSS

Hay un montón de herramientas disponibles en Internet, para este propósito, por ejemplo:

Procssor, que te permite limpiar y organizar tu CSS como tu quieras. Puedes definir la indentación, el tipo de llaves que quieres usar, los espacios en blanco, etc. Es perfecto para mantener la consistencia cuando se realizan proyectos en los que contribuyen varios desarrolladores.

Clean CSS es una herramienta en línea que permite minimizar o expandir, formatear o comprimir un archivo CSS, además de otros formatos como HTML o Javascript.

Una curiosa herramienta es Unused CSS. Como puedes deducir de su nombre, es una herramienta que explora tus páginas, elimina las declaraciones CSS no usadas y, te permite bajar el archivo CSS resultante ya optimizado. Una buena herramienta para mantener tus hojas de estilo actualizadas y limpias.

Minimiza o comprime tus CSS

Una buena manera de optimizar y reducir el tiempo de carga de tu página, ahorrando ancho de banda, es minimizar o comprimir los archivos CSS. La minimización es el acto de eliminar los espacios en blanco innecesarios, los comentarios o los “;” innecesarios. Un archivo css minimizado, suele ocupar el 80% del tamaño original. Existen varias herramientas en línea que permiten minimizar o des-minimizar archivos css.

La compresión de los archivos con el método GZIP, reduce el tiempo de respuesta de las peticiones http(s). Esta compresión reduce el tiempo de carga en un 70%, usualmente. La compresión GZIP puede activarse, incluyendo un pequeño bloque de código en tu archivo .htaccess:


# BEGIN GZIP
AddOutputFilterByType DEFLATE text/text
text/html text/plain text/xml text/css
application/x-javascript application/javascript
# END GZIP

Esta entrada fue publicada en CSS, Desarrollo Web y etiquetada . Guarda el enlace permanente.

Deja un comentario