2

Entiendo menos que más la sintaxis css y cómo aplicar estilos a divs y demás (muy básicos), pero me resulta un poco difícil de entender "por qué" en ocasiones se aplican ciertos estilos y otras no. Sé que usando un framework ya escrito debería simplificarlo pero cuando intento "modificar" esos estilos y añadir o cambiar cosas para un elemento en particular en ocasiones funciona y otras no.

Mi objetivo para no modificar el estilo ya existente global seria "extender" ese estilo añadiendo o cambiando algunos atributos.

Por ejemplo:

<div class="column"></div> <-- Este seria es estilo por defecto

<div class="column paddingvertical"></div> <-- Este seria el mismo pero con un padding diferente

El codigo css (por ejemplo) seria:

paddingvertical {
padding-top: 3em;
}

...y este añadido a un .sass donde he cambiado las variables oportunas al cual tiene importado bulma como última linea.

He probado poniendo un . delante del estilo css, probado .column .paddingvertical {, probado poniendo el estilo después de importar bulma en lugar de antes y algunas cosas más que ya no recuerdo, pero no consigo que se refleje el cambio en el div. Entiendo que el estilo column me está sobrescribiendo el mio, pero me cuesta entender cual seria la manera correcta de añadir más estilo a uno ya existente de forma local.

Sin embargo este estilo antes de importar bulma...

.hero img {
transform: rotate(22deg)
}

...si que me gira la imagen que ponga en el hero, lo cual es todavía más confuso.

Está claro que tengo un problema conceptual, por lo que no busco solución a "este" problema sino una norma o regla lógica que me permita comprender donde está el problema y solucionar este y los que me surjan en adelante.

6
  • Lee sobre especificidad, mientras más específica es una declaración, mayor peso tiene a la hora de aplicar. Si vas a modificar estilos provenientes de otra fuente, lo ideal es cargar primero ese archivo y después el que usas para "personalizar".
    – Triby
    el 9 feb. 2021 a las 16:13
  • He estado buscando en google y mirado con anterioridad esa pagina que dices pero o soy muy obtuso o me parece demasiado academico y no consigo "entender" el concepto. Seguiré mirando, gracias :) el 9 feb. 2021 a las 16:27
  • 1
    Has probado usar el !important en el estilo. Debes tener 2 cosas. primero que el css de dicho framework se cargue primero y segundo que tenga tus estilos el !important. Prueba así a ver si te funciona como esperas
    – jGomez
    el 9 feb. 2021 a las 16:43
  • Si, de esa forma si que funciona (muchas gracias), pero por lo que he estado leyendo se debería de evitar usar !important y ser más especifico, ¿no? Esa es la respuesta que ando buscando el 9 feb. 2021 a las 16:46
  • No uses !important, espera unos minutos, estoy preparando una respuesta.
    – Triby
    el 9 feb. 2021 a las 16:51

1 respuesta 1

3

Lo primero es conocer cómo se deben declarar las reglas en css:

  • Las etiquetas se declaran por nombre, sin signos:
    • div {} Asignará el estilo a todos los elementos con esta etiqueta
    • p.una-clase {} Aplica a todos los párrafos que tengan la clase <p class="una-clase"></p>
  • Para definir reglas por ID se antepone #:
    • #boton {} Aplica a un elemento con la ID especificada <button id="button"></button>
  • Para definir reglas por clase se antepone .:
    • .pad-vertical {} Aplica a todos los elementos que tengan la clase, por ejemplo: <li class="pad-vertical"></li> o <section class="pad-vertical"></section>

Ahora, lo que te comenté en cuanto a orden de declaración y especificidad, se aclara con algunos ejemplos y comentarios de porque sí o porque no aplican:

/* No aplica porque se declaró antes de .column y no es muy específica */
.paddingv1{
    background:#8c8;
    padding:30px 10px;
}

/* Aplica porque es más específica, incluyendo las dos clases deseadas */
.column.paddingv2{
    background:#8c8;
    padding:30px 10px;
}

.column {
    display:block;
    background:#ccc;
    margin:10px;
    padding:10px;
}

/* Aplica porque se declaró después de .column */
.paddingv3{
    background:#88c;
    padding:30px 10px;
}
<div class="column">Estilo por defecto</div>

<div class="column paddingv1">Estilo sobreescrito, no aplica</div>

<div class="column paddingv2">Estilo con mayor especificidad</div>

<div class="column paddingv3">Estilo declarado después de .column</div>

Entonces, para modificar estilos de otra fuente (Bulma, por ejemplo) necesitas cargar primero los estilos originales y después los tuyos:

 <link href="bulma.css" rel="stylesheet">
 <link href="mis-estilos.css" rel="stylesheet">

Cuando algo no funcione, solo asegúrate de ser específico en tus declaraciones para que tengan mayor importancia y evitas el uso de !important.

1
  • Muchas gracias, mejor explicado :) el 10 feb. 2021 a las 9:44

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.