(S) Найкращі практики CSS, які ви ще не знали

Ілюстрація Паула Дженда

Навіть якщо ви зараз будуєте свої програми за допомогою популярних рамок, таких як React, Angular або Vue.js, вам все одно потрібно додати до них деякі стилі. Залежно від технології, яку ви використовуєте, вам потрібно писати свої стилі певним чином. Наприклад, для React, завдяки своєму компонентному характеру, краще писати стилі за допомогою модулів CSS. Якщо ви хочете використовувати абсолютно нові функції CSS, було б розумно використовувати CSSNext. Не забувайте про хороші опроцесори CSS, як-от Sass чи LESS. Ви можете подумати - так багато інструментів, я думаю, стилі написання різні для кожного з них. Так, ви праві. Але основи однакові.

У цій статті я хочу представити кілька приємних порад щодо написання надійних та бездоганних CSS, незалежно від того, чи любите ви користуватися модулями CSS або Sass / LESS. Ці поради представлені в синтаксисі SCSS, тож якщо вам потрібен деякий вступ до Sass, ось хороше місце для початку. Якщо ви використовуєте звичайний CSS, розширений CSS Далі, ця стаття також для вас. Ці основні поняття можна легко використовувати в інших інструментах CSS або препроцесорах.

Структуруйте свої стилі

Добре продумана структура папок допомагає підтримувати ваш проект. Те саме стосується і ваших стилів. Важливо розділити код відповідно до елементів, на який вони посилаються. Зберігання всіх ваших правил в одному величезному файлі styles.scss точно призведе до неприємностей. Особливо, якщо ви хочете розширити масштаб свого проекту та додати нові компоненти.

З точки зору масштабування проекту, важливо встановити належну структуру стилів. Ви повинні зосередитись на наданні структури, яка буде упорядковувати ваші файли відповідно до компонентів, які ви використовуєте у своєму проекті. Я пропоную вам відокремити базові стилі від стилів компонентів та тем. Також є сенс поєднувати всі змішані та змінні в одній папці, залежно від їх ролі.

Нижче наведено приклад структури папок:

І main.scss:

Назвіть кольори

Отже, у вас є дизайн веб-сайту, і ви хочете почати з макета кодування. Який би був розумний підхід до управління кольорами у вашому проекті? Просто ви можете записувати значення кольорів безпосередньо в правилах стилю. Але такий підхід у майбутньому може стати клопітким. На щастя, і CSS, і Sass дає нам змінні.

У Sass ви можете зберігати будь-яке значення як змінне, тому доцільно зберігати значення кольору як змінне. Здебільшого ми використовуємо HEX (шістнадцяткові знаки) для визначення значення кольору. Для людини HEX схожий на cypher, тому що це формат, призначений для комп'ютерів. Важко сказати, який колір записаний як # 7fffd4 або # ffd700 (якщо ви їх розумієте, можливо, ви не зможете пройти тест CAPTCHA). Перший - аквамарин, а другий - золото. Чи не було б простіше, щоб ці кольори були названі таким чином?

Деякі кольори мають певну роль у дизайні веб-сайтів. Один колір може використовуватися як колір бренду, інший - для тла. Хоча, пишемо код для браузера, нам слід створити надійну структуру для наших кольорів. Добре мати допомогу дизайнера. Якщо ви не можете переконати його описати палітру кольорів, все одно ви можете зробити це самостійно.

По-перше, слід почати з називання своїх кольорів. Безумовно, важко перевести значення HEX на читабельне для людини ім'я. На щастя, у нас є для цього належні інструменти. Я використовую веб-сайт Name that Color, але ви можете використовувати будь-який інший інструмент, який вам більше подобається.

Коли у вас є імена для ваших кольорів, ви можете призначити їм ролі. Ви повинні визначити, який колір використовується як основний, а який - вторинний. Якщо ви не впевнені, як встановити ролі для своїх кольорів, можете захопити трохи натхнення з кольорової гами Bootstrap.

Ось приклад налаштування кольору:

Згладьте вкладені декларації

Використання препроцесора CSS не тільки додає деякі корисні функції до набору інструментів, але й допомагає в організації коду. Найкращим прикладом є декларування стилів. У Sass можна вкласти селектор в інших селекторах, щоб ви могли побачити, яке відношення між ними. Це дійсно потужна функція, тому нею можна зловживати досить легко.

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

Дивіться приклад нижче:

Не зловживайте посиланнями батьків

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

