Каталог RSS-каналов
Статистика

RSS-каналов в каталоге: 3394

Добавлено сегодня: 0

Добавлено вчера: 0

Hi-Tech / Интернет

Компоненты и разделение ответственности

CSS-LIVE 10.07.2018 в 18:48

Жизнь во фронтенде

Перевод статьи Components and concerns c сайта adactio.com, опубликовано на css-live.ru с разрешения автора — Джереми Кита

Порой мы слишком увлекаемся ложными противопоставлениями в мире веб-дизайна и веб-разработки. Недавно я подметил одно, регулярно всплывающее в области дизайн-систем и компонентов.

Это насчет разделения ответственности. У веба долгая история разделения структуры, представления и поведения с помощью HTML, CSS и JavaScript. Оно исправно служит нам. Если писать код в таком порядке, добиваясь, чтобы нечто работало (в какой-то мере), прежде чем добавлять следующий слой, результат будет надежным и устойчивым к сбоям.

Но в теперешнюю эру компонентов многие указывают, что есть смысл разделять вещи в соответствии с их функцией. Вот что пишет Дайана Маунтер в своей великолепной статье о дизайн-системах в Гитхабе:

Вместо того, чтобы разделять ответственность по языкам (как HTML, CSS и JavaScript), мы стремимся к модели разделения ответственности на уровне компонентов.

Это очень созвучно тезису, высказанному ранее в презентации Кристиано Растелли.

Разделение ответственности в соответствии с задачей каждого компонента более чем логично… но это не значит, что надо перестать разделять структуру, представление и поведение! Почему бы не делать и то, и другое?

В «традиционном» разделении ответственности в вебе (HTML/CSS/JavaScript) нет ничего, что ограничивает его только простыми страницами. Я бы сказал, что оно как раз лучше всего работает, если применять его на уровне чего-то мелкомасштабного.

В своей статье «Сначала библиотека паттернов: подход к управлению CSS» Рейчел советует начинать каждый компонент с хорошей разметки:

Вам всегда стоит начинать с хорошо структурированной разметки.

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

По сути это подход по правилу языка с наименьшими возможностями (чем более мощным языком обрабатываются данные, тем сложнее как-то использовать эти данные в дальнейшем, поэтому если задачу можно решить простым, чисто описательным языком, не надо выбирать сложный процедурный; иногда считается частным случаем принципа минимальных привилегий применительно к выбору языка — прим. перев.). В главе 6 книги «Устойчивый веб-дизайн» я наметил трехэтапный процесс, которым я руководствуюсь при разработке для веба:

Определить основную функциональность Сделать эту функциональность доступной с помощью самой простой технологии, какой только можно Добавлять улучшения!

Та глава полна примеров, как применять эти шаги на уровне всего сайта или продукта, но не надо на этом останавливаться:

Этот трехэтапный процесс можно применять и в масштабе отдельных компонентов на странице. «В чем основная функциональность этого компонента? Как мне сделать эту функциональность доступной с помощью наипростейшей технологии? А как теперь я могу ее улучшить?»

У разделения ответственности при создании страниц и при создании компонентов есть еще одно общее преимущество. В случае страниц, вопрос «В чем тут основная функциональность?» поможет вам подобрать хороший URL. Применительно к компонентам этот же вопрос поможет придумать удачное имя… а это то, из чего складывается ядро хорошей дизайн-системы. В своей блестящей книге «Дизайн-системы» Алла рекомендует задавать вопрос «В чем цель?», чтобы добиться хорошего общего языка для всех, кто работает с компонентами.

Мой тезис таков:

Разделять структуру, представление и поведение — это хорошо. Разделять интерфейс на компоненты — это хорошо.

Эти идеи не противоречат друг другу. Представлять их как некий взаимоисключающий выбор — всё равно, что говорить «раньше я ел итальянскую еду, но теперь я пью итальянское вино». Они лучше всего работают в комбинации друг с другом.

Другие записи ленты

Эффективная работа над стандартами, часть 2: трудный путь к компромиссу 03.07.2018 в 15:10

Устойчивый, декларативный, контекстный (новый взгляд на сильные стороны CSS) 01.07.2018 в 12:57

11 лучших англоязычных ресурсов для верстальщиков 30.06.2018 в 08:56

Состояние дел в вебе: главные стратегии оптимизации изображений 24.06.2018 в 19:49

Еженедельная подборка красивых эффектов на CSS/SVG/JS #79 09.06.2018 в 21:14

Алгебра в calc(), новая специфичность селекторов 4 уровня и другие майские новинки CSS 31.05.2018 в 18:32

Где всё сложно с переносами строк. Вот все CSS- и HTML-хитрости для этого 28.05.2018 в 08:24

Eqio — простая, компактная альтернатива выражениям от элемента/контейнера 22.05.2018 в 08:40

Более доступная разметка с display:contents 17.05.2018 в 09:18

Движение по траектории в CSS помимо «большой тройки» свойств 14.05.2018 в 11:03