Процесс написания CSS-алгоритмов

Немного истории и определений

  • полезная парадигма именования (именование в конечном итоге оказывается самым сложным),
  • знакомая концепция для тех, кто приходит в CSS из бэкенда (и кто может списать CSS со счетов, считая его жёстким, странным, раздражающим или нелогичным),
  • интригующая концепция для новичков в веб-разработке (привлекает больше внимания к CSS!),
  • указывает на то, что CSS — это искусственно созданный язык (по словам Рейчел Эндрю), с помощью которого мы можем делать кучу классных штук.

Как писать CSS-алгоритмы

  1. Псевдокод
  2. Грубый набросок решения
  3. Тестирование алгоритма
  4. Оптимизация

Шаг 1: псевдокод из блоков

  1. Разобраться, какие блоки есть и что в них вложено
  2. Дать имена блокам
  3. Составить список того, что меняется между контрольными точками
  4. Определить, за что будет отвечать алгоритм, а за что — некий другой механизм

Шаг 1.5: настройка рабочего окружения

scratch-pad.scss

// Sass (Scss).kss-box {
background-color: lemonchiffon;
border: 5px solid skyblue;
margin: $spacer-025;
> .kss-box {
background-color: aliceblue;
border-color: hotpink;
> .kss-box {
background-color: white;
border-color: peachpuff;
border-width: 1px;
}
}
}

Шаг 2: Грубый набросок решения

Создайте свои именованные блоки

Разберитесь с алгоритмом / напишите грязный CSS, который работает

Шаг 3: Тестирование алгоритма

Шаг 4: Оптимизация (или рефакторинг)

Ваш грязный код постепенно превращается в красивый цветок!
Запись для алгоритма шаблона статьи в библиотеке компонентов Cantaloupe.
// HTML<div class="a-article-grid // kss-box">
<header class="a-article-grid__header // kss-box">
<div class="kss-height-sm"></div>
</header>
<div class="a-article-grid__author // kss-box">
<div class="kss-height-sm"></div>
</div>
<div class="a-article-grid__social // kss-box">
<div class="kss-height-sm"></div>
</div>
<div class="a-article-grid__main // kss-box">
<div class="kss-height-lg"></div>
</div>
</div>

Прощальные заметки для тех, кто интересуется CSS-алгоритмами

  1. Назовите их утилитами (они и так ими являются), но найдите способ пометить их как отличные или более сложные по сравнению с остальными утилитами, чтобы другие разработчики знали, что они требуют особого использования и обслуживания.
  2. Если это алгоритм создан для определенной части интерфейса, для которой уже есть файл, добавьте его в CSS этого файла и сгруппируйте деклорации под краткими комментариями с пометкой рассмотреть возможность абстрагирования в отдельный шаблон, не зависящий от UI.
  3. …у меня есть и другие мысли, но я добавлю их позже!

--

--

--

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 (±∞)

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

More from Medium

Class vs Functional Component in React

How to Create a Shopping Cart with a Badge 🛒

Tooltip on disabled options in Material UI Autocomplete

What does CSS do? The power of Cascading Style Sheets (1/3)