Artículos de Tecnología > Front End

Empezando a organizar tu CSS

Marco Bruno
Marco Bruno

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:

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:

Usando los puntos anteriores como base, nombraremos los elementos del siguiente diseño:cardCourse 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.

tree

¿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:

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:

Artículos de Tecnología > Front End

En Alura encontrarás variados cursos sobre Front End. ¡Comienza ahora!

Trimestral

Descuento de lanzamiento de 30%
  • 153 cursos

    Cursos de Programación, Front End, Data Science, Innovación y Gestión.

  • Videos y actividades 100% en Español
  • Certificado de participación
  • Estudia las 24 horas, los 7 días de la semana
  • Foro para resolver tus dudas
  • Acceso completo a la plataforma por 3 meses
US$19,90
un pago de US$29,90 US$19,90
¡QUIERO EMPEZAR A ESTUDIAR!

Paga en moneda local en los siguientes países

Semestral

Descuento de lanzamiento de 30%
  • 153 cursos

    Cursos de Programación, Front End, Data Science, Innovación y Gestión.

  • Videos y actividades 100% en Español
  • Certificado de participación
  • Estudia las 24 horas, los 7 días de la semana
  • Foro para resolver tus dudas
  • Acceso completo a la plataforma por 6 meses
US$33,90
un pago de US$49,90 US$33,90
¡QUIERO EMPEZAR A ESTUDIAR!

Paga en moneda local en los siguientes países

Acceso a todos
los cursos

Estudia las 24 horas,
dónde y cuándo quieras

Nuevos cursos
cada semana