Comment écrire du CSS

Il est très important que le code CSS soit clair et clair. Cette partie est l'introduction principale.

Habituellement, nous ne référençons qu'un seul CSS par page, mais pour les projets plus importants, nous devons classer les fichiers CSS.

Selon la nature et le but du CSS, nous pouvons diviser les fichiers CSS en « styles publics », « styles spéciaux » et « styles de skin », et les référencer dans cet ordre. Alors, quels sont-ils ?

Le style public est la partie la plus importante. Pour les petits projets, nous n'introduisons qu'un seul CSS. Le style de ce CSS est le style public, qui comprend généralement : "Réinitialiser et définir les valeurs par défaut des étiquettes" ( pour éliminer les différences entre les différents navigateurs), "appel unifié des images d'arrière-plan et suppression des flottants ou d'autres styles longs qui doivent être traités uniformément (afin qu'il ne soit pas nécessaire de les traiter séparément)", "mise en page universelle du site Web", "universel module" et ses extensions", "Composants et leurs extensions", "Style fonctionnel", "Style d'habillage".

Le style spécial consiste à introduire indépendamment un style si spécial dans une colonne avec un taux de maintenance élevé ou une page qui est significativement différente de l'ensemble du site Web pour faciliter notre maintenance.

Le style de peau signifie que le produit a besoin de la fonction de changement de peau, nous devons donc extraire la couleur, l'arrière-plan, etc. et les mettre ici pour une gestion facile.

Nous divisons les fichiers CSS en styles publics, styles spéciaux et styles d'habillage. Alors, comment classer les fichiers CSS en interne ? (Cette partie est au centre)

Réinitialisation et code CSS par défaut. Il s'agit d'éliminer les différences entre les styles par défaut et les navigateurs, et de définir le style initial de certaines balises afin de réduire la duplication du travail ultérieurement. Vous pouvez le définir en fonction des besoins de votre propre site Web, ou vous pouvez utiliser un code d'initialisation écrit par d'autres, tel que le code d'initialisation CSS fourni par les ingénieurs Yahoo. Cette partie du code est placée en haut du CSS.

Code CSS traité uniformément. Ici, vous pouvez appeler uniformément l'image d'arrière-plan et effacer le flottant (en faisant référence au contenu clair dans la mise en page, le module et le document original plus polyvalents). En fait, le code d'initialisation CSS fourni par les ingénieurs Yahoo inclut le code CSS pour effacer le flottant). . Cette partie du code est placée sous le code CSS de réinitialisation et par défaut.

Mise en page (grille) : Nous divisons la page en plusieurs grands blocs, comprenant généralement l'en-tête, le corps, la colonne principale, la colonne latérale, la queue, etc. Couramment utilisé!

Module : un ensemble sémantique plus vaste et réutilisable. Tels que la navigation, la connexion, l'inscription, la liste, les commentaires, la recherche, etc. Couramment utilisé!

Composant (unité) : Il s'agit généralement d'un individu relativement petit qui ne peut pas être subdivisé et qui est réutilisé dans divers modules, tels que des boutons, des zones de saisie, des chargements, des graphiques, etc. Couramment utilisé!

Fonction : afin de faciliter l'utilisation de certains styles couramment utilisés, nous séparons ces styles très utilisés et les utilisons selon les besoins. Habituellement, ces sélecteurs ont des performances de style fixes, telles que la suppression des flotteurs. Pas couramment utilisé, pas abusé !

Skin : il est nécessaire pour les sites Web qui changent de peau pour extraire le style de type de peau. Il ne peut pas être utilisé de manière abusive pour les sites Web qui ne changent pas de peau et n'est pas couramment utilisé.

Statut : certains styles de classe de statut. Pas couramment utilisé.

Règles de dénomination CSS

Important : utilisez les sélecteurs de classe, supprimez les sélecteurs d'ID. Étant donné que l'ID est unique dans une page, si vous utilisez l'ID comme sélecteur pour écrire du CSS, il ne peut pas être réutilisé. L'avantage de la classe est la réutilisabilité et le degré de confidentialité n'est pas élevé. Par conséquent, je choisis généralement l'ID en HTML pour JavaScript, mais j'utilise uniquement la classe en CSS, pas du tout un ID. Cela sépare en fait les performances et le comportement au lieu de les mélanger.

Alors comment utiliser le sélecteur descendant ? Nous sommes d'accord sur le fait que les sélecteurs de classe qui ne sont pas préfixés par une seule lettre + "-" et qui ont une longueur supérieure ou égale à 2 sont des sélecteurs descendants. Par exemple : .g-date .u-rightArrow{ float: right;} Ceci est inapproprié, nous pouvons l'écrire directement sous la forme .u-rightArrow{ float: right;}. Et une balise sémantique peut aussi être un sélecteur de descendants. Par exemple.m-list li{}. La phrase précédente signifie que les balises qui ne sont pas sémantiques ne conviennent pas comme sélecteurs descendants, comme : .m-list div{} Une telle écriture est susceptible de provoquer une pollution.

Format du code CSS

1 Les sélecteurs, attributs et valeurs sont tous en minuscules.

Ceci est très critique : selon la spécification xhtml, tous les attributs et valeurs des balises doivent être en minuscules, et nous savons que xhtml est plus standard, il est donc préférable de le suivre, donc le sélecteur doit être en minuscule. C'est très nécessaire. Dans ce cas, nous ne pouvons pas utiliser la casse camel pour écrire les noms de classe. Par exemple, class="u-leftArrow" est en fait irrégulier. Il est préférable d'écrire class="u-left_arrow", qui peut également exprimer la même signification.

2. Complétez une définition de sélecteur sur une seule ligne.

Avantages : sélecteurs faciles à trouver et à lire, faciles à insérer et à modifier de nouveaux sélecteurs, et faciles à identifier les modules, etc. Plus important encore, les espaces en excès peuvent être supprimés pour rendre le code compact et réduire les sauts de ligne. Imaginez, si chaque ligne n'a qu'un seul nom d'attribut et une seule valeur d'attribut, alors pour un grand projet, il sera difficile de trouver et de lire le sélecteur. Si vous écrivez un sélecteur sur une seule ligne, il peut être raccourci à 1/6. 1/10, cela reste très objectif.

3. La dernière valeur doit également se terminer par un point-virgule.

En fait, le point-virgule peut être omis pour la valeur avant la fin de l'accolade, mais cela entraînerait des erreurs inutiles et des problèmes dans les travaux de modification, d'ajout et de maintenance. Par exemple, si vous ajoutez un attribut à la fin, si vous n'avez pas ajouté de point-virgule à la fin auparavant, vous devez alors ajouter un point-virgule avant l'attribut nouvellement ajouté, sinon une erreur se produira, par exemple, dans l'un de mes. articles de blog, j'ai résolu le problème de l'affichage des polices chinoises sous forme de carrés. Ce problème s'est produit lors de l'ajout de données JSON à la boîte.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!