Simplifier le code

Bonjour de l'abeille!

Lorsqu'on a plusieurs instructions qui se répètent comme ceci:
(ne criez pas pour l'indentation!)

.bandeau_index{width: 100%;height:15%;position:fixed; top:0%;}

.bandeau{width: 100%;height:7%;position:fixed; top:0%; background-color: black;z-index: 1000;} 

.bandeau_contact{width: 100%;height:7%;position:fixed; top:0%; background-color: transparent; } 

.bandeau_auteur{width: 100%;height:7%;position:fixed; top:0%; background-color: #F2F2F2;z-index: 1000;} 

Plutot que de répéter à chaque fois les mêmes choses (width: 100%, top 0%....) est ce qu'on peut avoir les propriétés de base sur une une balise de base, par exemple ici: .bandeau
Puis ne rajouter que les propriétés supplémentaires pour les autres.
Merci pour votre aide.
Modifié par abeille (09 Jul 2016 - 21:05)

Bonjour,

Oui tu peux.

Regarde du côté de la méthologie BEM et OOCSS pour mieux organiser tes CSS.

*Méthodologie*

Oui: http://www.alsacreations.com/article/lire/1641-bonnes-pratiques-en-css-bem-et-oocss.html

Mais ça m'a l'air bigrement compliqué tout ça!
allez, faut que je m'y mette.

Merci pour le conseil

Oui, il vaux mieux préparer un style de base pour toutes les balises prévues pour le site, ensuite un style par contexte que l'on souhaite différencier.

Exemple (OOCSS) :

p { /* les règles de base pour mes balises paragraphe */ }
main p { /* les règles de base des balises paragraphe situées dans la balise main */ }
.footer p { /* les règles de base des balises paragraphe pour le footer */ }
blockquote p { /* les règles de base des balises paragraphe situées dans une balise blockquote */ }

Modifié par Olivier C (10 Jul 2016 - 06:30)

En attendant la maîtrise du OOCSS, tu peux aussi :
Rassembler les propriétés communes et les assigner à tes classes

.bandeau, .bandeau_contact, .bandeau_auteur, .bandeau_index
{width: 100%;position:fixed; top:0%;}

.bandeau_index{height:15%;}
.bandeau{height:7%;background-color: black;z-index: 1000;} 
.bandeau_contact{height:7%;background-color: transparent; } 
.bandeau_auteur{height:7%;background-color: #F2F2F2;z-index: 1000;} 

OU
Rassembler les propriétés communes dans une nouvelle classe ".bandeau_default" pour l'exemple et dans ton code html ajouter ".bandeau_default" en plus de .bandeau_index, .bandeau, .bandeau_****

.bandeau_default{width: 100%;height:15%;position:fixed; top:0%;}
.bandeau_index{width: 100%;height:15%;position:fixed; top:0%;}
.bandeau{ background-color: black;z-index: 1000;} 
.bandeau_contact{background-color: transparent; } 
.bandeau_auteur{background-color: #F2F2F2;z-index: 1000;} 

<div class="bandeau_index"></div>
devient :
<div class="bandeau_default bandeau_index"></div>