Questions sur des bonnes pratiques en CSS

a marqué ce sujet comme résolu.

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.

+0 -0

Salut,

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.

Moi, j’évite vraiment de faire ça personellement. Généralement, je trouve que ça ne fait pas joli du tout d’additionner les vw avec une unité fixe comme les px, em et compagnie, puis à mon avis c’est le genre de pratique qui a tendance à aboutir sur des calculs moches, bien trop complexes et peu fiables. Puis je ne vois pas trop pourquoi je n’utiliserait pas de media-queries.

Je trouve que ça se gère plutôt bien avec juste des padding et des margin utilisés astucieusement avec des dimensions en em ou px. Puis il y a le nouveau grid layout.

+0 -0

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.

Moi, j’évite vraiment de faire ça personellement. Généralement, je trouve que ça ne fait pas joli du tout d’additionner les vw avec une unité fixe comme les px, em et compagnie, puis à mon avis c’est le genre de pratique qui a tendance à aboutir sur des calculs moches, bien trop complexes et peu fiables. Puis je ne vois pas trop pourquoi je n’utiliserait pas de media-queries.

Je trouve que ça se gère plutôt bien avec juste des padding et des margin utilisés astucieusement avec des dimensions en em ou px. Puis il y a le nouveau grid layout.

motet-a

Attention quand vous utilisez des unités dynamiques (vw ou vh) sur du texte par contre, ça peut poser des problèmes d’accessiblité (blocage du zoom) : https://twitter.com/SaraSoueidan/status/927982185319161856

+0 -0

Mêmes propriétés pour plusieurs balises

Choisi le premier exemple si c’est une coïncidence, ça te permettra de faire des changements plus vite. Après si tu le factorise peut-être la solution 2, mais je me demande si tu gagnes beaucoup de temps de chargement en faisant ça.

Choisi le deuxième exemple si la convergence est voulue mais avec sass/lesscss, on a tendance à utiliser le premier exemple avec des variables sauf si les sélecteurs CSS sont assez long.

Propriétés communes à toutes les balises

Sur internet, tu peux trouver un css qui reset chaque convergence des navigateurs pour avoir un rendu similaire, grâce à des règles par défaut.

Couleur par défaut

Le fond est transparent par défaut, si tu souhaites une couleur de fond, déclare là. Je ne comprends pas ton exemple.

Dimension d’un bloc

En css pour centrer un élément, la tendance est d’utiliser son margin et le mettre en auto ainsi le border et le background ne font pas toute la largeur de page.

Mais si tu souhaites atteindre une taille précise pour un élément, utilise : width + padding , si le contenu n’a pas de width ou s’il s’agit de texte/input car chacun des navigateurs peut retourner une taille légèrement différente. Ou tu peux te manger les fameux espaces invisibles entre deux éléments mais flex permet d’éviter ça.

Unité des marges

Si tu veux être sûr que l’élément ait une valeur par défaut si calc n’est pas pris en compte par un vieux navigateur, tu peux déclarer une largeur fixe avant d’utiliser calc.

1
2
3
4
.leftmenu {
   width:90px; /* ou 87.5% = 90% - 20 / 900 */
   width:calc(90% - 20px);
}

J’ai pris 900px en supposant que ton media querie commence à s’appliquer au taille inférieure à 900px. Donc au dessus de 900px, 20px représente au maximum 2.5%. Mais sur un écran de 1440px ce 2.5% devient ~40px.

+0 -0

Unité des marges

J’utilise dans le plus de cas possible les medias queries. Je cherchais une unité qui pourrait être utile dans les situations sans ces dernières. La meilleure solution que j’ai trouvé étant les additions de vh et de px. Cela permet de ne pas avoir une marge quasiment inexistante dans les cas où la fenêtre est très petite.

Merci A-312 pour l’astuce. Je n’y avais pas pensé. Sinon, viki53, je n’utilise que px et rem pour le texte. motet-a, je ne me suis pas encore mis à utiliser grid-layout car je ne sais pas si c’est déjà suffisamment compatible.

Mêmes propriétés pour plusieurs balises

J’ai toujours entendu qu’il valait mieux factoriser. Je ne le fais pas car je trouve ça trop long de factoriser dès qu’on créée deux fois la même valeur pour le même argument. Ensuite, je trouve ça un peu lourd de créer un nouveau style juste pour un argument.

Il y a aussi une autre technique mais je ne sais pas si ça pourrait être une bonne chose. J’ai pensé à donner plusieurs styles au même objet. Exemple :

Plusieurs classes pour la même balise

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
.bloc {
    border: 3px dotted #ff0000;
}

.menu {
    font-family: Comic Sans MS;
    font-size: 12px;
}

.contenu {
    font-family: Arial;
    font-size: 14px;
}

1
2
<nav class="bloc menu"></nav>
<section class="bloc contenu"></section>

