Управлявайте големи CSS проекти с ITCSS

Хари Робъртс ще говори в Генерирайте Бангалор на 2 декември. Не пропускайте речта му рефакторинг на CSS, без да губите ума си , в който той ще сподели своите съвети и техники за работа със стария CSS. Резервирайте сега да станете основател на Generate и да получите 50% отстъпка от всички бъдещи Generate конференции по целия свят!



Изглежда, че в момента CSS архитектурата е малко на мода. Това е нещо, за което несъмнено сте чували многократно споменаване през последната година или нещо подобно и с основателна причина: потребителските интерфейси (и екипите, които ги изграждат) стават все по-големи и по-сложни от всякога.



Има редица аспекти на CSS, които го правят обезпокоителен. Той е декларативен, което означава, че няма логика или поток за управление, които да казват на други разработчици много за състоянието или конструкцията на проекта. Той работи в глобално пространство от имена, което означава, че получаваме сблъсъци, изтичащи стилове и неволни регресии. Той използва наследството, правейки всичко донякъде взаимозависимо и крехко. И накрая, неизбежният модел на специфичност може да причини проблеми, когато селекторите се борят помежду си за видно място.

Всичко това са проблеми сами по себе си, но когато работите в някакъв разумен мащаб, те или стават директно по-очевидни, или вероятността да се сблъскате с такива проблеми е статистически много по-висока. Въведете CSS архитектура: начин за планиране и структуриране на вашия CSS за големи и дългосрочни проекти.



Представяме ви ITCSS

Архитектурата, която ще разгледаме днес, се нарича ITCSS - „Обърнат триъгълник CSS“. Това е методология, която включва визуализиране на целия ви CSS проект като пластов триъгълник с главата надолу. Тази йерархична форма представлява модел, който ще ви помогне да поръчате вашия CSS по най-ефективния, най-малко разточителен начин. Нека да копаем!

ITCSS е нещо, върху което работя под една или друга форма вече около четири години. Неслучайно през последните четири години също прекарах изключително работа върху цифрови продукти: големи, продължителни проекти с цели екипи от инженери, работещи върху една и съща кодова база в продължение на месеци.

В този вид среда (наследство, нови функции, многобройни сътрудници, висока скорост, натрупан технически дълг, противоречиви опасения на заинтересованите страни) се изисква много повече старание и структура с кода, който пишем. Ето защо изобретих ITCSS; да помогне на разработчиците, работещи по тези големи проекти, да организират, мащабират и управляват по-добре своя CSS.



Това, което ITCSS цели да направи, е да осигури ниво на формалност и структура на начина, по който пишем нашия CSS. Това не е голямо отклонение от нормата, което означава, че преминаването към ITCSS не трябва да се окаже твърде трудно. Освен това, когато повечето архитектури и подходи се опитват да избегнат досадните аспекти на CSS, ITCSS ги обхваща и опитомява и ги кара да работят в наша полза. ITCSS определя споделените аспекти на даден проект по логичен и разумен начин, като същевременно осигурява солидно ниво на капсулиране и отделяне, което предпазва несподелените аспекти от намеса един в друг.

ITCSS също е невероятно гъвкав. Той е съвместим с аспекти на други методологии като SMACSS, OOCSS и дори BEM. Той може да бъде удължен или върнат обратно, ако е необходимо, в зависимост от вашия проект. Той работи със или без препроцесор и не налага никакви специфични конвенции за именуване (въпреки че винаги бих препоръчал да използвате такъв). Тази гъвкавост означава, че ITCSS може да се използва за всякакъв размер или стил на проекта.

свръхширок ъгъл и камера за снимане

Предпоставки

Преди да се потопим в спецификата, има няколко предпоставки при работа с ITCSS. Всичко това се превръща в стандартна практика за всеки съвременен разработчик на потребителски интерфейс. Първо, без идентификатори в CSS. Идентификаторите са специфични тежести и тяхното използване ще изхвърли нашата специфичност изцяло.

На второ място, трябва да работите с компонентизирана архитектура на потребителския интерфейс. Вече не изграждате по модела „страници“, а по модела джаджи / модули / компоненти (ITCSS ги нарича „компоненти“). Изграждате дискретни, самостоятелни части от потребителския интерфейс като компоненти за многократна употреба.

