Les styles SASS ont priorité sur les requêtes multimédias

Question

J'essaie d'utiliser des requêtes multimédias pour remplacer les styles des appareils de bureau, mais cela ne semble pas fonctionner. J'ai défini la couleur de la bordure sur l'élément h2 et fait un test pour mieux visualiser le problème. Comme vous pouvez le voir, la couleur de la bordure de h2 est définie sur jaune.

C'est mon style SASS :

.hero{
    width: 100%;
    position: relative;
    background-color: $orange-color;
    background-image: url("../../../src/assets/images/gastro/gasto-item-chicken-buger.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    z-index: 0;
    .hero_content{ 
        flex-grow: 1;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        transform: translateY(-100px);
        z-index: 2;
        .container{
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            .box{
                padding: 36px;
                display: flex;
                flex-wrap: wrap;
                text-align: center;
                justify-content: center;
                width: 50%;
                h2{
                    border: 2px solid yellow;
                    color: $c-white;
                    font-family: "CustomFont";
                    font-size: 4rem;
                    line-height: 1.1;
                    padding-bottom: 18px;
                    text-shadow: .0625rem .0625rem #000;
                    span{
                        color: $button-color;
                    }
                }
                h3{ 
                    color: $c-white;
                    font-family: $ff-title;
                    text-shadow: .0625rem .0625rem #000;
                    font-size: 2rem      
                }
            } 
        }
   }

}

Voici la requête média en bas de la même page. Comme vous pouvez le voir, la couleur de la bordure est définie sur rouge, mais elle affiche toujours une couleur de bordure jaune alors qu'elle devrait être une couleur de bordure rouge. Il n'apparaît en rouge que si je supprime la couleur de bordure jaune dans le style universel.

@media (min-width: 768px){    
    .hero{    
        .hero_content{
            .box{
                h2{
                    border: 2px solid red;
                    font-size: 4rem;
                }
                h3{
                    font-size: 2rem;
                }
            }
        } 
    }
}

Answer 1

Le problème est que votre CSS principal a effectivement un sélecteur plus spécifique

.hero .hero_content .container .box h2 { ... }

Ce que vous essayez de couvrir dans votre requête médiatique est

.hero .hero_content .box h2 { ... }

Donc le premier gagne : il y a quatre sélecteurs de classe dans le premier, alors qu'il n'y en a que trois dans le second.

D'après mon expérience personnelle, un vrai côté négatif des choses comme SCSS ou LESS est qu'elles peuvent vous conduire dans des pièges comme celui-ci. CSS est un outil très difficile à « apprivoiser » et à contrôler.

Il existe quelques astuces pour contourner ce problème, comme

.hero.hero.hero .hero_content .box h2 { ... }

Pour les règles conditionnelles des médias. Cela vous mettra certainement mal à l’aise. Les sélecteurs complexes sont un piège car une fois que vous démarrez, vous êtes condamné à y rester pour toujours.