Как объяснить «Каскад» новичкам CSS?

Question

Мне трудно объяснить новичкам в CSS, как работает каскад при использовании таблиц стилей.По какой-то причине новички, естественно, начинают с простого добавления класса к каждому элементу.Возьмите фрагмент кода из этого вопроса, например, (без обид, ОП).

Выполнение этого: ul#nav { } и ul#nav li { }
Лучше, чем: ul.nav { } и li.navLinks { }

Это очень простой пример, но вы понимаете суть.Использование наследования в этом случае явно выгодно.

Я пытался использовать семантику в качестве ориентира, но это оказалось неэффективным.Вполне возможно, что термин «класс» является интригующим / запутанным из-за предшествующего знания ООП.В конце концов, увидев хороший пример за хорошим примером, у них всегда наступает момент прорыва, когда они, наконец, «получают это».Но я ищу способ упростить этот процесс, потому что я не хочу быть тем парнем, который должен вернуться и поддерживать этот побочный продукт классициста, который проскальзывает в производство.

Мне особенно понравилось этот ответ , который объясняет рекурсию.У меня было похожее объяснение, когда я учился в школе, и я "получил это" немедленно.Я надеюсь, что у кого-то блестящего есть подобный способ объяснить каскад лаконично, но тщательно.

Answer 1

Возможно, вы могли бы начать с игнорирования идентификатора и класса в начале.Просто делать «глупые» вещи, такие как адресация элементов, очень специфичных в соответствии с иерархией.Тогда объясните группировку и маркировку и объедините их?

Answer 2

Это может помочь описать и просмотреть каскад CSS как иерархию, ортогональную иерархии DOM.Две иерархии встречаются в элементе отображения.DOM дает структурное вложение, CSS дает вложенность атрибутов отображения.CSS - это просто язык, используемый для описания иерархии атрибутов отображения.

Реальная трудность в понимании каскада CSS состоит в том, что он содержит достаточно Rube Goldberg функций, чтобы разрушить любой единый принцип объединения, способныйвключить свет "для ваших учеников.Между тьмой и пониманием всегда будет несколько WTF.

Лучшее описание и объяснение каскада CSS, которое я могу придумать, исходит от www.w3.org Cascade .Я просто рекомендую читать это снова и снова, пока диммер не будет нажат достаточно высоко, чтобы хотя бы «увидеть свет».

Начните с простого HTML-документа, добавьте немного простого CSS, выясните, что произошло, изачем, что-то добавить, разобраться, добавить что-то, разобраться ... Я вижу свет.

Answer 3

для меня .. легко понять css, когда вы читаете его справа налево как:

div#nav li:hover a

я бы перевел это на:

ДЛЯ ВСЕХ "ссылки" ВНУТРИ A"li" , ЧТО зависает , ЧТО ВНУТРИ A div С id = nav ДЕЛАЙТЕ ЭТО {....

Answer 4

Вы могли бы попытаться, чтобы ваши ученики / студенты / те, кого вы обучаете, пытались создать несколько более сложный макет без использования каких-либо атрибутов класса или идентификатора.

Ключевым моментом каскадного подхода является то, что вы должны использоватьDOM-дерево HTML-документа является наиболее полным.Кроме того, суть каскада заключается в том, что вы можете применить несколько стилей к элементу, чтобы его результирующий стиль был style a + style b + style c.