Привет! Я Толя, Frontend-разработчик в Selectel. В мире фронтенда есть «острый недостаток» фреймворков, поэтому я, как и 90% JavaScript-разработчиков, решил разработать собственный. В тексте расскажу, как «запихать» HTML-элементы в CSS и не испортить проект. Читайте до конца — вас ждет неожиданный сюжетный поворот.
Используйте навигацию, если не хотите читать текст полностью:
→ О проекте
→ Работа с элементами
→ Заключение
О проекте
Принцип DRY
Представьте: у вас есть страница со скопированным кодом. Если заменить одну строку в CSS, придется вносить изменения в зависимые блоки. А если вдруг забыли их поменять, то, скорее всего, вас будет ждать долгий поиск и мучительное решение проблемы.
Чтобы предотвратить ошибку, я решил придерживаться главной заповеди чистого кода — DRY, Don’t Repeat Yourself. Принцип помогает сократить повторяющийся код за счет разделения проекта на мелкие независимые модули. Туда можно с легкостью вносить новые изменения — другие блоки не пострадают.
DRY замотивировал меня разработать такой проект, в котором принцип осуществлялся на 110%. Изначально, чтобы сверстать страницу, нужно было описать структуру документа в HTML, а потом — в селекторах на CSS. Приходилось проделывать работу дважды.
Стало интересно, что будет, если поменять структуру документа. Перестать тратить время на написание кода в двух местах и сконцентрироваться только на CSS? В своем фреймворке я оптимизировал структуру и сделал ее намного удобнее (вот только для кого?).
Работа с фреймворком
Кратко расскажу о принципе работы фреймворка. HTML in CSS — это способ избежать повторяющийся код. В нем можно писать только на CSS, HTML будет генерироваться самостоятельно.
Перед вами стандартная страница с версткой:
<head>
<style>
h1#title {
font-size: x-large;
margin-bottom: 32px;
}
main#main {
color: purple;
}
</style>
</head>
<body>
<h1 id=”title”>Заголовок</h1>
<main id=”main”>
Крутой контент
</main>
</body>
Синьоры и сеньориты среди вас, вероятно, заметили, что лишняя информация находится:
- в HTML — h1 id=”title”;
- в CSS — h1#title {;
- в HTML — main id=”main;
- в CSS — main#main.
HTML полностью повторяет код в CSS, поэтому я решил убрать тег . Без него мы не потеряем ничего, кроме контента:
<head>
<style>
h1#title {
font-size: x-large;
margin-bottom: 32px;
}
#title:before {
content: “Заголовок”;
}
main#main {
color: purple;
}
#main:before {
content: “Крутой контент”;
}
</style>
</head>
<body></body>
Как вы догадались, получился не принцип DRY, а скорее — RY, Repeat Yourself. В исправлении этого и заключается идея HTML in CSS!
Особенности фреймворка
HTML in CSS можно использовать практически на любом коде сайта, но есть несколько оговорок.
- Селекторы могут создать только один элемент и не более — двух одинаковых id не бывает.
#parent > #child {}
- Текстовое содержание должно находиться в псевдоэлементах, иначе не получится передать внутреннее содержимое тега через CSS.
#selectel-link::before {
content: “Ссылка на наш сайт”;
}
- Страница может запускаться только в рантайме, поэтому о SEO-оптимизации стоит забыть. Это норма для многих современных фреймворков, если не говорить об их SSR-вариациях.
Работа с элементами
О проекте и его особенностях мы узнали. Теперь рассмотрим, как использовать ссылки, вложенность, порядок и другие функции с помощью инструмента.
В фреймворке есть «козырь в рукаве» — это селекторы атрибутов. Он предлагает широкий выбор элементов для разработки: от картинок и видео до айфреймов. Мы часто будем использовать его в наших примерах.
Ссылки
Задача: Разместить ссылку на страницу с сайтом Selectel, которая будет выглядеть так:
<a id=”selectel-link” href=”selectel.ru”></a>Решение: Пишем стили с атрибутом href, чтобы добавить ссылку на сайт.
a#selectel-link[href=”selectel.ru”] {
display: block;
}
#selectel-link::before {
content: “Ссылка на наш сайт”;
}
А если хотите, чтобы ссылка открывалась в новой вкладке?
<a id=”selectel-link” href=”selectel.ru” target=”_blank”></a>Решение: Пишем стили с атрибутом target.
a#selectel-link[href=”selectel.ru”][target=”_blank”] {
display: block;
}
В результате мы сгенерировали:
<a id=”selectel-link” href=”selectel.ru” target=”_blank”></a>
Вложенность
Задача: поместить один HTML-элемент внутрь другого.
Решение: Создаем селектор дочерних элементов, чтобы добавить один элемент в другой.
#parent {
width: 200px;
height: 200px;
background-color: blue;
}
#parent > #child {
width: 100px;
height: 100px;
background-color: green;
}
Генерируем HTML:
<div id=”parent”>
<div id=”child”></div>
</div>
Порядок
Задача: расположить несколько элементов внутри родителя в определенном порядке.
Решение: Используем селекторы псевдоклассов :nth-child, :first-child, :last-child, чтобы определить порядок элементов.
#parent > #foo:last-child {
font-size: 10px;
}
#foo::before {
content: “Я последний”;
}
#parent > #bar:first-child {
font-size: 20px;
}
#bar::before {
content: “А я первый”;
}
Генерируем HTML:
<div id=”parent”>
<div id=”bar”></div>
<div id=”foo”></div>
</div>
JavaScript
К сожалению, фреймворк не поддерживает JavaScript, но это не мешает подключить к нему внешний файл — main.js. Да и никто не запретит нам описывать селекторы для тегов script и добавлять туда атрибуты.
script#my-script[src="/main.js"] {}В main.js можно использовать любой интерактив, который нужен сайту, — например, обработку событий, клиентский роутер и другие.
Заключение
Возможно, некоторые уже захотели переписать свой продакшн-сайт на HTML in CSS, но мне жаль вас огорчать — на самом деле это фреймворк-шутка.
Одним вечером мне стало интересно, как парсится CSS и как выглядит его структура. В процессе изучения пришла в голову идея создать свой фреймворк. Как говорится, закрепил теорию практикой. Кстати, фреймворк занимает около 120 строк неубористого кода. Если интересно, можете посмотреть на GitHub.
А какие фреймворки вы разрабатывали? Расскажите о них в комментариях. Возможно, они пригодятся нашим читателям.
