Разбиране на методологиите за писане на CSS

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

Методология е система от методи. Помислете за метод като просто начин да направите нещо по систематичен начин, с определен предварително определен начин да направите нещата, за да постигнете желания резултат.

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

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

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

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

Ще разгледаме тези формулирани методологии, които ще включват:

OOCSS (обектно ориентиран CSS)
BEM (блок, елемент, модификатор)
ACSS (Атомна CSS)
SMACSS (мащабируема и модулна архитектура за CSS)

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

1. OOCSS

Разработено от Никол Съливан през 2008 г., ключовите концепции на OOCSS (обектно ориентираната CSS) включват CSS обект идентификация, разделяне на структурата и визуални стилове и избягване на стилове, базирани на местоположението.

В OOCSS, първата стъпка, която Никол предлага, е да го направим идентифициране на обекти в CSS.

“По принцип, "обектът" на CSS е повтарящ се визуален шаблон, който може да бъде абстрахиран в независим фрагмент от HTML, CSS и вероятно JavaScript. След това този обект може да бъде използван отново в целия сайт. - Никол Съливан, Github (OOCSS)“

Вземете например тази структура от този сайт. Ето нещо, което е повтарящ се визуален шаблон и има свой собствен независим HTML и / или CSS:

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

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

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

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

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

Плюсове на OOCSS: Кодове за визуално оформяне за повторно използване, гъвкави кодове за местоположение, намаляване на дълбоките селектори.

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

2. BEM

Разработени от разработчиците на Yandex през 2009 г., ключовите понятия за BEM (блок, елемент, модификатор) включват идентифициране блок, елемент & модификатор и да ги назоват съответно.

А “блок” е по същество същият като “обект”(от предишния пример), “елемент” се отнася до компонентите на блока (изображение, заглавие, текст за предварителен преглед в горното визуализация пост- обекти). А “модификатор” може да се използва, когато състоянието на блок или елемент се промени, например когато добавите активен клас към елемент от менюто, за да го маркирате, активният клас действа като модификатор.

След като сте идентифицирали компонентите, ги назовете съответно. Например:

блокът на менюто ще има класа меню
неговите елементи ще имат класа menu__item (блокът и елементът са разделени от двойно подчертаване)
Модификаторът на състоянието на менюто може да има клас menu_disabled (модификаторът е разделен с единична долна черта)
Модификаторът за неработещо състояние на елемент от менюто може да бъде menu__item_disabled.

За модификатори можем да използваме key_value формат за именуване. Например, за да разграничим всички елементи от менюто, които са свързани с остарели статии, можем да им дадем класа menu__item_status_obsolete, и за оформяне на елементи от менюто, които сочат към чакащи документи, името на класа може да бъде menu__item_status_pending.

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

Сайтът на BEM също изброява как сегрегацията на блока, елемента и модификатора също може да бъде въведена в CSS файловата система. Блоковете харесват “бутони” и “входове” могат да имат свои собствени папки, които се състоят от файлове (.css, .js), които са свързани с тези блокове, което прави нещата по-лесни, когато искаме да импортираме тези блокове в други проекти.

Плюсове на BEM:Лесни за използване имена на класове и намаляване на дълбоките CSS селектори.

Против на BEM:За да запазят имената си в разумни черти, БЕМ съветва да запазим блока, за да включим в гнездото плитко.

3. ACSS

Известен от Yahoo, някъде в края на първия десетилетие на 21^во Ключовите понятия на ACSS се състоят от създаване на класове за най-атомно ниво на стил, т.е. двойка собственост-стойност, след което се използват в HTML, както е необходимо.

Трудно е да се определи кога ACSS (Atomic CSS) е разработен за първи път, тъй като концепцията вече се използва от известно време. Разработчиците използват класове като .clearfix overflow: hidden за дълго време. Идеята в ACSS е да имат клас за почти всяка повторно използвана двойка собственост-стойност, която не е свързана със съдържанието ние ще трябва в нашия сайт, и да добавите тези класове, когато е необходимо на HTML елементи.

По-долу е даден пример за класове, базирани на ACSS и как се използват в HTML.

 .mr-8 margin-right: 8px; .fl-r float: right;

Както можете да видите, броят на класовете ще се повиши с този метод и HTML ще бъде претъпкан от всички тези класове. Този метод не е 100% ефективен, но може да бъде полезен, ако желаете. В крайна сметка Yahoo използва това.

Плюсове на ACSS:Оформяне на HTML без да се оставя HTML.

Против на ACSS:Твърде много класове, не много чист и може да го мразиш.

4. SMACSS

Разработена през 2011 г. от Джонатан Снук SMACSS (Мащабируема и модулна архитектура за CSS) работи, като идентифицира 5 различни типа стилови правила. На базата на тях се създават имена на класове и система за регистриране.

“SMACSS е начин да разгледаме процеса на проектиране и като начин да приспособим тези твърди рамки към гъвкав мисловен процес. - Джонатан Снук”

SMACSS идентифицира 5 типа правила, а именно база, оформление, модул, състояние, и тема.

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

Различните правила за стила могат да бъдат идентифицирани с префикс в името на класа, например, l-header (за оформление) или t-header (за тема). Също така можем да организираме тези различни видове правила, като ги поставим в отделни файлове и папки.

Плюсове на SMACSS:По-добре организиран код.

Против на SMACSS: Никой не мога да се сетя.

Има безплатна онлайн книга, която можете да прочетете за SMACSS, или можете да си купите неговата версия на ebook, за да я изучите повече.

заключение

Горните CSS методологии ще ви дадат система управление и оптимизиране на вашите CSS кодове. Те могат да се комбинират заедно, като OOCSS-SMACSS, или OOCSS-BEM, или BEM-SAMCSS, за да отговарят на вашите нужди.

Има и рамки и библиотеки, ако искате автоматизирана система за изпълнение на CSS методологии като:

OOCSS рамка
BEM инструменти
Органична CSS рамка (следва атомна концепция).