Imagen Header Un Blog Mas Jordi Abad

5 consejos para tus CSS

Realmente útiles he encontrado los consejos para escribir el código de tus hojas de estilo CSS que describen en 5 Tips for Organizing your CSS. Para los que prefieran leerlos en castellano, aquí os los muestro y os doy mi opinión acerca de ellos:

  1. Identa las estilos que heredan de otros y escribe las estilo “padre” aunque no contengan información de manera que puedas diferenciar fácilmente las definiciones generales del resto.

    Un ejemplo:

    #main_side {
    width: 392px;
    padding: 0;
    float: right; }

    #main_side #featured_articles {
    background: #fff; }

    #main_side #frontpageads {
    background: #fff;
    margin: 8px 0; }

    Opinión personal: La verdad es que nunca me lo había planteado pero ahora que lo veo tiene toda la lógica. Cuando la hoja de estilos contiene pocos estilos puede parecer que no sea necesario, pero si tiene muchos, creerme, se puede convertir en algo imprescindible si no te quieres volver loco.

  2. Utiliza abreviaciones en la definición de las propiedades de manera que puedes escribirlo lo mismo en una sola línea.

    Un ejemplo:

    margin:5px 0 4px 10px;

    es mucho mejor que:

    margin-top:5px;
    margin-right:0;
    margin-bottom:4px;
    margin-left:10px;

    Opinión personal: Este consejo lo superé ya hace tiempo. Inicialmente, siempre me liaba cuando ponía todos los píxeles en la misma línea sobre cual hacía referencia al superior, al inferior,… Al cabo del tiempo leí un pequeño truco: Tan sólo debes recordar que el primero es el superior y el resto sigue el orden de las agujas del reloj.

  3. Divide la hoja de estilos en secciones. De esta manera, te será más fácil encontrar el estilo que andas buscando en un momento determinado. Las secciones pueden ser: Estilos globales, estructura de la página, cabeceras, menús, contenido principal, pie de página, formularios,…

    Ejemplo:

    /*****************************/
    /******** CABECERA *********/
    /****************************/

    Opinión personal: Cuando estaba buscando un tema para UnBlogMas vi que muchos de los que habían organizaban sus CSS de esta manera lo que indica que es una buena técnica.

  4. Escribir las propiedades comunes de los elementos en las definiciones generales y no las vayas duplicando en las definiciones particulares.

    Un ejemplo: Si sabes que todos los elementos h2 no van a tener ni padding ni margin, definelo en el propio elemento h2 genérico y no en las definiciones de, por ejemplo, los h2 de los menús y los h2 del contenido. Es decir, generaliza.

    Opinión personal: Por experiencia propia, entiendo que ésta es la mejor forma de hacerlo en teoría, pero en la práctica resulta complicado debido al gran número de herencias que pueden existir en una hoja de estilos CSS. Es algo que me gustaría solucionar con el tiempo.

  5. Utiliza una herramienta que te permita comprimir el contenido de tu CSS de manera que ocupe el mínimo espacio posible en disco y, por lo tanto, se pueda descargar más fácilmente.

    Un ejemplo: Puedes probar con CSS Compressor o Online CSS Optimizer

    Opinión personal: No he utilizado nunca una herramienta de este tipo aunque no descarto la posibilidad de hacerlo cuando se me presente la oportunidad.

Y hasta aquí los 5 consejos que espero que os sean útiles y os faciliten el trabajo de escribir vuestras hojas de estilo CSS.


No Comentarios

(required)
(will not be published) (required)
(opitional)

Suscripción

Categorías

Cifras

  • 725 artículos
  • 2,572 comentarios
  • 1,072 usuarios
  • 67 enlaces