• Шаблоны для вашего сайта
  • Сделать сайт
  • Реклама
  • Berry CSS
  • Albireo Framework
  • Бесплатный HTML-курс
  • Telegram-канал
  • Обратная связь
MaxSite.org
О создании сайтов и не только
Создание сайтов под ключ →
Вход
×
или зарегистрироваться

Изоляция CSS-стилей

CSS, HTML, LESS, SASSПросмотров: 9354Комментарии: 027 ноября 2018 г.

Интересное видео опубликовал Вадим Макеев «Прототип изоляции стилей для Shower на веб-компонентах», где затрагивается вопрос изоляции css-стилей при верстке. Само видео посвящено одной из попыток реализации, но сама по себе тема (изоляции) мне кажется интересна, поскольку с ней сталкиваются практически каждый верстальщик.

В чём суть проблемы? CSS-стили имеют глобальную обрасть видимости. Не важно где объявлен стиль, он будет применён сразу ко всей html-странице. Пока html-код небольшой, особых проблем не возникает, поскольку элементарно решается за счёт именования css-классов. Но, как только html становится побольше, то именование классов должно быть более осмысленным, иначе разобраться в коде будет проблематично.

Но это ещё не всё. Существуют блоки, которые довольно сложны по своей html-структуре. Например шапка сайта может содержать в себе flex-сетку со множеством вложенных функциональных блоков (меню, логотипы, ссылки, иконки и т.д.). Скорее всего такой блок будет оформлен в виде отдельного html/php-файла, который просто подключается на странице. Но, если html-разметку мы можем разделить по файлам и верстать индивидуально, то с css-стилями такой «финт не прокатит», поскольку, опять же css имеет глобальную область видимости.

Когда-то данную проблему пытались решить с помощью атрибута scoped для тэга STYLE, но после его поддержка была прекращена из-за «сложности кода». На текущий момент проблему хотят решить вообще на корню, за счёт внедрения веб-компонентов.

Web-компоненты по сути представляют собой не просто блоки, а некие элементы, которые можно многократно встраивать на страницу. В качестве примера можно привести тэги VIDEO или AUDIO, которые на странице отображаются в виде сложных функциональных блоков (кнопки, полоса прогресса и т.п.).

Но веб-компоненты это отдалённое будущее, а проблема глобальной видимости CSS актульна сейчас, поэтому есть несколько базовых подходов/методик к её решению (точнее эмуляции). Я сразу отбрасываю использование JS, поскольку это совсем уж сложные варианты. Остановимся только на голом HTML и CSS, поэтому единственным способом будет — это использование атрибута class (или id, но это не совсем «кошерно»).

На уровне HTML

Самое главное — это указать контейнер для блока. Всё, что оказывается внутри — и есть компонент (включая сам контейнер). В идеале такой блок можно было бы разместить в любой части страницы простым копированием.

<div class="block1">
	<h1>Первый блок</h1>
	<div>Текст</div>
</div>
 
<div class="block2">
	<h1>Второй блок</h1>
	<div>Текст</div>
</div>

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

CSS каскадность

Если применить

h1 { color: red; }

то оба заголовка станут красными. На выручку приходит каскадность:

.block1 h1 { color: red; }
.block2 h1 { color: green; }

Очевидно, что данный подход наиболее простой и эффективный. При использовании препроцессора Sass получится вполне себе элегантный и красивый код:

.block1 { 
	h1 { color: red; }

	// прочие блоки
	div { }
}
 
.block2 { 
	h1 { color: green; }
 
	// прочие блоки
	div { }
}

Уникальность именования классов

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

<div class="block1">
	<h1 class="block1_h1">Первый блок</h1>
	<div class="block1_div">Текст</div>
</div>
 
<div class="block2">
	<h1 class="block2_h1">Второй блок</h1>
	<div class="block2_div">Текст</div>
</div>

В css-стилях, при этом, происходит отказ от каскадности:

.block1_h1 { color: red; }
.block1_div { }
 
.block2_h1 { color: green; }
.block2_div { }

