Не усложняйте масштабируемый CSS

Поговорим о масштабе

Четыре ключевые вещи

Думаю, что сегодня мы сосредоточимся на четырёх ключевых вещах. В оставшейся части статьи я проведу вас по каждой из них. Теперь вы знаете, сколько вам предстоит меня терпеть.

1. Без паники, 2. Разговаривайте, 3. Консистентность, 4. Упрощайте

Без паники

Одна из моих любимых книг — «Автостопом по Галактике». В этой книге рассказывается, как Землю взрывают в ходе строительства гиперпространственной магистрали и главный герой, Артур Дент отправляется в путешествие автостопом по просторам космоса вместе со своим приятелем-пришельцем Фордом Префектом.

«Без паники»

Текущее положение дел в CSS

:root {
--primary: #8e8e8e;
}
.box {
background: var(--primary);
}
.badge {
color: var(--primary);
}

Sass для победы!

Весь этот нативный функционал клёвый, правда? Не забывайте и о нативной вложенности. Но кто делает всю работу, выполняет все эти функции? Правильный ответ: браузер!

Разговаривайте

Похоже, что мы живём в век, когда все инструменты и методологии придуманы лишь затем, чтобы не общаться друг с другом.

Разраб #1 — Лукреция

Лукреция разрабу #2, Изабелла

Изабелла Лукреции

  • Общее решение заинтересованных сторон
  • Проблема устаревшей кодовой базы
  • Дизайнерское решение

Лукреция

Документация — ваше всё

Другой невероятно полезный способ коммуникации, не предполагающий разговора, это письмо. Я люблю писать, и вы наверняка заметили, что я пишу много…На самом деле я записываю практически всё. Потому что не знаю, когда мне что-нибудь из этого может понадобиться. А ещё записи помогают мне всё запомнить.

.card {
background-color: #ffffff !important;
}
.card {
/* Когда карточка используется в устаревшем приложении, то случаются коллизии стилей. Поэтому, к сожалению, пришлось прибегнуть к этому ядрёному решению. Эта часть однозначно нуждается в рефакторинге */
background-color: #ffffff !important;
}

Консистентность

Я думаю, что консистентность это ключ к масштабированию CSS (простите, что я снова использую термин «Масштаб»). На самом деле это именно то, что пытаются дать вам все эти чрезмерные абстракции. Но, мне кажется, они зашли слишком далеко.

Каскад

Буква «С» означает «Каскад» (Cascade). Каскад моя любимая вещь в CSS, если использовать её правильно. Вы можете написать совсем немного CSS-кода и получить поистине прекрасный результат. В этой методологии каскад стоит на первом месте. Я прописываю дефолтные значения, темы и типографику как можно выше. Это очень мощно.

Блок

Вот есть ваш компонент, карточка или кнопка. Это строительный блок интерфейса. И это правда так — часть конструкции и ничего больше.

Элемент

Это нечто, что зависит от блока — дочерний элемент. Он всегда живёт внутри родительского блока. Хороший пример с карточкой. Внутри неё может быть card__image.

Утилита

Под утилитой я понимаю класс, который делает что-то одно и делает это хорошо. Как водопроводчик или открывашка. Пример утилитарного класса — класс, центрирующий текст или с неким верхним отступом. Просто. Низкоуровневый профильный инструмент.

Токен

На самом деле это тот же утилитарный класс, но имплементирующий дизайнерский токен. Частно генерируется отдельным инструментом.

  • Размера текста
  • Отступов между элементами
  • Внутренних отступов

Упрощение

Было бы странно, если бы я писал статью с названием «Не усложняйте масштабируемый CSS» и не сказал ни слова об упрощении, правда?

.card {
background-color: #ffffff !important;
}
.auto-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
grid-gap: 1rem;
}
.auto-grid > * {
max-width: 25rem;
margin-left: auto;
margin-right: auto;
}
.auto-grid > * + * {
margin-top: 1rem;
}

Притормозите

Последняя остановка в процессе упрощения и, на самом-то деле, последний пункт перед тем, как я закончу — «притормозите».

--

--

Frontend-дева. Верстаю, пишу и перевожу статьи, менторю, выступаю. Поддержать переводы: https://www.tinkoff.ru/sl/2QSPTULCQcC

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Workafrolic (±∞)

Workafrolic (±∞)

3.6K Followers

Frontend-дева. Верстаю, пишу и перевожу статьи, менторю, выступаю. Поддержать переводы: https://www.tinkoff.ru/sl/2QSPTULCQcC