Привет! Я Толя, 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.
А какие фреймворки вы разрабатывали? Расскажите о них в комментариях. Возможно, они пригодятся нашим читателям.
ссылка на оригинал статьи https://habr.com/ru/articles/832868/
Добавить комментарий