Une seule classe par balise

1
2
3
4
5
.contenu {
    border: 3px dotted #ff0000;
    font-family: Arial;
    font-size: 14px;
}

1
2
<nav class="menu"></nav>
<section class="contenu"></section>

Propriétés communes à toutes les balises

Je sais qu’il y a par exemple normalize.css mais je ne parlais de donner la même apparence quelque soit le moteur de rendu. Par exemple, si je veux que tous les textes de mon site soit en Arial, je devrai plutôt faire quoi entre ces trois exemples :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
/* Exemple 1 */
html {
    font-family: Arial;
}

/* Exemple 2 */
body {
    font-family: Arial;
}

/* Exemple 3 */
#wrapper { /* balise <div> */
    font-family: Arial;
}

D’ailleurs, il en est de même pour déclarer display: flex ou display: grid. Vaut-il mieux le faire dans html, body, ou div#wrapper.

Dans mon cas, que ce soit pour display ou font-family, je le fait à body. Tant qu’à faire, je me permets de poser une dernière questions par rapport aux propriétés communes. Si dans un conteneur donné, tous ses contenus ont la même police, vaut-il mieux donner la valeur de cette police à chaque balise fille ou seulement à la balise mère ?

Couleur par défaut

Désolé si je n’ai pas été assez clair. Je pensais que ça le serait suffisamment grâce à l’exemple. Je vais faire l’analogie avec un système de calque (le calque 1 étant le calque le plus en dessous).

Avec une couleur par défaut

N° du calque Balise Couleur
1 <body> Rouge
1 <main> Transparent
2 <header>, footer Bleu
2 <aside> Vert

Sans couleur par défaut

N° du calque Balise Couleur
1 <body> Transparent
2 <main> Rouge
2 <header>, footer Bleu
2 <aside> Vert

Dimension d’un bloc

Merci pour les informations. J’avais en effet pas pensé qu’on utilisait (moi inclus) `margin: auto pour centrer une page entière.

Je vais prendre une habitude que j’ai pour <header>. En général, je ne définis pas une haute. En fait, elle se définit d’elle même en fonction de la hauteur du logo additionné aux marges supérieur et inférieur.

En fait, je me demande ce qui est conseillé et non pour que ça fonctionne. Un peu comme <header> et <div id="header"> qui font la même chose mais la première est la meilleure façon de faire. Ce que je viens de dire peut être étendu à mes autres questions.

+0 -0

@Mêmes propriétés pour plusieurs balises : on peut multiplier les classes en effet (c’est d’ailleurs pour ça qu’on a tendance à utiliser bootstrap).

@Propriétés communes à toutes les balises : font-family est hérité du reste des éléments enfants sauf exception. Normalement les navigateurs ont le même comportement la dessus.

@Couleur par défaut : Je viens de comprendre en relisant l’exemple. Je te conseille de mettre la couleur de fond au HTML ou BODY pour éviter tout problème.

@Dimension d’un bloc : <header> c’est du HTML5, <div id="header"> c’est avant.

+0 -0

Clairement non. <header> c’est de la sémantique, <div id="header"> c’est un id utile pour le CSS et/ou le JS. Rien à voir, les deux sont valides mais ont des rôles et usages complètement différents.

Bon, je suis d’accord pour le petit côté sémantique de <header> mais quand-même, en JS, de nos jours, entre document.querySelector('header') et document.querySelector('#header')… C’est un peu du pareil au même.

Pour moi, la vraie différence c’est surtout que l’ID doit être unique dans tout le document, alors qu’un même document peut contenir plusieurs <header>.

+0 -0

Le petit côté dont tu parles n’est pas si petit étant donné que header est fait pour être utilisé plusieurs fois, pour chaque section de la page. Alors que #header ne le sera qu’une fois (bien souvent pour l’entête de la page).

C’est pas une petite différence, vu qu’on les utilisera pas pour la même chose ni au même endroit (il est d’ailleurs pas très conseillé d’utiliser la balise header pour une topbar classique, vu que c’est généralement sémantiquement plus souvent un nav).

Évite de semer de la confusion, le HTML et le CSS sont déjà assez compliqués à maîtriser pour les experts, alors autant épargner ces erreurs aux débutants.

+0 -0

La comparaison entre <header> et <div id=header> était un exemple permettant d’illustrer très simplement (et naïvement) la différence entre deux choses qui peuvent fonctionner mais qu’une des deux peut être plus adaptée selon le contexte.

Chaque notion où j’ai une question est indiqué par un titre.

+0 -0
Connectez-vous pour pouvoir poster un message.
Connexion

Pas encore membre ?

Créez un compte en une minute pour profiter pleinement de toutes les fonctionnalités de Zeste de Savoir. Ici, tout est gratuit et sans publicité.
Créer un compte