И накрая, ITCSS изисква да подкрепите архитектура, базирана на клас. Не се страхувате да добавяте класове към вашия HTML; не вярвате, че „по-малко маркиране“ и „чисто маркиране“ са едно и също нещо; и разбирате, че обвързването с класове, а не голи HTML елементи, осигурява по-стабилна и мащабируема архитектура.

Научете как да рефакторирате CSS, без да губите ума си в Generate Bangalore

Научете как да рефакторирате CSS, без да губите ума си в Generate Bangalore

Основни показатели

ITCSS е напълно управлявана архитектура, което означава, че ви казва как да конструирате целия си CSS проект. Той не просто ви казва как да изградите компонентите си, но ви помага да управлявате всичко - от архитектурата на Sass до реда на изход, типографски стилове на ниско ниво до тематизиране и много други.

ITCSS работи, като подрежда целия ви CSS проект по три ключови показателя. Ще ги разгледаме сега.

Необичаен или необмислен ред на източници може да доведе до непостоянно и нестабилно приложение на стилове

Необичаен или необмислен ред на източници може да доведе до непостоянно и нестабилно приложение на стилове

01. Общ за изричен

Започваме с най-общите, ниско ниво, прихващащи всички, незабележителни стилове и в крайна сметка преминаваме към по-изрични и конкретни правила, докато преминаваме през проекта. Може да започнем с нулирането си, след което да преминем към малко по-обхватни правила като h1–6 {}, чак до изключително изрични правила като .text-center {}.

02. Ниска специфичност до висока специфичност

Селекторите с най-ниска специфичност се появяват в началото, като специфичността непрекъснато се увеличава, докато напредваме по проекта. Искаме да гарантираме, че избягваме възможно най-много от Войните за специфичност, затова се опитваме и се въздържаме да пишем селектори с по-висока специфичност, преди тези с по-ниска специфичност. Винаги добавяме специфичност в една и съща посока, като по този начин избягваме конфликти.

03. Далеко до локализирани

Селекторите към началото на проекта засягат много от DOM, като този обхват постепенно намалява, докато преминаваме през кодовата база. Искаме да направим „преминавания“ над DOM, като напишем правила, които прогресивно засягат все по-малко и по-малко от него.

Можем да започнем, като изтрием полетата и подложките от всичко, след това можем да стилизираме всеки тип елемент, след това да стесним това до всеки тип елемент с определен клас, приложен към него и т.н. Това постепенно стесняване на обхвата ни дава формата на триъгълника.

упражнения за графичен дизайн за изграждане на портфолио

Поръчването на нашите проекти според тези ключови показатели има няколко предимства. Можем да започнем да споделяме глобални и широкообхватни стилове много по-ефективно и ефикасно, значително намаляваме вероятността от проблеми със специфичност и пишем CSS в логичен и прогресивен ред. Това означава по-голяма разширяемост и по-малко излишък, което от своя страна означава по-малко отпадъци и много по-малки размери на файловете.

Слоеве

Трите ключови показателя на обърнатия триъгълник

Трите ключови показателя на обърнатия триъгълник

Можем да се придържаме към тези показатели, като разделяме CSS на няколко раздела или „слоеве“. Всеки слой трябва да бъде въведен на място, което почита всеки от критериите. Повечето хора (и архитектури) се опитват да разделят CSS проектите на тематични групи: тук са нашите типографски стилове, тук са нашите стилове на формуляри, тук са нашите стилове на галерията с изображения. Недостатъкът на това е, че не е много симпатично на това как всъщност работи CSS и не подрежда CSS по начин, който най-добре използва, опитомява или се възползва от каскадата, наследяването или специфичността.

В ITCSS всеки слой е логическа прогресия от последния. Повишава се специфичността, става по-ясен и целенасочен и стеснява обсега на използваните селектори. Това означава, че по същество нашият CSS е по-лесен за мащабиране, тъй като го пишем в ред, който само добавя към написаното преди това. Ние не губим време, за да отменим или заменим прекалено мнителния CSS, написан по-рано.

Това също означава, че всяко нещо и всеки вид неща имат свое постоянно, предвидимо място за живеене. Това прави намирането и добавянето на стилове много по-опростени, което е особено полезно, когато редица разработчици допринасят за кодовата база.

