Модульный дизайн в рефакторинге: область применения стилей

Я давно не обновлял свой блог. За это время произошло много всего, и я устал. Но есть еще много вещей, которые я хочу сделать, например, обновить merceCSS, разобраться в модульном контенте, который я обобщил до сих пор, и поделиться им со всеми, участвовать в обменных встречах и т. д.

Я много упоминал модульный дизайн, например, « Модульность от IKEA's Furniture Design », « Модульное мышление в реконструкции страницы », « Ключевые моменты производства компонентов в реконструкции страницы », все они связаны с модульностью, но я никогда не говорил о конкретных аспектах. содержание реализации раньше, просто некоторые мысли. На этот раз я сосредоточусь на аспекте реализации и подведу итог некоторой модуляризации, которую я уже сделал.

Я считаю, что для хорошей работы с модуляризацией очень важно понимать сферу применения стилей, поэтому эта часть — первая статья в этой серии.

Студенты, писавшие программы, должны знать, что переменные имеют область действия (если вы не знаете, спросите у Google сами, я не буду объяснять это здесь). Определение стилей также имеет проблемы с областью действия, то есть с областью определения). Это легко понять, например, область действия p ниже:

/*作用域：全局*/ p{text-indent:2em;}

/*作用域：.demo这个类中*/ .demo p{color:#000000;}

Приоритетом селекторов стилей является базовое знание стилей. Давайте кратко рассмотрим это:

• Вес метки 0,0,0,1.
• Вес класса 0,0,1,0.
• Веса выбора атрибута: 0,0,1,1.
• Вес идентификатора равен 0,1,0,0.
• Вес важного до 1,0,0,0

Используемые правила также очень просты, то есть веса селекторов суммируются, и больший из них имеет приоритет, если веса одинаковы, приоритет имеет тот, который определен позже ; Хоть это и очень просто, но если не обращать внимания при написании, это легко может привести к повторным определениям CSS и избыточному коду.

Из вышесказанного мы можем выделить два ключевых фактора:

1. Размер груза зависит от типа и количества селекторов.
2. Приоритет стилей связан с порядком их определения.

Какой смысл знать вес стиля? Например, его можно использовать так: Чтобы привести самый простой пример,

body{color:#555555;}.demo{color:#000000;}

<p>这里的文字颜色受全局定义的影响</p>
<div class="demo"><p>这里的文字颜色受类demo定义的影响</p></div>
<p class="demo">这里的文字颜色受类demo定义的影响</p>

Зная вес стиля, вы поймете, как работает приведенный выше пример. Дальнейшее применение — это модульность, например, примеры в « Модуляризация от IKEA Furniture Design », подробности см. ниже.