В Sass это может выглядеть так:

.block1 { 
	&_h1 { color: red; }

	// прочие блоки
	&_div { }
}
 
.block2 { 
	&_h1 { color: green; }
 
	// прочие блоки
	&_div { }
}

Здесь мы видим уже усложнение кода, но самое главное — это отказ от фундаментальной основы CSS — каскадности. То есть код усложнился, добавились запутанные правила именования, но при этом он не дал никакого выигрыша. Когда вложенных элементов окажется много, БЭМ классы превращаются в жуткое мессиво. При том, я отмечу, только за счёт идиотского отказа от каскадности. Но, в любом случае, такой подход всё-таки тоже решает задачу изоляции css-стилей.

Утилитарные классы

Поскольку я сторонник атомарного CSS, то покажу как это решается с помощью утилитарных классов. Например в UniCSS есть классы для красного и зеленного цветов. В этом случае css-код вообще не правится, а сразу используются готовые классы:

<div>
	<h1 class="t-red">Первый блок</h1>
	<div>Текст</div>
</div>
 
<div>
	<h1 class="t-green">Второй блок</h1>
	<div>Текст</div>
</div>

Обратите внимание, что у родителя я убрал идентифицирующий класс. В Atomic CSS классы просто так у тэгов не прописываются. Если корневой DIV не имеет особых стилей, то нет нужды указывать и какие-нибудь классы. Это же относится и к любым другим тэгам.

Данный пример достаточно простой, но он показывает, что проблему верстки можно решить без изоляции стилей. Конечно атомарный CSS может и не содержать нужных классов, в этом случае придётся создать класс для контейнера и использовать описанный выше вариант с каскадностью. Если же это какой-то простой стиль, то можно вообще использовать style у тэга.

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


Создание сайтов (Украина) →
Работы по «MF»
Тайм-менеджмент на «липких» листочках
twitter.com facebook.com
Другие записи сайта
Использование SQLite в PHP
Использование SQLite в PHP
База SQLite и основы SQL. Часть 10
База SQLite и основы SQL. Часть 10
База SQLite и основы SQL. Часть 8
База SQLite и основы SQL. Часть 8
Несколько советов начинающему фрилансеру
Несколько советов начинающему фрилансеру
IDE для PHP на примере Notepad++
IDE для PHP на примере Notepad++
CMS. Теория
CMS. Теория
Оставьте комментарий!

Комментарий будет опубликован после проверки. Вы соглашаетесь с правилами сайта.

(обязательно)

Навигация
  • Шаблоны для MaxSite CMS 22
  • jQuery и JavaScript 6
  • Java и Android 5
  • PHP/ООП 25
  • SQL 17
  • Albireo Framework 11
  • Berry CSS 7
  • CSS, HTML, LESS, SASS 23
  • PHP 37
  • Тайм-менеджмент 9
  • Софт 37
  • SEO 13
  • Git. GitHub 3
  • CodeIgniter 5
  • Landing Page 3
  • Alpine.js 14
  • Фильмы 2
  • Дневник 55

Вот здесь можно заказать создание сайта, шаблона или лендинга. Также вы можете выбрать готовые шаблоны для MaxSite CMS по небольшой цене. Также можно купить отдельные модули, компоненты для вашего сайта.

MaxSite.org
Как создать свой сайт

Услуги по созданию сайтов, блогов, лендингов
Обратная связь • Реклама на сайте
Карта сайта
Мои проекты
  • Шаблоны для вашего сайта
  • Заказать создание сайта
  • MaxSite CMS
  • Berry CSS (CSS Utilities)
  • Albireo Framework
  • UniCSS (Universal Atomic CSS)
  • Landing Page Framework
  • Бесплатные НТML-курсы
Ссылки
  • Telegram-канал
  • Github
  • Twitter
  • Telegram-бот
  • RSS
© MaxSite.org, 2006-2022. Работает на MaxSite CMS | Время: 0.2475 | SQL: 20 | Память: 4.6MB | Вход