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

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

Возвращаясь к теме… CSS-алгоритмов! Я так взволнована! Перед тем, как перейти непосредственно к описанию, позвольте мне ответить на один вопрос: Что же такое CSS-алгоритм?

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

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

В первой версии Algorithms of CSS вторая часть доклада была посвящена сравнению написания алгоритмов во время вайтбоард собеседований с написанием CSS-алгоритмов. Вот основные этапы разработки алгоритма, согласно интервью Cracking the Coding:

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

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

Я начинаю писать свой псевдокод в виде блоков, поскольку, в конечном итоге, все CSS-разработчики программируют блоки (ещё один твит, который хорошо бы превратить в статью). Вот какие блоки получились:

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

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

Теперь, когда у нас есть чёткое понимание, что должен делать наш алгоритм — и, главное, что он не должен делать — пора приступить к непосредственному программированию блоков где-нибудь в безопасной среде, желательно отдельно от продуктовой кодовой базы. Эта среда должна быть быстрой и изолированной, но также должна быть производительной и предоставлять все необходимые инструменты, нужные вам для написания CSS. Например, SCSS миксины и переменные. Бред Фрост назвал это средой для фронтенд-воркшопов. И CodePen был создан специально для этого.

scratch-pad.scss

В нашей структуре SCSS-файлов есть файл scratch-pad.scss, который загружается только в библиотеку компонентов (она же мастерская). В самом начале этого файла есть комментарий // stylelint-disable, отключающий линтинг кода.

// 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, который работает

Что это за «чётко определенная декларация или набор деклараций», которая решит нашу задачу? Какие из блоков требуют деклараций? Как свойства и значения меняются при достижении контрольных точек? Какие функции 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 (±∞)

3.6K Followers

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