@@ -9,6 +10,8 @@
+
+
diff --git a/src/routes/blog/html-in-css/+page.svx b/src/routes/blog/html-in-css/+page.svx
new file mode 100644
index 0000000..c41b72e
--- /dev/null
+++ b/src/routes/blog/html-in-css/+page.svx
@@ -0,0 +1,279 @@
+---
+title: "DRY-фреймворк: как сократить HTML-код и писать только на CSS"
+---
+
+
+ 2024-08-01
+
+
+# {title}
+
+## О проекте
+
+### Принцип DRY
+
+Представьте: у вас есть страница со скопированным кодом. Если заменить одну строку в CSS, придется вносить изменения в зависимые блоки. А если вдруг забыли их поменять, то, скорее всего, вас будет ждать долгий поиск и мучительное решение проблемы.
+
+Чтобы предотвратить ошибку, я решил придерживаться главной заповеди чистого кода — DRY, Don’t Repeat Yourself. Принцип помогает сократить повторяющийся код за счет разделения проекта на мелкие независимые модули. Туда можно с легкостью вносить новые изменения — другие блоки не пострадают.
+
+DRY замотивировал меня разработать такой проект, в котором принцип осуществлялся на 110%. Изначально, чтобы сверстать страницу, нужно было описать структуру документа в HTML, а потом — в селекторах на CSS. Приходилось проделывать работу дважды.
+
+Стало интересно, что будет, если поменять структуру документа. Перестать тратить время на написание кода в двух местах и сконцентрироваться только на CSS? В своем фреймворке я оптимизировал структуру и сделал ее намного удобнее (вот только для кого?).
+
+### Работа с фреймворком
+
+Кратко расскажу о принципе работы фреймворка. HTML in CSS — это способ избежать повторяющийся код. В нем можно писать только на CSS, HTML будет генерироваться самостоятельно.
+
+Перед вами стандартная страница с версткой:
+
+```html
+
+
+
+
+ Заголовок
+
+
+ Крутой контент
+
+
+```
+
+Синьоры и сеньориты среди вас, вероятно, заметили, что лишняя информация находится:
+- в HTML — `h1 id="title"`;
+- в CSS — `h1#title {`;
+- в HTML — `main id="main"`;
+- в CSS — `main#main`.
+
+HTML полностью повторяет код в CSS, поэтому я решил убрать содержимое тега ``. Без него мы не потеряем ничего, кроме контента:
+
+```html
+
+
+
+
+```
+
+### Особенности фреймворка
+
+HTML in CSS можно использовать практически на любом коде сайта, но есть несколько оговорок.
+
+Селекторы могут создать только один элемент и не более — двух одинаковых id не бывает.
+
+```css
+#parent > #child {}
+```
+
+Текстовое содержание должно находиться в псевдоэлементах, иначе не получится передать внутреннее содержимое тега через CSS.
+
+```css
+#kopyl-link::before {
+ content: "Ссылка на наш сайт";
+}
+```
+
+Страница может запускаться только в рантайме, поэтому о SEO-оптимизации стоит забыть. Это норма для многих современных фреймворков, если не говорить об их SSR-вариациях.
+
+## Работа с элементами
+
+О проекте и его особенностях мы узнали. Теперь рассмотрим, как использовать ссылки, вложенность, порядок и другие функции с помощью инструмента.
+
+
+У фреймворка есть «козырь в рукаве» — это селекторы атрибутов. Он предлагает широкий выбор элементов для разработки: от картинок и видео до айфреймов. Мы часто будем использовать его в наших примерах.
+
+
+### Ссылки
+
+
+
+
+ **CSS код**
+
+```css
+a#kopyl-link[href="kopyl.dev"] {
+ display: block;
+}
+
+#kopyl-link::before {
+ content: "Ссылка на наш сайт";
+}
+```
+
+
+
+
+ **Сгенерированный HTML**
+
+```html
+
+```
+
+
+
+
+
+ **CSS код**
+
+```css
+a#kopyl-link[href="kopyl.dev"][target="_blank"] {
+ display: block;
+}
+```
+
+
+
+
+ **Сгенерированный HTML**
+
+```html
+
+```
+
+
+
+
+
+ **CSS код**
+
+```css
+#parent {
+ width: 200px;
+ height: 200px;
+ background-color: blue;
+}
+
+#parent > #child {
+ width: 100px;
+ height: 100px;
+ background-color: green;
+}
+```
+
+
+
+
+ **Сгенерированный HTML**
+
+```html
+
+```
+
+
+
+
+
+ **CSS код**
+
+```css
+#parent > #foo:last-child {
+ font-size: 10px;
+}
+
+#foo::before {
+ content: "Я последний";
+}
+
+#parent > #bar:first-child {
+ font-size: 20px;
+}
+
+#bar::before {
+ content: "А я первый";
+}
+```
+
+
+
+
+ **Сгенерированный HTML**
+
+```html
+
+```
+
+
+