Pasa el tiempo y la especificación CSS se hace más grande. Desarrollar hojas de estilo eficientes y mantenibles se ha convirtido en algo más complicado que antes. He aquí un resumen de buenas prácticas, herramientas y consejos para producir archivos CSS super limpios, optimizados y fáciles de mantener.
Crea siempre una tabla de contenido
Como los archivos CSS son cada vez más y más grandes, la forma más fácil de encontrar rápidamente lo que estás buscando es crear una tabla de contenidos para organizar así tus tus ids y clases.
/* reset */ /* general */ /* typography */ /* header */ /* footer */ /* sidebar */ /* Home Page */ /* About Page */ /* Media Queries */
Lo anterior es un ejemplo de una tabla de contenidos de CSS que puedes volver a utilizar en tus propios proyectos.
Escribe tu CSS de manera estándar
Si sueles bajarte códigos de Internet, estoy bastante seguro de que de vez en cuando, te has tropezado con un snippet de CSS muy mal escrito. Y cuanto más difícil de interpretar sea un CSS, más difícil será mantener. Es por esto que prestar atención a la forma en la que escribes tus CSS es importante.
Hay dos maneras "estándar" de escribir CSS. La primera y más extendida es utilizar el estilo "bloque":
#element{
margin: 0 auto;
width:80%;
display: block;
}
Y el segundo es el estilo "línea":
#element{ margin: 0 auto; width:80%; display: block; }
En mi opinión, el estilo "línea" es de gran utilidad, si se establecen no más de 3 o 4 propiedades. Más de eso, puede llegar a ser un poco difícil de interpretar.
Usa SASS
CSS solía ser bastante simple, pero a medida que el tiempo ha pasado, se han añadido más y más características y posibilidades que permiten a los diseñadores y desarrolladores web front-end crear sitios web impresionantes. Hoy en día, encontrarse con una hoja de estilo de más de 500 líneas es lo más frecuente del mundo. Crearlas, y, especialmente, mantenerlos puede resultar tedioso.
Aquí es donde un preprocesador puede ayudarte. Sass te permite utilizar características que no existen en CSS, como variables, anidaciones, mixins, herencias y mucho más.
Sass te ofrece multitud de posibilidades que hacen que tu CSS sea más fácil de mantener, y más rápido de generar. Lo mejor es que el lenguaje es muy sencillo. A continuación te muestro un ejemplo de uso de variables en Sass:
$font-stack: Helvetica, sans-serif;
$primary-color: #333;
body {
font: 100% $font-stack;
color: $primary-color;
}
Demasiado atractivo, ¿verdad? Si no has instalado todavía Sass, ya tienes un plan para esta noche...
Haz un uso correcto de los IDs y clases
Con el fin de evitar la redundancia en tus hojas de estilo, es importante hacer un uso adecuado de los identificadores y las clases. Los ID son para dar estilo a un elemento individual, como un logotipo:
#logo{
width: 250px;
height:90px;
display: block;
float:left;
}
Por otro lado, las clases se crean con el fin de definir estilos que pueden ser 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 ambos, un id y una o más clases como puedes ver más abajo:
<li id="comment-27299" class="item">
Esto es muy útil cuando aplicas¡ una clase general al elemento y el identificador único te permite establecer propiedades únicas.
Combina tus hojas de estilo
Cada vez que enlazas un archivo CSS en una página HTML, el navegador del cliente tiene que hacer una petición HTTP con el fin de conseguir dicho archivo. Claro está, cada petición HTTP tarda un tiempo en procesarse. Siempre debes combinar todas tus hojas de estilo en una y así hacer que tu página web cargue mucho más rápido.
Existen muchísimas herramientas para combinar múltiples archivos CSS. Personalmente, utilizo CSS Compresor online, y me ha dado buenos resultados hasta el momento.
Usa un editor
La mayoría de la gente usa un editor muy básico para editar archivos CSS. Si bien no hay nada de malo en ello, utilizando un editor de CSS puedes hacer que todo el trabajo sea más fácil. Hay un montón de editores diferentes disponibles, tanto gratuitos como de pago, para todas las plataformas.
Mi elección personal es Stylizer, un editor libre para Windows y Mac que proporciona una verdadera previsualización en tiempor real para varios navegadores y muchas características más súper útiles.
Usa herramientas para optimizar y limpiar tu CSS
Hay un montón de herramientas gratuitas disponibles en Internet que te pueden ayudar a producir un mejor código CSS.
Procssor limpia y organiza tu CSS de la forma que desees. Te permite definir la indentación, el estilo de llaves, el espacio en blanco, etc. Perfecto para mantener la coherencia del CSS cuando varias personas lo manipulan.
Clean CSS es una herramienta online para embellecer, minimizar, formatear, o comprimir archivos CSS, así como otros formatos, como HTML o JS.
Como puedes adivinar por su nombre, Unused CSS es una herramienta que rastrea todas tus páginas y elimina aquellas reglas CSS que no se utilizan. Una gran herramienta para mantener tus hojas de estilo limpias y actualizadas.
Minimiza o comprime tus archivos
Una gran manera de optimizar la velocidad de tu sitio web y ahorrar en ancho de banda es minimizar o comprimir los archivos CSS. Minimizar es el acto de eliminar espacios en blanco, comentarios y puntos y comas innecesarios. Una hoja de estilo minimizada es un 80% menos respecto a su tamaño original. Los archivos CSS pueden ser fácilmente minimizados, existen múltiples herramientas online para ello.
Un CSS comprimido con gzip reduce los tiempos de respuesta. Una hoja de estilo comprimida generalmente se reduce en un 70%. Gzip se puede activar añadiendo el siguiente código en el archivo .htaccess de tu servidor:
# BEGIN GZIP <ifmodule mod_deflate.c> AddOutputFilterByType DEFLATE text/text text/html text/plain text/xml text/css application/x-javascript application/javascript </ifmodule> # END GZIP
Fuente: catswhocode.com