Comment expliquer la "cascade" aux débutants CSS?

Question

J'ai du mal à expliquer aux personnes qui découvrent CSS comment fonctionne la cascade lorsque vous utilisez des feuilles de style. Pour une raison quelconque, les débutants semblent naturellement commencer par ajouter une classe à chaque élément. Prenez l'extrait de code de this question, par exemple (pas d'infraction à l'OP, overtherainbow).

Faire ceci:       ul#nav { } et ul#nav li { }
est mieux que: ul.nav { } et li.navLinks { }

C'est un exemple très basique, mais vous obtenez le point. L'utilisation de l'héritage dans ce cas est clairement bénéfique.

J'ai essayé d'utiliser semantics comme point de référence, mais cela ne s'est pas avéré efficace. Il est tout à fait possible que le terme «classe» soit intrusif/confus en raison de la connaissance préalable de la POO. Finalement, après avoir vu le bon exemple après le bon exemple, ils ont toujours le moment décisif où ils finissent par "l'obtenir". Mais, je cherche un moyen de rationaliser ce processus, parce que je ne veux pas être le gars qui doit revenir en arrière et maintenir ce sous-produit de classitis qui se glisse dans la production. J'ai particulièrement apprécié this answer qui explique la récursivité. J'ai eu une explication similaire quand j'étais à l'école, et j'ai "compris" immédiatement. J'espère que quelqu'un de brillant là-bas a une façon similaire d'expliquer la cascade succintement mais complètement.

Answer 1

Peut-être pourriez-vous commencer en ignorant id et class au début. Il suffit de faire des choses "stupides" comme des éléments d'adressage très spécifiques selon la hiérarchie. Puis expliquer le groupement et l'étiquetage, et les combiner?

Answer 2

Vous pourriez essayer d'amener vos élèves/étudiants/ceux que vous enseignez à créer une mise en page assez avancée sans utiliser de classe ou d'ID.

Un point clé de la cascade est que vous devriez utiliser l'arborescence DOM un document HTML est à son maximum. En outre, un point de la cascade est que vous pouvez appliquer plusieurs styles à un élément, de sorte que le style qui en résulte est style a + style b + style c.

Answer 3

pour moi .. il est facile de comprendre un css quand vous le lisez de droite à gauche comme:

div#nav li:hover a 

je serais traduis à:

POUR TOUS « liens » DANS UN "li" QUI A hover QUI SONT DANS UN div AVEC id = nav DO CE {....

Answer 4

Il peut être utile de décrire et de visualiser la cascade CSS en tant que hiérarchie orthogonale à la hiérarchie DOM. Les deux hiérarchies se rencontrent sur un élément d'affichage. DOM donne l'imbrication structurelle, CSS donne l'attribut d'affichage imbrication. CSS est juste le langage utilisé pour décrire une hiérarchie d'attributs d'affichage.

La vraie difficulté à comprendre la Cascade CSS est qu'il contient assez Rube Goldberg fonctionnalités pour ruiner tout seul principe unificateur capable de « allumer les lumières » pour vos élèves.Il y a toujours qui vont être quelques WTF entre l'obscurité et la compréhension. La meilleure description et l'explication de la cascade CSS que je peux penser est de www.w3.org Cascade. Je recommande simplement de lire ceci encore et encore et encore jusqu'à ce que le gradateur soit poussé suffisamment haut pour au moins "voir la lumière". Commencez avec un simple document HTML, ajoutez du CSS simple, comprenez ce qui s'est passé et pourquoi, ajoutez quelque chose, trouvez-le, ajoutez quelque chose, trouvez-le ... Je peux voir la lumière.