Application de la cascade de règles CSS Plusieurs points auxquels il faut prêter attention dans l'échange CSS_Experience

Une base théorique est nécessaire, et la pratique est le moyen d'améliorer et de comprendre la théorie. Les deux sont tout aussi importants. Tout concepteur et développeur qui laisse l'équilibre entre les deux, quel que soit le côté qu'il préfère, fera des erreurs à gauche ou à droite. . Mais quelle est l’utilité pratique de cette méthode dont je parle. Évidemment, il ne peut pas créer pour nous un rectangle arrondi, ni une disposition en colonnes, ni une barre de navigation fixée en tête du document. L'application pratique de cet algorithme réside dans : Les bonnes pratiques de programmation CSS. Il s’agit d’une macro pratique tout aussi importante que les micro pratiques que je viens de citer, mais beaucoup plus difficile à maîtriser.

Cet article n'a pas l'intention d'inclure toutes les bonnes spécifications de programmation CSS, et ce n'est pas non plus possible. Tout ce que je peux fournir est un résumé de mes spécifications personnelles pour l'écriture de CSS. Je pense que ces spécifications sont aussi proches que possible. essence opérationnelle du CSS.

N'utilisez pas de CSS en ligne
Le style utilisateur n'est pas sous votre contrôle
N'utilisez pas de règles importantes
Écrivez du CSS de bas en haut selon la spécificité
Les trois premiers éléments ne sont pas au centre de ce dont je parle, je vais passer sous silence.

La particularité du CSS en ligne est la plus élevée. Si les attributs de votre fichier CSS entrent en conflit avec le CSS en ligne, alors les attributs de votre fichier CSS seront invalides. Ceci est différent de notre habitude de déboguer les styles uniquement en CSS. fichiers. Ne correspond pas. Le CSS en ligne est également moche, il insère des styles dans le document HTML, il devrait donc être abandonné.

Si l'utilisateur définit le style utilisateur sur important, quelle que soit la façon dont vous écrivez les règles CSS, vous ne pouvez jamais remplacer la déclaration importante de l'utilisateur, il est donc inutile d'essayer de couvrir tous les styles utilisateur. Heureusement, nous n'avons plus à y penser.

La règle importante est une valeur aberrante. Elle n'est pas conforme à notre façon habituelle de penser. Peu importe la façon dont nous augmentons la spécificité et l'ordre des règles CSS, la règle importante écrasera les règles qui lui font concurrence, ce qui est le cas. perturbera également Les règles habituelles des règles CSS posent des problèmes au débogage. Si vous souhaitez utiliser la règle importante pour pirater le navigateur, vous devez alors appliquer la règle dans un sélecteur qui pointe vers un élément unique. (PS. Le hack devrait être la dernière chose prise en compte dans la solution, car c'est trop moche.)

Dernier point, comment écrire du CSS de bas en haut selon la spécificité ?

La clé est le CSS modulaire.

Ajouter du CSS global
Ajouter du CSS unifié pour la page actuelle
Diviser la page en plusieurs modules
Utiliser des hooks d'identification sur chaque module différent et des hooks de classe sur le même module
Ajouter chacun module CSS unifié pour chaque module
Divisez chaque module en plusieurs sous-modules et revenez à l'étape 4 pour commencer la boucle jusqu'à ce que l'ajout du style soit terminé.
Écrire un bon CSS est un problème de conception, pas un problème de mise en œuvre. Nous devons d’abord écrire du contenu CSS global avec une très faible spécificité, qui est notre reset.css couramment utilisé. Il s'agit du style par défaut pour toutes les pages de notre site Web.

Si une page a un style unifié unique, comme une page avec un arrière-plan différent des autres pages, nous pouvons alors ajouter un identifiant à une page, puis écrire le CSS unifié de la page actuelle sous l'ID.

body#special{ 
    background-color:black; 
}

Une fois le style unifié écrit, nous divisons la page en plusieurs modules. Si ces modules ont fondamentalement le même style, alors utilisez des hooks de classe. Si les styles ne sont pas les mêmes. pareil, alors utilisez id hook, ce principe devrait être suivi à chaque fois à l'avenir lors de la division en modules, car la spécificité de la classe n'est pas élevée, donc si ce n'est pas un module qui semble évidemment similaire, la classe ne doit pas être utilisée. Le nom de l'identifiant peut généralement être utilisé comme nom du module. Comme la tête, le bas, etc. Le sélecteur d'identifiant joue un rôle clé dans la mise en cascade, car l'identifiant est exclusif et possède une spécificité élevée, ce qui peut empêcher que les règles CSS ne soient remplacées par inadvertance.

Dans un certain module, nous pouvons avoir du CSS unifié, nous devons alors utiliser le sélecteur d'identifiant pour écrire le style unifié sous le module actuel.

#head p{ 
    color:red; 
}

Lors de l'ajout d'un hook de classe, je recommande d'utiliser l'identifiant du module parent (ou la page elle-même) comme première partie du nom de la classe. Si j'ajoute une page indépendante (body#special), alors après avoir divisé le module en module pour la page, je devrais nommer le module de la page special_head, special_bottom, etc.

Ou lorsque vous utilisez des hooks de classe dans certains modules de page, vous devez utiliser head_col etc. L'avantage de ceci est que nous n'avons pas besoin d'utiliser

#head .col{ 
    /* 头部中每一列的样式 */ 
}

mais pouvons utiliser directement

.head_col{ 
    /* 头部中每一列的样式 */ 
}

donc nous ne Vous n'avez pas à vous soucier des conflits de noms.

Pour les éléments avec sélecteur d'identifiant ajouté directement sous le module, nous pouvons utiliser le sélecteur directement et ajouter l'identifiant du module parent avant son nom.

#head_navigator{ 
    /* 头部中导航栏的样式 */ 
}

要做到模块化CSS我们应当尽量防止跨模块的CSS出现，我想一条好的原则是：如果某一样式的跨模块特性不是你一目了然的，那么就不要使用跨模块的CSS。一个例外是全局CSS或者模块内的统一CSS。而对于那些并非一目了然的，并非具有统一样式的，建议在每个子模块下分别定义。这就像是编写Java程序中的面向对象的设计一样，我们要降低模块之间的互相依赖，使得相同模块的CSS规则在一起，略有不同的就完全分开，这样不但易于维护，还能够保证特殊性从低到高地编写CSS，从而防止CSS规则被意外的覆盖

以上就是CSS规则层叠的应用 css必须要注意的几点_经验交流的内容，更多相关内容请关注PHP中文网（www.php.cn）！