Structures de code CSS

Question

Je me demande quand et comment j'ai besoin de classer mes attributs dupliqués. Considérer pour la lecture, la performance du code, les inconvénients et les avantages entre la structure. Disons que j'ai deux code CSS:

1er code:

.a { 
    text-align: center; 
    font-size: 1em; 
    background-color: red; 
} 

.b { 
    text-align: center; 
    font-size: 1em; 
    background-color: green; 
} 

.c { 
    text-align: center; 
    font-size: 2em; 
    background-color: blue; 
} 

.d { 
    background-color: blue; 
} 

2ème code:

.a, 
.b, 
.c { 
    text-align: center; 
} 

.a, 
.b { 
    font-size: 1em; 
} 

.c, 
.d { 
    background-color: blue; 
} 

.a { 
    background-color: red; 
} 

.a { 
    background-color: green; 
} 

.c { 
    font-size: 2em; 
} 

Alors quel est le meilleur gars, Merci beaucoup avant :)

Answer 1

En ce qui concerne la lisibilité et la structure, à mon avis cela dépend de la complexité et de l'organisation de votre application.

La pratique courante existe pour organiser votre code CSS, ceci est particulièrement utile lorsque vous travaillez dans de grandes applications et avec plusieurs développeurs impliqués.

BEM

Block, Element, Modificateur - est une méthode de nommage. C'est un moyen intelligent de nommer vos classes donnant plus de sens et de lisibilité.

Plus d'infos ici:

https://css-tricks.com/bem-101/

http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/

SMACSS

Stands pour Architecture évolutive et modulaire pour CSS, et est plus un guide de style pour votre CSS.

Plus d'infos ici:

https://smacss.com/