По подразбиране ITCSS има седем слоя. Сега ще разгледаме всеки от тях на свой ред.

01. Настройки

Ако използвате препроцесор, започнете от тук. Това съдържа всички глобални настройки за вашия проект. Бих искал да подчертая думата глобален - този слой трябва да съдържа само настройки, които трябва да бъдат достъпни отвсякъде. Настройки като $ heading-size-1 трябва да бъдат дефинирани в заглавията частично. Това гарантира, че този слой остава приятен и тънък и означава, че повечето настройки могат да бъдат намерени заедно с кода, който ги използва, което прави намирането на нещата далеч по-лесно.

Примери за глобални настройки могат да бъдат неща като основния размер на шрифта, цветови палитри, конфигурация (например $ environment: dev;) и т.н.

02. Инструменти

Следващият слой съдържа вашите глобално достъпни инструменти - а именно комбинации и функции. Всеки миксин или функция, които не се нуждаят от глобален достъп, трябва да принадлежат към частта, за която се отнасят. Слоят Инструменти идва след слоя Настройки, тъй като комбинацията може да изисква една от глобалните настройки като параметър по подразбиране. Примери за глобални инструменти могат да бъдат градиентни миксини, миксини за оразмеряване на шрифтове и т.н.

03. Родово

Общият слой е първият, който всъщност създава всеки CSS. В него се помещават стилове на много високо ниво. Този слой рядко се модифицира и обикновено е еднакъв във всички проекти, по които работите. Той съдържа неща като Normalize.css, глобални правила за оразмеряване на кутиите, нулиране на CSS и т.н. Общият слой засяга много от DOM, следователно той е хубав и широк в модела Triangle и се среща много рано.

04. Елементи

Това са голи, некласирани HTML елементи. Как изглежда h1 без клас на него? Как изглежда един външен вид без клас върху него? Слоят Elements се свързва само с селектори на голи HTML елементи (или 'type'). Това е малко по-ясно от предишния слой, тъй като сега казваме „направи всеки h1 толкова голям“ или „направи всеки a определен цвят“. Все още е слой с много ниска специфичност, но засяга малко по-малко от DOM и е малко по-самоуверен, следователно местоположението му в Триъгълника.

Слоят Elements обикновено е последният, в който бихме намерили голи, базирани на елементи селектори и много рядко се добавя или променя след първоначална настройка. След като дефинираме стилове на ниво елемент, всички допълнения и отклонения трябва да бъдат изпълнени с помощта на класове.

05. Обекти

Потребителите на OOCSS ще бъдат запознати с понятието обекти. Това е първият слой, в който намираме селектори, базирани на класа. Те се занимават със стилизиране на некозметични дизайнерски модели или „предмети“. Обектите могат да варират от нещо толкова просто като .wrapper елемент, до системи за оформление, до неща като потомка на постер OOCSS - Media Object. Този слой засяга по-малко от DOM от последния слой, има по-висока специфичност и е малко по-ясен, тъй като сега насочваме към класове секции от DOM.

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

Слоят Компоненти е мястото, където започваме да стилизираме разпознаваеми части от потребителския интерфейс. Тук все още обвързваме класовете, така че нашата специфичност все още не се е увеличила. Този слой обаче е по-ясен от последния, тъй като сега оформяме явни, проектирани части от DOM.

Не трябва да намираме селектори с по-ниска специфичност от един клас в този слой. Това е мястото, където по-голямата част от вашата работа ще се случи след първоначалната настройка на проекта. Добавянето на нови компоненти и функции обикновено съставлява по-голямата част от развитието.

07. Козове

Този слой бие - или „коз“ - всички останали слоеве и има силата да замени всичко, което е минало преди него. Той е неелегантен и тежък и съдържа полезност и помощни класове, хакове и замествания.

Голяма част от декларациите в този слой ще носят! Важно (например .text-center {text-align: center! Important;}). Това е слоят с най-висока специфичност - той включва най-явните видове правила, с най-тесен фокус. Този слой образува точката на Триъгълника.

Следвайки този многослоен, основан на ключови показатели, подход на подреждане на източници на ITCSS ни дава разумно приложение на стилове в нашия проект

