Методики поддержки стилей

Поддержка кода через призму двух парадигм программирования

Функциональное программирование

  • Оно декларативное — мы пишем так, чтобы код можно было максимально реиспользовать и не говорить компьютеру раз за разом что мы хотим в точности получить. Это чем-то похоже на абстракцию.
  • Оно чистое — мы не изменяем и не модифицируем ничего за пределами области видимости функции. И по этой причине…
  • Оно неизменяемое — вам не захочется оказаться в ситуации, когда вы передаете одинаковые значения и получаете разные результаты нескольких вычислений.

Объектно-ориентированное программирование

Применимо к CSS

  • Вы избегаете коллизий. В этом месте ООП иногда наносит удар исподтишка.
  • Вы избегаете правильного нейминга. Нейминг — сложная штука. Вы можете не заморачиваться за нейминг при таком подходе.
  • Вы избегаете работать с каскадом. Я уточню этот момент ниже.
  • Большие и маленькие компании делают редизайн каждые 1–2 года. Если у вас большая кодовая база с множеством специалистов в штате и перед вами встает задача изменить высоту строки с 1.1rem на 1.2rem везде, то вы вынуждены заходить в каждый модуль и менять значение? Глобальный или расширяемый объект становится в этом случае крайне полезным.
  • Каскад может быть полезен, если вы понимаете и правильно организуете его. Это сложное проектирование программного обеспечения. Вам нужно смотреть на то, что вы создали и принимать решения о структуре со всей ответственностью. Вы решаете, что может находиться на верхнем уровне и должно быть наследовано другими, более маленькими кусочками. Это помогает избегать лапши в CSS и позволяет соблюдать принцип DRY.
  • CSS это про дизайн. Хорошим дизайн можно назвать, если он монолитный, целостный. Кодовая база CSS, спроектированная по всем правилам, облегчает дальнейшую коллаборацию. CSS может служить средством самопроверки дизайнера: “Подождите, тут стоит другая кнопка. Почему?” Каскадность в случае UI/UX дает свои плоды.
  • Нейминг сильно помогает при написании документации. Это острый момент и я не до конца уверена в абсолютной его необходимости, но стоит иметь это в виду. Любите ли вы БЭМ, SMACSS/OOCSS или Атомарность, правильный нейминг может дать вам много информации о месте использования и назначении определенного класса.

Характерные общие черты

На будущее

  • CSS
  • Стили, заданные с помощью JavaScript

--

--

--

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

Making A Simple To Do Task

How to Create a Shopping Cart with a Badge 🛒

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

HTML: “HOW TO USE IMAGE ELEMENT IN HTML”