Архітектура інвертованого трикутника: як керувати великими проектами CSS

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

З часом це трапляється пару разів, і до того, як ви дізнаєтесь, "дно" вашого файлу CSS складається з кількох сотень рядків коду, який ніхто не розуміє і ніхто не наважується видалити, оскільки це неминуче зламає речі.

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

Представляємо архітектуру Перевернутий трикутник

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

Вперше ITCSS був представлений Гаррі Робертсом, і його найкраще візуалізувати за допомогою перевернутого шаруватих трикутників. ITCSS визначає спільні CSS-правила проекту логічно та розумно, одночасно забезпечуючи надійний рівень інкапсуляції та роз'єднання, який перешкоджає невзаємоділеним CSS-правилам перешкоджати один одному.

ITCSS є дуже гнучким, оскільки не змушує вас використовувати будь-які специфічні методології узгодження імен, такі як SMACCS, OOCSS або BEM.

Принципи

ITCSS працює, структуруючи весь ваш проект CSS відповідно до цих 3 принципів:

  1. Загальний для явного

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

  2. Від низької до високої специфічності

    Селектори з найнижчою специфікою з’являються на початку проекту. Специфіка неухильно зростає. Таким чином ми уникаємо конфліктів конкретності та перевизначення конкретності використання !important.

  3. Далекосяжні до локалізованих

    Селектори на початку нашого проекту впливають на багато DOM-елементів, наприклад стилі скидання вашого браузера, тоді як селектори пізніше в нашому проекті стають дуже локалізованими, наприклад, конкретні стилі для одного компонента.

Шари трикутника

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

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

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

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

Гаррі Робертс, творець ITCSS, виклав сім шарів. Він наказав їм наступне:

  1. Налаштування

    Якщо ви використовуєте препроцесор, такий як SCSS, це ваша відправна точка. У цьому шарі ви визначаєте свої змінні.

  2. Інструменти

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

  3. Загальний

    У цьому шарі ми розміщуємо всі дуже високі, далекосяжні стилі. Цей шар часто однаковий у всіх ваших проектах, оскільки містить такі речі, як Normalize.css, скидання CSS та, наприклад, правила розміру вікна.

  4. Елементи

    У цей шар ми додаємо стилі для оголених, некласифікованих елементів HTML. Наприклад, ви можете подумати про підкреслення якорів при наведенні або розмір шрифту для різних заголовків.

  5. Об'єкти

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

  6. Компоненти

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

  7. Козирі

    Козирний шар - це брудний шар. Навіть після структурування стилю відповідно до принципів ITCSS, може статися так, що вам доведеться використати, !importantщоб замінити деякі сторонні стилі, наприклад. Зробіть це в цьому шарі, оскільки це найбільш конкретний, локальний та явний шар.

Кінцевий результат

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

// [email protected] "globals";@import "branding";
// [email protected] "mixins";
// [email protected] "normalize";
// [email protected] "fonts";@import "form";
// [email protected] "grid";@import "wrappers";
// [email protected] "header";@import "sidebar";@import "carousel";@import "card";
// [email protected] "overrides";

Висновок

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

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

Шукаєте роботу в Амстердамі?

Я працюю в Sytac старшим розробником, і ми шукаємо середніх / старших розробників, які спеціалізуються на Angular, React, Java або Scala. Sytac - амбіційна консалтингова компанія в Нідерландах, яка працює для багатьох відомих компаній у банківському, авіаційному, урядовому та роздрібному секторах.

Якщо ви вважаєте, що знаєте, що потрібно для роботи з найкращими, надішліть мені електронний лист на адресу luuk [точка] gruijs [at] sytac [точка] io, і я з радістю розповім вам більше.