Est-ce que cela fait vraiment gagner beaucoup de temps pour avoir des règles imbriquées en CSS? (En utilisant HAML ou moins)

Question

À l'heure actuelle, voici comment je coder mon CSS:

CSS normal:

#content { color: white; background: black; } 
#content a { color: yellow; } 
#content p { margin: 0; } 
#content (etc...) 
#contnet (etc...) 
#content (etc...) 

(je toujours inscrire le parent, même si ce ne est pas nécessaire pour que je puisse me orienter dans le stylesheet)

Voici comment cela se fera en SCSS ou MOINS:

#content { 
    color: white; 
    background: black; 
    a { color: yellow; } 
    p { margin: 0em; } 
    (etc....) 
    (etc....) 
    (etc....) 
} 

Quels sont les avantages et les inconvénients d'avoir nid des règles en CSS?

Answer 1

La réponse courte est: la clarté.

Il est beaucoup plus facile de lire le deuxième élément. En outre, il a tendance à vous forcer à mettre tous vos styles liés à la bannière au même endroit au lieu d'être dispersés dans la feuille.

Gagner du temps? Je suppose que cela dépend de vos habitudes de travail. Ça pourrait.

Answer 2

Eh bien, c'est vraiment plus simple à maintenir. Disons que vous êtes un énorme détermination de la portée CSS:

#content el1{} 
#content el2{} 
#content el3{} 
... 
#content el999{} 

... et demain #content changements à # autre-chose. Au lieu de changer 999 entrées, vous n'en changeriez qu'une!

#content{ 
    el1{} 
    ... 
    el999{} 
} 

De plus, il est plus facile à lire et vous oblige à utiliser l'imbrication.

Je vois seulement des choses positives en utilisant des solutions comme less ou scss. Donc, je suppose que cela vous fera gagner du temps à long terme, mais le principal avantage est qu'il produira un code DRYer plus propre.