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

Така че това, което много хора са направили, е, че са създали CSS архитектури, които да помогнат за оформянето на техния код, така че CSS да стане по-четлив. SMACSS —i.e., Мащабируема и Модулна архитектура за CSS —Цели да направи точно това. Това е конкретен набор от CSS архитектурни насоки от Джонатан Снук, които съм приел.

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

Всяка структура на проекта SMACSS използва пет категории:

1. Основа
2. Оформление
3. Модули
4. Щат
5. Тема

Основа

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

В основен стил трябва да включвате само селектори на голи елементи или такива с псевдокласове, но не и с селектори на класове или ID. (Трябва да имате наистина основателна причина да поставите клас или ID вътре в него, може би само ако оформяте елементи на приставка на трета страна и трябва да замените стила по подразбиране за този конкретен елемент.)

Ето пример за това как трябва да изглежда основната файлова единица:

html { margin: 0; font-family: sans-serif; } a { color: #000; } button { color: #ababab; border: 1px solid #f2f2f2; }

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

SMACSS или не, силно препоръчвам да се избягва използването на !important колкото е възможно повече и да не използвам дълбоко влагане, но ще говоря повече за това по-късно в тази публикация. Също така, ако вашата практика е да използвате нулиране на CSS, това е мястото, където трябва да го включите. (Предпочитам да използвам Sass, така че просто го включвам в горната част на файла, вместо да го копирам или да се позовавам отделно от всеки елемент на страницата.)

Свързани: Темиране със Sass: Урок за SCSS

Оформление

Стиловете на оформлението ще разделят страницата на основни раздели - не раздели като навигация или може би акордеон, например, но наистина раздели от най-високо ниво:

Стиловете на оформлението на SMACSS са за основни секции като заглавка, странична лента, съдържание / основна и долен колонтитул.

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

Тук имаме header, main и footer. Тези оформления имат модули като връзки и лого в горния колонтитул в горната част, полета и статии на главното, както и връзки и авторски права за долния колонтитул. Обикновено даваме на оформленията селектор за идентификатори, тъй като те не се повтарят на страницата и са уникални.

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

Ето пример за това как трябва да изглежда:

#header { background: #fcfcfc; } #header .l-right { float: right; } #header .l-align-center { text-align: center; }

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

За друг пример можете да използвате някои полета по подразбиране в полето за оформление, като .l-margin с марж от 20px. След това, където и да искате подложка за някакъв контейнер, елемент, карта или кутия, просто добавяте l-margin клас към него. Но искате нещо за многократна употреба:

.l-full-width { width: 100%; }

Не е нещо вътрешно свързано по този начин:

.l-width-25 { width: 25px; }

---

Искам да отделя малко време, за да поговоря за конвенциите за именуване в SMACSS. Ако никога не сте чували за концепцията за пространство на имена в CSS, това е основно добавяне на името в началото на друг елемент, за да го разграничите от всичко друго. Но защо ни трябва това?

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

Пространството на имена ви помага да разрешите това. В крайна сметка те се наричат ​​едно и също нещо на едно ниво, но имат различно пространство от имена - различен префикс - и по този начин могат да представляват два различни стила:

.box--label { color: blue; } .card--label { color: red; }

Модул

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

Така че в предишния пример имахме статия, която може да бъде самостоятелно модул. Как трябва да бъде структуриран CSS тук? Трябва да имаме клас .article които могат да имат дъщерни елементи title и text. Така че, за да можем да го съхраняваме в същия модул, трябва да добавим префикс на дъщерните елементи:

.article { background: #f32; } .article--title { font-size: 16px; } .article--text { font-size: 12px; }

Може да забележите, че използваме две тирета след префикса на модула. Причината е, че понякога имената на модулите имат две думи или свои префикси като big-article. Трябва да имаме две тирета, за да разберем коя част от него е дъщерният елемент - напр. сравни big-article-title до big-article--title и big-article--text.

Също така можете да влагате модули вътре в модули, ако определен модул заема голяма част от страницата:

This is box label

• Box list element

Тук, в този прост пример, можете да видите, че box е модул и list е друг модул вътре в него. Така че list--li е дете на list модул, а не на box. Една от ключовите концепции тук е да се използват максимум два селектора за всяко правило на CSS, но в повечето сценарии да има само един селектор с префикси.

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

Добре (обърнете внимание на единичния селектор):

.red--box { background: #fafcfe; } .red-box--list { color: #000; }

Лошо (обърнете внимание на повторението в селекторите и припокриващия се референтен метод):

.red .box { background: #fafcfe; } .red .box .list { color: #000; } .box ul { color: #fafafa; }

Щат

Това, което състоянието определя в SMACSS, е начин да се опише как изглеждат нашите модули в различни динамични ситуации. Така че тази част наистина е за интерактивност: Искаме различно поведение, ако даден елемент се счита за скрит, разширен или модифициран. Например акордеонът jQuery ще се нуждае от помощ при определяне кога можете или не можете да видите съдържанието на даден елемент. Помага ни да определим стила на даден елемент в точно определено време.

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

Както при стиловете на оформлението, и тук сме склонни да използваме префикси. Това ни помага да ги разпознаем и да им дадем приоритет. Тук използваме is префикс, както е в is-hidden или is-selected.

• Contact
• About

.nav--item.is-selected { color: #fff; }

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

.box .element { display: none; }

Така че, ако просто добавите това:

.is-shown { display: block; }

Той ще остане скрит дори след като добавите .is-shown клас към елемента чрез JavaScript. Това е така, защото първото правило е на две нива и ще го замени.

Така че можете вместо това да дефинирате държавния клас по следния начин:

.is-shown { display: block !important; }

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

Тема

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

.button-large { width: 60px; height: 60px; } Like

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

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

Методологии на организацията на CSS

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

Да, вероятно можете да използвате по-усъвършенствани методологии като OOCSS и BEM . Последният обхваща почти пълния фронтден работен процес и неговите технологии. ДОБРИ селектори може да работи чудесно за някои хора, но някои могат да ги намерят за твърде дълги и поразителни, а също и твърде сложни за използване. Ако имате нужда от нещо по-опростено, което е по-лесно да вземете и включите в работния си процес - а също и нещо, което определя основните правила за вас и вашия екип - SMACSS е идеалното решение.

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

Разбиране на основите

Кои са различните видове CSS?

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

Какво се разбира под „CSS шаблон“?

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

Защо CSS е толкова важен?

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

Какви са предимствата на използването на CSS?

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

Защо мащабируемостта е толкова важна?

Като цяло, мащабируемостта е важна, за да остане разширяема и поддържаема с нарастването на даден проект. По-специално с CSS, ако не напишем мащабируем и модулен код, той бързо излиза извън контрол, става труден за разбиране и работа, особено за новодошлите. Оттук и необходимостта от SMACSS.