Следвайки този многослоен, основан на ключови показатели, подход на подреждане на източници на ITCSS ни дава разумно приложение на стилове в нашия проект

Така че, вместо да групираме нещата в „типографски стилове“ или „стилове на формуляри“, ние ги разделяме на групи, базирани на специфичност, обхват и експлицитност. Този формат ни позволява да напишем своя CSS в ред, който само добавя и наследява от предишното.

как да си намеря дизайнерска работа

Прекарваме много малко време, за да отменим нещата, защото нашата каскада и специфичност сочат в една и съща посока. Ние драстично намаляваме количеството на сблъсъци, течове и предефиниции.

Ако преосмислим Триъгълника като конус, можем да погледнем надолу към него, за да видим обхвата на всеки слой

Ако преосмислим Триъгълника като конус, можем да погледнем надолу към него, за да видим обхвата на всеки слой

Частици

Всеки слой съдържа поредица от частици. Препоръчвам конвенцията за именуване _ .. scss (например: _settings.colors.scss, _elements.headings.scss, _components.tabs.scss).

Тези частици трябва да бъдат възможно най-малки и гранулирани, като всеки от тях съдържа само толкова CSS, колкото е необходимо, за да изпълни ролята си. Така че _elements.headings.scss ще съдържа само правилата h1 до h6 и нищо повече. Ако имате например компонент за заглавие на страница, който прави основната заглавка (напр. H1) и подзаглавието (напр. H2) да изглеждат по определен начин, бихте създали частичен _components.page-title.scss в слоя Components и свързвате върху класове (например .page-title, .page-title-sub), а не върху HTML елементи.

Ето как работи ITCSS: ние не поставяме всички наши стилове, свързани със заглавията, заедно. Вместо това ние поставяме всички наши правила, базирани на елементи, и всички наши правила, базирани на класове, заедно. Сега поръчваме проекта въз основа на полезни CSS метрики, а не създаваме неудобна специфичност и каскадни групировки, като поръчваме проекта на тематични парчета.

Резултатът

Когато всичко това се събере, може да изглежда по следния начин:

@import 'settings.global'; @import 'settings.colors'; @import 'tools.functions'; @import 'tools.mixins'; @import 'generic.box-sizing'; @import 'generic.normalize'; @import 'elements.headings'; @import 'elements.links'; @import 'objects.wrappers'; @import 'objects.grid'; @import 'components.site-nav'; @import 'components.buttons'; @import 'components.carousel'; @import 'trumps.clearfix'; @import 'trumps.utilities'; @import 'trumps.ie8';

Дори в този малък пример можете да видите как всеки слой може да съдържа произволен брой частици и тези частици теоретично могат да седят във всеки @import ред, който желаете. Единственото изискване е самите слоеве винаги да останат в тази формация.

Ние гарантираме, че всеки слой съдържа CSS на:

  • Подобна специфика: Всички селектори, базирани на елементи, или всички селектори, базирани на класове, или полезни класове, носещи!
  • Подобна изричност: Стилизиране на всичките ви голи HTML елементи или стилизиране на компоненти на потребителския интерфейс или стилизиране на специфични помощни класове
  • Подобен обхват: Възможност за въздействие върху целия DOM (напр. * {}), Подмножество на DOM (напр. {}), Секция от DOM (напр.. Въртележка {}) или конкретен DOM възел (напр. ясна корекция {})

Този подробен подход ни дава много по-управляема CSS архитектура. Сега знаем, че всичко, което добавяме, трябва да бъде допълнение към всичко, което е минало преди него. Ние знаем къде ще живее всеки тип правило и къде да поставим нови стилове и имаме увереността, че всички наши различни селектори ще играят добре един до друг.

Ако искате да разгледате допълнително ITCSS, разгледайте встъпителната беседа на Хари Робъртс в DaFED ...

Мразите да работите със стария CSS? Не пропускайте Хари Робъртс Генерирайте Бангалор говорете нататък рефакторинг на CSS, без да губите ума си . Резервирайте сега да се насладите на тази и други беседи от водещи уеб имена, включително Джонатан Снук, Стефани Ригер и Шикхар Капур.

Тази статия първоначално се появи в брой 267 от нетно списание .