Empezando a organizar tu CSS

Ya debes haber abierto un CSS con 2000 líneas con el nombre styles.css, dentro de una carpeta llamada css. Este es un buen momento para hacerse un tiempo para estudiar uno de los modelos de arquitectura CSS:

• DRY CSS

• SMACSS

• BEM

• OOCSS

• Atomic Design

Vale la pena leer los cinco modelos de arquitectura y luego definir con su equipo la mejor manera de organizar su CSS. Esto fue lo que hicimos en Caelum, antes de comenzar a desarrollar la parte interna de nuestra plataforma de cursos en línea, Alura.

Después de leer las cinco arquitecturas CSS, el equipo de desarrolladores (Back end y Front end) se reunió durante 3 días durante una hora diaria enfocada en solucionar los siguientes puntos:

Cómo definir un buen nombre para una class?

Durante la discusión decidimos tomar las siguientes precauciones para definir el nombre de una class:

• Evitar nombre demasiado genérico, como title;

• Evitar nombre unido a tag, como input Text;

• No dar nombre con asociación a una propiedad CSS, como floatLeft;

• No dar nombre que describa el valor de una propiedad CSS, como colorBlue;

• Utilizar el guión para identificar al hijo leyendo solo el nombre de la class, cómo padre-hijo

• Utilizar el guión bajo para agregar un modificador, cómo padre-hijo_modificador;

• El nombre de una class tiene que empezar con una analogía con el mundo real y la segunda parte cuando sea necesario, representar el contenido del elemento, por ejemplo:cardCourse.

Usando los puntos anteriores como base, nombraremos los elementos del siguiente diseño: Introducción a HTML y CSS Javascript Avanzando en HTML y CSS

<section class="cardCourse"> 
    <img class="cardCourse-icon" src="iconHtmlCss.png"> 
    <h3 class="cardCourse-title">Avanzado a HTML y CSS</h3>  

    <div class="progressBar">  
        <span class="prgressBar-value">50%</span>  
        <progressbar class="progressBar-bar">   
            Tu progreso es del 50%.  
        </progressbar> 
    </div>
</section>  

¿Cómo organizar archivos CSS?

Al equipo le gustó la organización creada por BEM. Siguiendo el ejemplo del diseño presentado anteriormente, creamos una carpeta css, dentro de ella creamos otra carpeta con el nombre block.

Todos los selectores de los bloques cardCourse y progressBar, permanecer dentro de un archivo con el nombre cardCourse.css y progressBar.css, que se guarda dentro de la carpeta block. Y cualquier archivo CSS que no es un bloque está en la raíz de la carpeta css, como el famoso archivo reset.css.

Cuando tenemos un CSS que se usará solamente en una página, lo colocamos dentro de la carpeta pages.

¿Cómo escribir selectores sin muchos problemas de especificidad?

Tener selectores con valores de especificidad altos encarece el mantenimiento de CSS.

La mejor forma de solucionar este problema es utilizar selectores de bajo valor y especificidad. Para escribir selectores con un valor de especificidad bajo, comprendamos mejor cómo funciona esto de especificidad:

Valores de especificidad de los selectores CSS

ID #CARD |CLASS .CARDCOURSE PSEUDO-CLASS :FIRST-CHILD | TAG SECTION | SELECTORES AVANZADOS > + ~ E :NOT()

100 | 10 | 1 | 0

Cada selector CSS tiene un valor como se muestra en la tabla anterior. Para entenderlo un poco mejor veamos algunos ejemplos:

/ * Valor de especificidad: 100 * /

    #tarjeta { 

    ...

    } 

/ * Valor de especificidad: 10 * /

    .cardCourse { 

    ...

    } 

/ * Valor de especificidad: 1 * /

    sección { 

    ...

    } 

/ * Valor de especificidad: 10 + 10 = 20 * /

    .cardCourse .cardCourse-title { 

    ...

    } 

/ * Valor de especificidad: 10 + 10 + 1 = 21 * /

    .cardCourse h3.cardCourse-title { 

    ...

    } 

/ * Valor de especificidad: 10 + 10 = 20 * /

    .cardCourse: nth-of-type (2n) { 

    ...

    }

Para no tener demasiados problemas con valores de especificidad elevados, optamos por seguir las siguientes reglas:

• El orden de selectores en el archivo CSS debe respetar el orden de HTML;

• Evitar selectores con id y tag;

• Evitar el uso de selectores avanzados y pseudo-class.

Con técnicas como esta, logramos hacer nuestro CSS en Alura mucho más modular y fácil de mantener. La productividad del equipo aumentó drásticamente. Y tú, ¿cómo haces tu trabajo? ¿Tiene otros consejos sobre cómo mejorar la forma que organizamos nuestro CSS?

Puedes leer también:

• Cómo organizar el CSS en tu proyecto
• Nombres de clases en CSS
• ¡Organiza tu código Javascript de una manera fácil!