ID et nom de classe
Utilisez toujours des noms d'ID et de classe qui reflètent le but et l'utilisation de l'élément, ou d'autres noms courants. Au lieu d’apparences et de noms obscurs.
Les noms spécifiques et reflétant l’objectif de l’élément doivent être préférés car ils sont les plus compréhensibles et les moins susceptibles de changer.
Les noms communs ne sont que des noms alternatifs pour plusieurs éléments. Ils sont identiques parmi leurs éléments frères et n'ont aucune signification particulière.
Distinguez-les de manière à ce qu'ils aient une signification particulière et soient souvent nécessaires comme « aides ».
Bien que la sémantique des noms et identifiants de classe n'ait aucune signification pratique pour l'analyse informatique,
Les noms sémantiques sont généralement le bon choix car ils représentent des informations qui n'imposent pas de limitations expressives.
Non recommandé
.fw-800 {
poids de la police : 800 ;
}
.rouge {
couleur : rouge ;
}recommander
.lourd {
poids de la police : 800 ;
}
.important {
couleur : rouge ;
} Évitement raisonnable des pièces d’identité
Normalement, les identifiants ne doivent pas être appliqués aux styles.
Les styles d'ID ne peuvent pas être réutilisés et vous ne pouvez utiliser un ID qu'une seule fois par page.
La seule utilisation efficace des identifiants consiste à déterminer la position dans une page Web ou dans l’ensemble d’un site.
Néanmoins, vous devriez toujours envisager d'utiliser class au lieu de id, sauf si vous ne l'utilisez qu'une seule fois.
Non recommandé
#contenu .titre {
taille de police : 2em ;
}recommander
.content .titre {
taille de police : 2em ;
} Un autre argument contre l'utilisation des identifiants est que les sélecteurs contenant des identifiants sont très pondérés.
Un sélecteur contenant un seul identifiant a un poids plus élevé qu'un sélecteur contenant 1000 noms de classe, ce qui le rend bizarre.
// Ce sélecteur a un poids plus élevé que le sélecteur suivant #content .title {
couleur : rouge ;
}
// que ce sélecteur !
corps html div.content.news-content .title.content-title.important {
couleur : bleu ;
} Évitez les noms de balises dans les sélecteurs CSS
Lors de la construction de sélecteurs, vous devez utiliser des noms de classe clairs, précis et sémantiques. N'utilisez pas de sélecteurs de balises. C'est plus facile à maintenir si vous ne vous souciez que des noms de vos classes, pas de vos éléments de code.
En pensant dans une perspective de séparation, les balises/sémantiques HTML ne doivent pas être allouées dans la couche de présentation.
Il peut s'agir d'une liste ordonnée qui doit être remplacée par une liste non ordonnée, ou d'un div qui doit être converti en article.
Si vous utilisez uniquement des noms de classe significatifs,
Et sans utiliser de sélecteurs d'éléments, il vous suffit de modifier votre balisage HTML sans modifier votre CSS.
Non recommandé
div.content > header.content-header > h2.title {
taille de police : 2em ;
}recommander
.content > .content-header > .titre {
taille de police : 2em ;
} le plus précis possible
De nombreux développeurs front-end n'utilisent pas de sous-sélecteurs directs lors de l'écriture de chaînes de sélecteurs (remarque : la différence entre les sous-sélecteurs directs et les sélecteurs descendants).
Parfois, cela peut entraîner des problèmes de conception douloureux et parfois cela peut consommer des performances.
Quoi qu’il en soit, c’est une très mauvaise pratique.
Si vous n'écrivez pas un sélecteur très général devant correspondre à la fin du DOM, vous devez toujours envisager des sous-sélecteurs directs.
Considérez le DOM suivant :
<article class="content news-content"> <span class="title">Événement d'actualité</span> <div class="content-body"> <div class="titre contenu-titre"> Regarde ça </div> <p>Ceci est le contenu d'un article d'actualité</p> <div class="teaser"> <div class="title">Achetez ceci</div> <div class="teaser-content">Ouais !</div> </div> </div> </article>
Le CSS suivant sera appliqué aux trois éléments avec la classe title.
Ensuite, pour résoudre les différents styles sous la classe title sous la classe content et la classe title sous la classe teaser, cela nécessitera des sélecteurs plus précis pour réécrire à nouveau leurs styles.
Non recommandé
.content .titre {
taille de police : 2rem ;
}recommander
.content > .titre {
taille de police : 2rem ;
}
.content > .content-body > .titre {
taille de police : 1,5rem ;
}
.content > .content-body > .teaser > .titre {
taille de police : 1,2rem ;
} attribut d'abréviation
CSS fournit diverses propriétés abrégées (telles que la police) qui doivent être utilisées autant que possible, même lorsqu'une seule valeur est définie.
L’utilisation d’attributs abrégés est utile pour l’efficacité et la lisibilité du code.
Non recommandé
code css :
border-top-style : aucun ; famille de polices : palatino, georgia, serif ; taille de police : 100 % ; hauteur de ligne : 1,6 ; rembourrage inférieur : 2em ; remplissage-gauche : 1em ; remplissage à droite : 1em ; rembourrage supérieur : 0 ;
recommander
code css :
bordure supérieure : 0 ; police : 100 %/1,6 palatino, géorgie, empattement ; remplissage : 0 1em 2em ;
0 et unités
Omettez les unités qui suivent la valeur « 0 ». N'utilisez pas d'unités après une valeur 0 à moins qu'il n'y ait une valeur.
Non recommandé
code css :
rembourrage en bas : 0px ; marge : 0em ;
recommander
code css :
rembourrage inférieur : 0 ; marge : 0 ;
Notation hexadécimale
Dans la mesure du possible, utilisez une notation hexadécimale à 3 caractères.
Les valeurs de couleur permettent une représentation comme celle-ci,
La représentation hexadécimale à 3 caractères est plus courte.
Utilisez toujours des nombres hexadécimaux minuscules.
Non recommandé
couleur : #FF33AA ;
recommander
couleur : #f3a ;
Séparateur pour l'ID et le nom de la classe
Utilisez des traits d'union (tirets) pour séparer les mots dans les noms d'ID et de classe. Pour améliorer la compréhension de la leçon, n'utilisez aucun caractère (y compris aucun) autre que des traits d'union (tirets) pour relier les mots et les abréviations dans le sélecteur.
De plus, en standard, le sélecteur d'attribut par défaut reconnaît les traits d'union (tirets) comme séparateurs de mots pour [attribut|=valeur],
Il est donc préférable de s’en tenir aux traits d’union comme séparateurs.
Non recommandé
.démoimage {}
.error_status {} recommander
#identifiant-vidéo {}
.exemple d'annonces {}Astuces
Évitez la détection des agents utilisateurs et les « hacks » CSS – essayez d’abord une approche différente. Les différences de style sont facilement résolues grâce à des solutions de contournement et des hacks grâce à la détection de l'agent utilisateur ou à des filtres CSS spéciaux. Les deux méthodes doivent être considérées comme un dernier recours afin d’obtenir et de maintenir une base de code efficace et gérable. En d’autres termes, détection des agents utilisateurs et piratages à long terme
Cela nuira au projet, car les projets doivent toujours emprunter le chemin de la moindre résistance. Cela dit, la détection des agents utilisateurs et les hacks risquent facilement d’être utilisés trop souvent à l’avenir.
Ordonnance de déclaration
Ceci est un aperçu de l'ordre dans lequel les propriétés CSS sont écrites dans un sélecteur. Ceci est important pour garantir une meilleure lisibilité et numérisation.
À titre de bonne pratique, nous devrions suivre la séquence suivante (qui devrait être dans l’ordre du tableau ci-dessous) :
Propriétés structurelles :
afficher
position, gauche, haut, droite, etc.
débordement, flotteur, clair, etc.
marge, remplissage
Propriétés expressives :
arrière-plan, bordure, etc.
police, texte
Non recommandé
.boîte {
famille de polices : « Arial », sans empattement ;
bordure : 3px solide #ddd ;
gauche : 30 % ;
position : absolue ;
transformation de texte : majuscule ;
couleur d'arrière-plan : #eee ;
à droite : 30 % ;
affichage : bloc ;
taille de police : 1,5rem ;
débordement : caché ;
rembourrage : 1em ;
marge : 1em ;
}recommander
.boîte {
affichage : bloc ;
position : absolue ;
gauche : 30 % ;
à droite : 30 % ;
débordement : caché ;
marge : 1em ;
rembourrage : 1em ;
couleur d'arrière-plan : #eee ;
bordure : 3px solide #ddd ;
famille de polices : « Arial », sans empattement ;
taille de police : 1,5rem ;
transformation de texte : majuscule ;
}fin de la déclaration
Pour garantir la cohérence et l'extensibilité, chaque instruction doit se terminer par un point-virgule et placer chaque instruction sur une nouvelle ligne.
Non recommandé
code css :
.test {
affichage : bloc hauteur : 100px
}recommander
code css :
.test {
affichage : bloc ;
hauteur : 100px ;
}Fin du nom de l'attribut
Utilisez un espace après les deux points dans le nom de la propriété. Pour des raisons de cohérence,
Utilisez toujours un espace entre l'attribut et la valeur (mais pas d'espace entre l'attribut et les deux points).
Non recommandé
code css :
h3 {
poids de la police : gras ;
}recommander
code css :
h3 {
poids de la police : gras ;
}Séparation des sélecteurs et des déclarations
Utilisez toujours une nouvelle ligne pour chaque sélecteur et déclaration de propriété.
Non recommandé
code css :
a: focus, a: actif {
position : relative ; haut : 1px ;
}recommander
code css :
h1,
h2,
h3 {
poids de la police : normal ;
hauteur de ligne : 1,2 ;
}Séparation des règles
Les règles sont toujours séparées par une ligne vide (double nouvelle ligne).
recommander
code css :
html{
arrière-plan : #fff ;
}
corps {
marge : auto ;
largeur : 50 % ;
}Citations CSS
Placez les sélecteurs d'attributs ou les valeurs d'attribut entre guillemets doubles ("") au lieu de guillemets simples (").
N'utilisez pas de guillemets pour les valeurs URI (url()).
Non recommandé
code css :
@import url('//cdn.com/foundation.css');
html{
famille de polices : « open sans », arial, sans-serif ;
}
corps :après {
contenu : « pause » ;
}recommander
code css :
@import url(//cdn.com/foundation.css);
html{
famille de polices : "open sans", arial, sans-serif ;
}
corps :après {
contenu : « pause » ;
}Imbrication du sélecteur (SCSS)
Dans Sass, vous pouvez imbriquer des sélecteurs, ce qui peut rendre le code plus propre et plus lisible. Imbibez tous les sélecteurs, mais essayez d'éviter d'imbriquer les sélecteurs sans aucun contenu.
Si vous devez spécifier certains attributs de style pour les éléments enfants et que l'élément parent n'aura pas d'attributs de style,
Des chaînes de sélection CSS régulières peuvent être utilisées.
Cela évitera que votre script paraisse trop complexe.
Non recommandé
code css :
// Ce n'est pas un bon exemple en n'utilisant pas du tout l'imbrication
.contenu {
affichage : bloc ;
}
.content > .news-article > .title {
taille de police : 1,2 em ;
}Non recommandé
code css :
// Utiliser l'imbrication est préférable mais pas dans tous les cas
// Évitez l'imbrication lorsqu'il n'y a pas d'attributs et utilisez plutôt des chaînes de sélection
.contenu {
affichage : bloc ;
> .news-article {
> .titre {
taille de police : 1,2 em ;
}
}
}recommander
code css :
// Cet exemple adopte la meilleure approche lors de l'imbrication mais utilise des chaînes de sélection lorsque cela est possible
.contenu {
affichage : bloc ;
> .news-article > .title {
taille de police : 1,2 em ;
}
}Introduction de lignes vides dans l'imbrication (SCSS)
Laissez une ligne vide entre les sélecteurs imbriqués et les propriétés CSS.
Non recommandé
code css :
.contenu {
affichage : bloc ;
> .news-article {
couleur d'arrière-plan : #eee ;
> .titre {
taille de police : 1,2 em ;
}
> .article-note de bas de page {
taille de police : 0,8 em ;
}
}
}recommander
code css :
.contenu {
affichage : bloc ;
> .news-article {
couleur d'arrière-plan : #eee ;
> .titre {
taille de police : 1,2 em ;
}
> .article-note de bas de page {
taille de police : 0,8 em ;
}
}
}Requêtes multimédias contextuelles (SCSS)
Dans Sass, vous pouvez également utiliser des requêtes multimédias contextuelles lorsque vous imbriquez vos sélecteurs.
Dans Sass, vous pouvez utiliser des requêtes multimédias à n'importe quel niveau d'imbrication donné.
Le CSS résultant sera transformé afin que la requête multimédia soit rendue sous forme de sélecteur encapsulé.
Cette technologie est très pratique,
Aide à conserver le contexte dans lequel appartient la requête multimédia.
La première approche vous permet d'écrire d'abord vos styles mobiles, puis d'utiliser des requêtes multimédias contextuelles pour fournir des styles de bureau là où vous en avez besoin.
Non recommandé
code css :
// Ce premier exemple mobile ressemble à du CSS simple où toute la structure de SCSS est répétée
// en bas d'une requête multimédia. Ceci est sujet aux erreurs et rend la maintenance plus difficile car ce n'est pas si facile à relier.
// le contenu de la requête multimédia vers le contenu de la partie supérieure (style mobile)
.page de contenu {
taille de police : 1,2rem ;
> .main {
couleur de fond : fumée blanche ;
> .dernières-nouvelles {
rembourrage : 1rem ;
> .news-article {
rembourrage : 1rem ;
> .titre {
taille de police : 2rem ;
}
}
}
> .contenu {
marge supérieure : 2rem ;
rembourrage : 1rem ;
}
}
> .page-footer {
marge supérieure : 2rem ;
taille de police : 1rem ;
}
}
Écran @media et (largeur minimale : 641 px) {
.page de contenu {
taille de police : 1rem ;
> .main > .latest-news > .news-article > .title {
taille de police : 3rem ;
}
> .page-footer {
taille de police : 0,8rem ;
}
}
}recommander
code css :
// C'est le même exemple que ci-dessus mais ici nous utilisons des requêtes média contextuelles afin de mettre les différents styles
// pour différents médias dans le bon contexte.
.page de contenu {
taille de police : 1,2rem ;
Écran @media et (largeur minimale : 641 px) {
taille de police : 1rem ;
}
> .main {
couleur de fond : fumée blanche ;
> .dernières-nouvelles {
rembourrage : 1rem ;
> .news-article {
rembourrage : 1rem ;
> .titre {
taille de police : 2rem ;
Écran @media et (largeur minimale : 641 px) {
taille de police : 3rem ;
}
}
}
}
> .contenu {
marge supérieure : 2rem ;
rembourrage : 1rem ;
}
}
> .page-footer {
marge supérieure : 2rem ;
taille de police : 1rem ;
Écran @media et (largeur minimale : 641 px) {
taille de police : 0,8rem ;
}
}
}Sélecteurs d'ordre imbriqués et parents (SCSS)
Lorsque vous utilisez la fonctionnalité d'imbrication de Sass,
L'important est d'avoir un ordre d'imbrication clair,
Voici l'ordre qu'un bloc SCSS devrait avoir.
Attributs de style du sélecteur courant <br/>Sélecteur de pseudo-classe du sélecteur parent (:first-letter, :hover, :active etc)
Éléments de pseudo-classe (:before et :after)
Style de déclaration du sélecteur parent (.selected, .active, .enlarged etc.)
Utilisez le sous-sélecteur de requête multimédia contextuelle de Sass comme élément final
L'exemple suivant devrait illustrer comment cet ordre permettra d'obtenir une structure claire tout en utilisant le sélecteur parent Sass.
Recommandé
code css :
.produit-teaser {
// 1. Attributs de style
affichage : bloc en ligne ;
rembourrage : 1rem ;
couleur de fond : fumée blanche ;
couleur : gris ;
// 2. Pseudo-sélecteurs avec sélecteur parent
&:survoler {
couleur : noir ;
}
// 3. Pseudo-éléments avec sélecteur parent
&:avant {
contenu: "";
affichage : bloc ;
bordure supérieure : 1px gris uni ;
}
&:après {
contenu: "";
affichage : bloc ;
bordure supérieure : 1px gris uni ;
}
// 4. Classes d'état avec sélecteur parent
&.actif {
couleur de fond : rose ;
couleur : rouge ;
// 4.2. Sélecteur pseudo dans le sélecteur de classe d'état
&:survoler {
couleur : rouge foncé ;
}
}
// 5. Requêtes multimédias contextuelles
Écran @media et (largeur maximale : 640 px) {
affichage : bloc ;
taille de police : 2em ;
}
// 6. Sous-sélecteurs
> .content > .titre {
taille de police : 1,2 em ;
// 6.5. Requêtes multimédias contextuelles dans le sous-sélecteur
Écran @media et (largeur maximale : 640 px) {
espacement des lettres : 0,2 em ;
transformation de texte : majuscule ;
}
}
}