Bonjour,
Depuis peu, je me suis remis au CSS mais j’ai plusieurs questions concernant les bonnes pratiques. Le sujet est assez lourd mais je pense qu’il est possible de donner une réponse brèves à chaque fois
Mêmes propriétés pour plusieurs balises
Est-il conseillé de multiplier le nombre de propriétés ou le nombres de balises ? Quand il n’y a qu’une propriété ajouté à une balise, je trouve ça judicieux mais quand les deux balises ayant une propriété en commun ont beaucoup de propriétés, j’y vois moins d’intérêt.
Multiplication du nombre des propriétés
1 2 3 4 5 6 7 8 | h1 { font-size: 1.5rem; color: red; } a { color: red; } |
Multiplication du nombre des balises
1 2 3 4 5 6 7 | h1, a { color: red; } h1 { font-size: 1.5rem; } |
Propriétés communes à toutes les balises
Faut-il ajouter les arguments communs à toutes les balises la balise <html>
, la balise <body>
, une <div>
wrapper ou à chaque balise concernée ?
Mise en page via flex
Est-ce qu’il faut que <body>
ou une <div>
wrapper étant de type flex et gérer ensuite avec les « sous-propriétés » de flex ? Ou est-ce qu’il vaut mieux dimensionner chaque bloque (en px ou en vw par exemple) et utiliser le type flex quand il y a besoin. Par exemple, pour mettre une colonne à gauche du contenu principal, ajouté une balise <div>
et utiliser flex à ce moment là.
Pour la première possibilité, j’ai cherché un exemple sur Internet et j’ai trouvé un sur un blog (vers la fin du billet).
Aussi pour la première possibilité, la question précédente se pose aussi concernant l’endroit où écrire display: flex;
.
Couleur du fond de la page
Faut-il déclarer une couleur par défaut dans une des balises évoquées dans Propriétés communes à toutes les balises ? Où est-ce qu’il faut donner une couleur à chaque bloc ?
Avec une couleur par défaut
1 2 3 4 5 6 7 8 9 10 11 | html { /* ou body ou div wrapper */ background-color: red; } header, footer { background-color: blue; } aside { background-color: green; } |
Sans une couleur par défaut
1 2 3 4 5 6 7 8 9 10 11 | header, footer { background-color: blue; } main { background-color: red; } aside { background-color: green; } |
Dimensions d’un bloc
Est-il correct de définir la dimension d’un bloc en indiquant seulement une marge intérieur (padding
) où est-ce qu’il vaut mieux faire l’inverse où la marge serait là d’elle même suite à la dimension du bloc. En fait, j’utilise padding pour centrer le contenu dans le conteneur — en particulier sur l’axe vertical.
Unité des marges
Sans utiliser de media-queries, j’utilise la fonction calc
avec une addition de px et de vw (calc(Apx + Bvw)
) pour les marges sur l’axe horizontale et px pour les marges sur l’axe vertical. Dans le cas où il y a des media queries, j’utilise l’unité px pour les deux axes.