Іскріння радості в системі дизайну

Натисніть, щоб дізнатись більше про автора Маринелла Мастросимоне.

Будь-який розробник інтерфейсу випробував би задоволення, відкривши нещодавно випущену сторінку за допомогою інспектора Chrome і знайшовши зрозумілий і семантично чистий код. Навіть не Марі Кондо міг би зробити краще!

Скільки разів ви переглядали старий код і думали: «Боже, як це погано? Хто призначив класи? Який безлад!» На перший погляд це може бути робота симпатичного, але незграбного колишнього колеги, але Git не бреше, і Visual Studio швидко розкриває автора: Якого біса? Це я створив цю непристойність!

Може бути й позитивна сторона: з часом ви покращили свої навички, а код, який ви пишете сьогодні, акуратніший, ніж учора.

Коли працюєте як команда над складним продуктом, який швидко розвивається, цей індивідуальний процес несе своє: Тоді має бути прийнята спільна номенклатурна система.

«Прибирання має полягати в тому, щоб відновити баланс між людьми, їхніми речами та будинком, в якому вони живуть». – Марі Кондо

Робота в команді 

Оскільки називати речі — це рідкісний талант, прийняття конвенції про іменування допомагає працювати в команді та перетворює гігантський знак питання про те, як назвати об’єкт, на автоматичний процес, який слідує точним правилам, які, у кращому випадку, хтось визначив до вас.

Заспокійливо мати і акуратну шафу, і єдиний код, чи не так?

«У інформатиці є лише дві важкі проблеми: недійсність кешу та іменування речей». – Філ Карлтон

Розробка інтерфейсу Мислення в BEM

Дизайнер інтерфейсу, здатний досягти хорошого рівня абстракції, може вже мати на увазі структуру html компонентів під час їх малювання, від чернетки до Figma.

Після міркувань про користувацький досвід та естетичні дослідження інтерфейсу, дизайнер може зосередитися на організації та іменуванні компонентів і рівнів для підготовки процесу розробки коду, передбачаючи потенційні проблеми розробки.

BEM надає модель, яка допомагає міркувати в таких термінах: асоціація між figma і ДОБРЕ компонент = блок, шар / група = варіант елемента = ідентифікатор, працює добре.

Подібно до того, як наша мила японська героїня пропонує організувати простір найпростішим способом, розділивши одяг відповідно до логіки, організованої за типами, так і при розробці макету корисно розбирати й групувати за наборами та підмножинами відповідно до визначеного протоколу. .

Важливо обговорити з технічними спеціалістами, щоб перевірити доцільність та номенклатуру, а також за допомогою колег із FE попрацювати над функціональними та спільними рішеннями для цього «комода», який в основному служить їм.

«Слова можуть бути кулями, але вони також можуть бути командами порятунку». – Йон Кальман Стефансон

Що таке BEM?

BEM – це конвенція, створена в 2007 році (читайте тут, як він народився) для покращення співпраці в розробці інтерфейсу.

Завдяки BEM ми можемо призначати класам наших елементів DOM імена, які чітко визначають тип та ієрархію їх вмісту:

Блокувати є основним контейнером, який містить набір інших елементів, навіть на кількох рівнях вкладення: наш «комод», щоб уточнити

Елемент є дочірнім блоком і розрізняє кожну з основних секцій, які містять інші елементи: «коробка, що розділяє шкарпетки», просто

ідентифікатор є індикатором, який змінює зовнішній вигляд блоку або елемента, ніби етикетки контейнерів перетворюють сорочки на вовняні светри

Приклад: l-header, компонент нашої системи проектування, має внутрішню структуру, яка може містити рядки, об’єкти або інші незалежні компоненти.

Надійна архітектура CSS

У нашій компанії ми вибрали BEM як еталонну модель серед багатьох доступних конвенцій (OOCSS, SMACSS, SUITCSS, Atomic), оскільки його особливості ідеально адаптуються до потреб системи проектування:

Чітка структура

Маючи семантику, подібну до структури React, ми можемо мислити компонентами: кожен компонент — це блок, який легко перехопити та розпізнати в проекті також у скомпільованому HTML. Ось зібраний l-заголовок. Хіба це не красиво?

Модульність

Кожен блок складається з окремих блоків, кожен з яких виконує конкретне завдання і може взаємодіяти з іншими або використовуватися в різних моделях.

