itmo_conspects

Лекция 5. Продвинутый CSS

Каскадность и приоритет селекторов

В CSS свойства для одного элемента могут накладываться друг на друга. Допустим, что есть такой элемент:

<p class="bold dark">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>

с такими стилями:

p {
    font-size: 20px;
}

.bold {
    font-weight: bold;
}

.dark {
    color: #666666;
}

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Элемент имеет два класса, CSS-правила к нему применяются, поэтому в итоге свойства для элемента будут такими:

{
    color: #666666;
    font-weight: bold;
    font-size: 20px;
}

Это и называется каскадностью правил. При этом у правил действует приоритет селекторов. Рассмотрим такой пример:

p {
    color: green;
}

#blue {
    color: blue;
}

.red {
    color: red;
}

Цвет текста такого элемента:

<p class="red" id="blue">Бургер</p>

будет синим:

Бургер

Связано это с тем, что правила имеют следующий приоритет:

Если элемент имеет несколько классов, свойства для которых противоречат друг другу, то применяться будут те свойства, что стоят последними - браузер просто перезапишет правила, которые стояли перед ним:

.my-text {
    color: blue;
}

.your-text {
    color: red;
}

<p class="your-text my-text">Яблоко лежало на поляне</p>

Яблоко лежало на поляне

Если два правила, то приоритет вычисляет немного сложнее. Для этого составляется кортежи из 4 чисел:

Затем эти кортежи сравниваются. Так селектор p.my-text.bold-text#this-id (0, 1, 2, 1) имеет больший приоритет, чем p.your-text#that-id (0, 1, 1, 1)

Помимо этого существует еще один список приоритетов:

Важные правила в коде обозначаются с помощью !important:

p {
    color: red !important;
}

Такие правила имеют больший приоритет, а наибольший имеют пользовательские важные правила, чтобы обеспечивать доступность для пользователей с ограничениями

Методологии CSS

Часто CSS-код разрастается до таких масштабов, что его становится трудно поддерживать. По этой причине начали создаваться методологии - практики организации кода для его лучшей читаемости и изменения

БЭМ

Методология БЭМ (Блок-Элемент-Модификатор) была создана в Яндексе. Основная ее концепция заключается в том, чтобы легко поддерживать проекты и повторно использовать компоненты

Для этого в БЭМ есть три понятия:

Плюсы БЭМ:

Подробнее ознакомиться можно на сайте https://bem.info/

SMACSS

Методология SMACSS (Scalable and Modular Architecture for CSS) создана Джонатаном Снуком и основана на разделении правил на категории:

Для классов правил Layout добавляется префикс l-, grid- или layout-, а для правил State префиксы состояния is- или has-

Для модулей используются имена компонентов. Связанные элементы внутри модуля и вариации модуля должны использовать базовое имя модуля в качестве префикса

В отличие от БЭМ, SMACSS не предписывает слишком строгое соглашение об именовании

Преимущества SMACSS:

Подробнее о SMACSS: https://smacss.com/

eCSS

Методология eCSS (Enduring CSS) была создана Беном Фрейном и состоит в изоляции компонентов, чтобы повторно их использовать

Это достигается за счет инкапсуляции всего кода (не только CSS), необходимых для постройки всех компонентов, в своих общих папках и создания совершенно нового компонента каждый раз, когда нужен компонент, похожий на уже существующий, но в котором будут некоторые незначительные изменения

eCSS отходит от таких методологий, как БЭМ и SMACSS, которые расширяют и абстрагируются от существующих компонентов, тем самым избегая или пытаясь как можно сильнее избежать повторения кода

Бен Фрейн пришел к выводу, что современные алгоритмы сжатия хорошо сжимают повторяющийся CSS-код, поэтому разница в весе файлов незначительна

Преимущества eCSS:

This site is open source. Improve this page.