Слоистый CSS со взбитыми сливками

Уютный проект

🚂 БЭМ

.block {
    color: red;
}

.block__element {
    width: 100500px;
}

.block--modifier {
    color: tomato;
}

(1,0,0) > (0,0,1)

(2,1,1) > (1,1,1)

.card {
    background-color: #eee;
}

.card__title {
    color: #000;
}

.card--brand {
    background-color: tomato;
}

.card--brand .card__title {
    color: #fff;
}

.card { /* (0, 1, 0) */
    background-color: #eee;
}

.card__title { /* (0, 1, 0) */
    color: #000;
}

.card--brand { /* (0, 1, 0) */
    background-color: tomato;
}

.card--brand .card__title { /* (0, 2, 0) */
    color: #fff;
}

@import "global.css";

@import "blocks/card.css";
@import "blocks/article.css";
@import "blocks/input.css";

.input-group >
:not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
    margin-left: calc(var(--bs-border-width) * -1);
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

!important

.block.block.block.block.block {
    --my-specificity: is-ok;
}

.block[class] {
    --my-specificity: is-ok;
}

.block:not(#wtf) {
    --my-specificity: is-ok;
}

Origin

• 🧑‍💻 разработчик
• 👶 пользователь
• 💻 браузер

a:-webkit-any-link {
    color: -webkit-link;
    cursor: pointer;
    text-decoration: underline;
}

В случае возникновения конфликтов последнее слово должно быть за пользователем, <...>.
Håkon Lie

Origin

• !important 💻 браузер
• !important 👶 пользователь
• !important 🧑‍💻 разработчик
•  - - - - -
• 🧑‍💻 разработчик
• 👶 пользователь
• 💻 браузер

⚠️ !important не увеличивает специфичность

✅ !important изменяет «слой»

Context

• !important 🥷 shadow
• !important 📃 host
•  - - - - -
• 📃 host
• 🥷 shadow

.navbar-inverse .navbar-nav > li > a {
    color: #9d9d9d;
}

.link { color: red; }

.nav-link { color: lightsteelblue; }

a:-webkit-any-link { /* Browser style */
    color: -webkit-link;
    cursor: pointer;
    text-decoration: underline;
}

⬇️ Сверху вниз

⬇️ Сверху вниз

⬆️ Снизу вверх

🔀 Сортируем

<nav class="navbar-inverse">
    <ul class="navbar-nav">
        <li><a href="#" class="nav-link">Link 1</a></li>
        <li><a href="#" class="nav-link">Link 2</a></li>
    </ul>
</nav>

@layer

@layer reset, bootstrap, utilities;
@import url('bootstrap.css') layer(bootstrap);

@layer utilities {
    .sr-only { /* ... */ }
}

@layer reset {
    *, *::before, *::after {
        box-sizing: border-box;
    }
}

p { font-size: 18px; }

@layer second {
    .sr-only { /* ... */ }
}

@layer first {
    *, *::before, *::after {
        box-sizing: border-box;
    }
}

p {
    font-size: 18px;
}

@layer
    reset,
    bootstrap,
    utilities;

@import url('bootstrap.css') layer(bootstrap);

/* Undefined layer */
p {
    font-size: 18px;
}

@layer reset {
    *, *::before, *::after { box-sizing: border-box; }
}

@layer utilities {
    .sr-only { /* ... */ }
}

@import url('bootstrap.css')
    layer(bootstrap);

p { font-size: 18px; }

@layer reset {
    *, *::before, *::after { box-sizing: border-box; }
}

@layer utilities {
    .sr-only { /* ... */ }
}

@layer bootstrap {
    .some { /* ... */ }
}

p { font-size: 18px; }

<p id="id" class="class">Text</p>

@layer first, second;

@layer second {
    p { color: yellow; }
    #id { color: red; }
}

@layer first {
    .class { color: blue; }
}

p { color: green; }

⬇️ Сверху вниз

🔀 Сортируем слои

🔀 Сортируем внутри слоёв

⏺️ Ищем победителя

!important

Слои

@layer
    reset,
    components,
    utilities;

Слои

@layer
    reset,
    components,
    utilities;

🗄️ Вложенность?

@layer a {
    @layer common, important;

    @layer important { /* ... */ }

    @layer common { /* ... */ }

    @layer { /* ... */ }
}

@layer a.common {
    /* ... */
}

@layer utilities {
    @layer important {
        /* ... */
    }
}

@layer utilities.common {
    /* ... */
}

revert

@layer default {
    a { color: maroon; }
}

@layer theme {
    a {
        color: var(--brand-primary, purple);
    }

    .no-theme {
        color: revert-layer;
    }
}

Вы уже используете @layers 😉

Пора сделать ещё один шаг 🚶🏻‍♂️

@import url('bootstrap.css');                 

button {
    font-size: 18px;
}

@import url('bootstrap.css') layer(bootstrap);

button {
    font-size: 18px;
}

reset.css

@import url('reset.css') layer(reset);

@layer reset {
    *,
    *::before,
    *::after {
        /* Some custom reset styles */
    }
}

p { font-size: 18px; }

debug.css

@layer reset, components, debug;

@import url('debug.css') layer(debug);
@import url('reset.css') layer(reset);

@layer components {
    /* Some styles */
}

• reset.css
• фреймворки
• глобальные стили
• стили компонентов
• темизация
• классы-утилиты

@layer
    reset,

    frameworks.bootstrap,
    framework.material,

    global,

    components.design-system,
    components.custom,

    theme.light,
    theme.dark,

    utilities;

🤩 Уже можно