Нижче наведено наш l-заголовок, який використовується в різних розділах інтерфейсу РНК, наш Платформа MLOps.

Багаторазовість

Кожен компонент, зберігаючи свої властивості, може змінювати форму або колір відповідно до свого батьківського або ідентифікатора. Ось як наш l-заголовок змінює свій вигляд залежно від контексту та вмісту. У цьому випадку продукт має структуру нашої системи дизайну, але в світлому режимі та з іншим основним кольором у продукті Йти жити.

ABEM: корисна адаптація BEM 

Відрізнити кімнату від шафи, а шафу від шухляди природно, коли ми наводимо порядок у своєму будинку. Коли мова заходить про а система проектування, все ускладнюється.

На щастя, на допомогу приходять деякі особливості нашого методу.

Спільний код має на один модуль більше, ніж ідентифікатор Block_element-ідентифікатор, фактично більш свіже схилення, що називається АВЕМ (*) дозволяє нам додаткову класифікацію та більшу гнучкість.

(томічний) BEM визначає тип блоку з префіксом з однієї літери, тоді як класи атомний дозволяє використовувати глобальні стилі, обмежуючи відому проблему жорсткості вихідної системи.

Наш чистий компонент BEM React міг би виглядати так:

Замість цього ми вирішили звільнити клас модифікатора від обмеження, що містить блок.

Таким чином, ми також можемо динамічно керувати класами стану або помічниками, які краще описані нижче.

Специфіка селектора

Структура ABEM надзвичайно цікава завдяки відкритості атомних класів, але вона недостатньо близька до бажаного рішення. Для нашої структури ідеально використовувати префікс номенклатури, що не пояснює, як запропоновано в цю статтю.

Ми можемо розрізнити тип блоку, щоб розпізнати жанр нашого селектора:

• Схема модуля l- l-заголовок l -бічна панель l-модальна

Ці модулі не мають естетичних елементів і використовуються виключно для розташування компонентів і структурування макета програми.

• Компонент c- c-toolbox c-detail c-tab c-кнопка
  Вони утворюють основу програми та містять усі функції окремого компонента.
• Помічники h- ч-показати ч-сховати
  Ці корисні класи мають одну функцію (і зазвичай використовуються для позиціонування або видимості).
• Штати є- має- є-видимий завантажено
  Вказує на різні стани, які може мати компонент змінного струму.

Семантика

Тепер, коли ви можете надати своєму проекту React акуратний стиль, як ви думаєте, чи зможете ви не замислюватися, чи є елемент, який ви використовуєте, заголовком, абзацом, міткою чи списком? Розслабтеся!

Класифікація кожного об’єкта dom відповідно до нашої моделі не звільняє нас від необхідності підтримувати правильну семантику в html, призначаючи відповідний тег типу вмісту, оскільки сторінка без стилю повинна підтримувати правильну доступність – наприклад, для систем автоматичного зчитування коду, корисних для сліпих людей, і алгоритмів Google, серед іншого.

Послідовність найменування

Найважче завдання з усіх: назвати об’єкти так, щоб вони були досить загальними, щоб бути модульними, зберігаючи при цьому описову здатність їхнього вмісту.

Ви дійсно хочете назвати "c-conumptions" блок гістограми, що показує споживання в таблиці? Справді, ви створюєте цей новий компонент, щоб показати споживання клієнтів, але цей самий компонент може бути корисним, наприклад, для візуалізації деталей ефективності послуги в іншому середовищі, де назва може вводити в оману. Тож давайте назвемо це «c-chart-micro», щоб мати більш широкий рівень деталізації і, можливо, зробити діаграму взаємозамінним компонентом з областю діаграми або невеликою круговою діаграмою.

«Nomen omen (ім'я, доля)»

Весняне очищення кодової бази

Як і кожного квітня у побутових звичках багатьох домогосподарств, настав час «весняного прибирання»: у нашій компанії ми оновлюємо систему дизайну, створюємо нові шаблони дизайну, оновлюємо існуючі та позбавляємося від тих, що були. не «даруй нам радість».

Нещодавно ми також почали докладати великих зусиль для переміщення нашої архітектури інтерфейсу до підходу «мікро-фронт-енд». Хочете почути більше? Слідкуйте за оновленнями.

Джерело: https://www.dataversity.net/sparking-joy-in-a-design-system/