DRY-фреймворк: как сократить HTML-код и писать только на CSS01.08.2024 11:30

8actjcwt9whnfiyuhaguev7fk5y.jpeg


Привет! Я Толя, Frontend-разработчик в Selectel. В мире фронтенда есть «острый недостаток» фреймворков, поэтому я, как и 90% JavaScript-разработчиков, решил разработать собственный. В тексте расскажу, как «запихать» HTML-элементы в CSS и не испортить проект. Читайте до конца — вас ждет неожиданный сюжетный поворот.

Используйте навигацию, если не хотите читать текст полностью:

→ О проекте
→ Работа с элементами
→ Заключение

О проекте


Принцип DRY


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

Чтобы предотвратить ошибку, я решил придерживаться главной заповеди чистого кода — DRY, Don«t Repeat Yourself. Принцип помогает сократить повторяющийся код за счет разделения проекта на мелкие независимые модули. Туда можно с легкостью вносить новые изменения — другие блоки не пострадают.

f0mq01oyl667obud16dstdkir4i.jpeg


DRY замотивировал меня разработать такой проект, в котором принцип осуществлялся на 110%. Изначально, чтобы сверстать страницу, нужно было описать структуру документа в HTML, а потом — в селекторах на CSS. Приходилось проделывать работу дважды.

Стало интересно, что будет, если поменять структуру документа. Перестать тратить время на написание кода в двух местах и сконцентрироваться только на CSS? В своем фреймворке я оптимизировал структуру и сделал ее намного удобнее (вот только для кого?).

Работа с фреймворком


Кратко расскажу о принципе работы фреймворка. HTML in CSS — это способ избежать повторяющийся код. В нем можно писать только на CSS, HTML будет генерироваться самостоятельно.

Перед вами стандартная страница с версткой: 






Заголовок




	Крутой контент

Синьоры и сеньориты среди вас, вероятно, заметили, что лишняя информация находится:

  • в HTML — h1 id=«title»;
  • в CSS — h1#title {;
  • в HTML — main id=«main;
  • в CSS — main#main.


HTML полностью повторяет код в CSS, поэтому я решил убрать тег. Без него мы не потеряем ничего, кроме контента:


Как вы догадались, получился не принцип DRY, а скорее — RY, Repeat Yourself. В исправлении этого и заключается идея HTML in CSS!

Особенности фреймворка


HTML in CSS можно использовать практически на любом коде сайта, но есть несколько оговорок.

  • Селекторы могут создать только один элемент и не более — двух одинаковых id не бывает.
#parent > #child {}


  • Текстовое содержание должно находиться в псевдоэлементах, иначе не получится передать внутреннее содержимое тега через CSS. 
#selectel-link::before {
  content: "Ссылка на наш сайт”;
}


  • Страница может запускаться только в рантайме, поэтому о SEO-оптимизации стоит забыть. Это норма для многих современных фреймворков, если не говорить об их SSR-вариациях.


nblot_ve1t3hcw5bluwc_-did08.png

Работа с элементами


О проекте и его особенностях мы узнали. Теперь рассмотрим, как использовать ссылки, вложенность, порядок и другие функции с помощью инструмента.

В фреймворке есть «козырь в рукаве» — это селекторы атрибутов. Он предлагает широкий выбор элементов для разработки: от картинок и видео до айфреймов. Мы часто будем использовать его в наших примерах.


Ссылки


Задача: Разместить ссылку на страницу с сайтом Selectel, которая будет выглядеть так:


Решение: Пишем стили с атрибутом href, чтобы добавить ссылку на сайт.

a#selectel-link[href=”selectel.ru”] {
  display: block;
}

#selectel-link::before {
  content: "Ссылка на наш сайт”;
}


Если хотите, чтобы ссылка открывалась в новой вкладке, добавляем target=»_blank».


Решение: Пишем стили с атрибутом href, чтобы добавить ссылку на сайт.

a#selectel-link[href=”selectel.ru”] {
  display: block;
}

#selectel-link::before {
  content: "Ссылка на наш сайт”;
}

Если хотите, чтобы ссылка открывалась в новой вкладке, добавляем target=”_blank”.

a#selectel-link[href=”selectel.ru”][target=”_blank”] {
  display: block;
}


В результате мы сгенерировали:


Вложенность


Задача: поместить один HTML-элемент внутрь другого.

Решение: Создаем селектор дочерних элементов, чтобы добавить один элемент в другой. 

#parent {
  width: 200px;
  height: 200px;
  background-color: blue;
}

#parent > #child {
  width: 100px;
  height: 100px;
  background-color: green;
}


Генерируем HTML:

Порядок


Задача: расположить несколько элементов внутри родителя.

Решение: Используем селекторы псевдоклассов 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:

JavaScript


К сожалению, фреймворк не поддерживает JavaScript, но это не мешает подключить к нему внешний файл — main.js. Да и никто не запретит нам описывать селекторы для тегов script и добавлять туда атрибуты. 

script#my-script[src="/main.js"] {}


В main.js можно использовать любой интерактив, который нужен сайту, — например, обработку событий, клиентский роутер и другие.

Заключение


Возможно, некоторые уже захотели переписать свой продакшн-сайт на HTML in CSS, но мне жаль вас огорчать — на самом деле это фреймворк-шутка.

Одним вечером мне стало интересно, как парсится CSS и как выглядит его структура. В процессе изучения пришла в голову идея создать свой фреймворк. Как говорится, закрепил теорию практикой. Кстати, фреймворк занимает около 120 строк неубористого кода. Если интересно, можете посмотреть на GitHub.

dyqb_4bbufprfh3oy_xkdjtyjfe.jpeg


А какие фреймворки вы разрабатывали? Расскажите о них в комментариях. Возможно, они пригодятся нашим читателям.

© Habrahabr.ru