Hola! Este es mi primera entrada sobre desarrollo Web.

Para empezar hablaré sobre las prioridades que aplica el navegador a las reglas CSS. En especial, cómo darle prioridad a tus reglas de estilo cuando estás están distribuidas en más de un archivo CSS.

Basicamente, todos los navegadores siguen la siguiente tabla de prioridad al aplicar las hojas de estilo. A más estrellas, mayor prioridad.

★ Reglas predefinidas por el navegador.

★ ★ Las reglas definidas en las hojas CSS utilizadas por tu sitio.

★ ★ ★ Reglas definidas por el usuario.

Resulta que dónde nos matamos los desarrolladores son con las segundas, con las reglas que definimos para nuestros sitios. Te daré dos métodos para saber darle prioridad a tus reglas de estilo.

La primera, y más conocida es: Las reglas que se declaran de último tendrán mayor prioridad. Por ejemplo:

.articulo {
     padding: 8px 16px;
     padding: 0.8rem 1.6rem; /* está reemplazá la regla anterior */
     background-color: white;
}

/* cambiar el color de fondo de .articulo */
.articulo {
     background-color: whiteSmoke;
}

En otras palabras, entre más abajo la regla esté del archivo CSS, mayor prioridad tendrá. La anterior regla no se aplica necesariamente al orden en que declares el uso de las hojas de estilo. Por ejemplo:

    <link rel="stylesheet" href="/css/base.css"  charset="ISO-8859-1">
    <link rel="stylesheet" href="/css/ajustes.css"  charset="ISO-8859-1">

En el caso anterior, el hecho que ajustes.css esté luego de base.css, no significa que ajustes.css tenga mayor prioridad que base.css. En realidad será casi aleatorio. El último en ser descargado por el navegador será el de mayor prioridad.

Por ejemplo, estoy desarrollando una aplicación HTML usando Bootstrap. Pero para darle mis propios toques no debería modificar los archivos originales de Bootstrap. Si lo hago, se me complicarían mucho aplicar actualizaciones futuras del framework. Así que utilizo un archivo CSS separado dónde indico mis ajustes a las reglas de Bootstrap.

Es ahí dónde entra en juego el segundo método para darle prioridad a tus reglas. Las reglas más específicas tienen mayor prioridad que aquellas que son más generales. Por ejemplo:

div p {
    background-color: whiteSmoke;
}

p {
    background-color: white;
}

La primera regla es más específica, abarca “cualquier parráfo dentro de un contenedor” y no “cualquier parráfo”. Así que la segunda regla no afectará a la primera, porque ella es más específica.

Entonces, ¿Cómo aplicar esté método al caso anterior de base.css y ajustes.css? Suponé que base.css declara las siguientes reglas:

.articulos {
    padding: 32px;
    background-color: white;
    font-size: 16px;
    line-height: 28px;
}

.articulo {
    border-bottom: #ddd solid 1px;
    padding: 48px 32px;
}

Para que ajustes.css pueda funcionar sin depender del elemento aleatorio que te mencioné, hacemos las reglas más específicas. Así:

/* cambiamos el padding y font-size */
body .articulos {
    padding: 16px;
    font-size: 12px;
    line-height: 18px;
}

body .articulo {
    padding: 0px;
}

El truco es simple. Cuando quieras hacer ajustes en un archivo CSS a reglas declardas en otro archivo CSS, simplemente anteponé body a la regla que hace el ajuste. También podes usar anteponer html body .estilo si tienes más de dos hojas que puedan chocar.