Іноді використання & може вводити в оману. Ось приклад поганого використання цього селектора:

Як бачите, селектор ampersand може додати зайвих складностей вашим стилям і ускладнює читання вашого коду.

Запишіть властивості у змістовному порядку

Не потрібно сортувати свої властивості, але слід. Правильно відсортовані властивості вказують на відповідність стилю коду. Більше того, це робить сканування вашого коду більш зручним. Немає жодного джерела істини щодо сортування властивостей. Ви можете сортувати їх за алфавітом або за будь-якими іншими параметрами. Я використовую трохи модифіковані правила, що містяться у керівництві щодо форматування методології SMACSS. Ось моє рекомендоване замовлення:

  • Поле (положення, дисплей, ширина, поле тощо)
  • Текст
  • Фон
  • Кордон
  • Інше (в алфавітному порядку)

Використовуйте умову іменування класу

Коли ваш проект зростає, стилі можуть стати досить брудними. Особливо, коли потрібно розширити існуючі правила. На жаль, CSS не пропонує жодних корисних механізмів, які б запобігли зіткнення простору імен. Іншими словами, всі стилі, написані в CSS, є глобальними, тому цілком можливо, що ви можете несподівано перезаписати деякі властивості.

Через каскадний характер CSS важливо визначити дуже конкретні селектори. Це не означає, що слід використовувати селектори з високою специфічністю. Вам потрібно уникати загальних селекторів, як, наприклад, селекторів тегів, коли ви хочете додати стилі для певного елемента.

Ось приклад:

Сподіваємося, написання стилів, що підтримуються, не так вже й складно, коли ми можемо використовувати одну з популярних конвенцій іменування класів - BEM, OOCSS або SMACSS. Я віддаю перевагу BEM, що є дуже популярною методологією, створеною розробниками Яндекс. Його назва - абревіатура блоків, модифікаторів та елементів елементів. Якщо ви не знайомі з BEM, пропоную вам ознайомитися з її документацією.

Ось наш приклад після біміфікації:

Напишіть описові медіа-запити

Медіа-запити - це найважливіша частина розробленого чуйного веб-сайту. Завдяки їм ми можемо визначати стилі для різних дозволів та змінювати макет відповідно до пристрою користувача. У CSS медіа-запити - це набір правил, які перевіряються на браузер користувача. Після виконання стилів, визначених у блоці запитів медіа, застосовуються до веб-сайту.

Ви можете орієнтуватися на різні пристрої, використовуючи запити, в яких описуються типи та особливості медіа. Завдяки безлічі правил поєднання, медіа-запит може стати складним досить легко.

Щоб зробити медіа-запити більш зручними для розробників, ми можемо призначити його правила змінній. У Sass можна використовувати рядок як звичайний CSS-код, використовуючи інтерполяційні дужки # {}.

Той самий трюк, який ми можемо використати для інших правил. Це може бути зручно для визначення складних правил @supports.

Додайте модульні стилі

CSS має набір дуже корисних селекторів. У більшості випадків ви використовуєте селектор класів або селектор. Але є ще один селектор, який ефективний для написання модульних стилів. Це сусідній селектор сестер, відомий також як селектор плюс.

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

Це дуже зручний спосіб визначення стилів, і мій улюблений. Але є деякі компроміси. Перш за все, це не найефективніший вибір. Якщо ви більше дбаєте про продуктивність, а не про модульність, не слід їх використовувати. По-друге, використання селекторних симуляторів підвищує специфічність, тому пізніше його стилі можуть бути важко перезаписати Зрештою, його варто використовувати, коли ви хочете застосувати стилі на основі присутності елементів.

Подальше читання

Тепер ви знаєте, як написати читабельні, підтримувані та модульні стилі. Якщо вам потрібно більше порад, як писати стилі, якими можна пишатися, дивіться ці статті:

  • Змінні кольори Sass, які не всмоктує Ландон Шропп
  • Розширений SCSS, або 16 класних речей, про які ви, можливо, не знали своїх таблиць стилів, які могли б зробити Jarno Rantanen
  • Суміжні селекторні характеристики W3C
  • Модульні угоди про іменування CSS Джона У. Лонга
  • Чуйний веб-дизайн в Sass від Мейсона Вендела
  • Як структурувати проект Sass Джона Лонга

Вам сподобалось? Торкніться кнопки ! Дякую!

Ви можете знайти мене в Twitter і Github.