Разумевање методологија писања ЦСС-а

У овом посту ћемо видети шта су ЦСС методологије писања, неке добро познате методологије и како могу бити корисне за нас у оптимизацији нашег ЦСС кода. Почнимо од најједноставнијег питања да би се лопта окренула. Шта је методологија?

Методологија је систем метода. Размислите о методи као о једноставном начину да се нешто уради на систематичан начин, у неком одређеном начину рада да би се постигао резултат који желимо.

Да би добили боље резултате, побољшавамо наше методе тако што ћемо их боље планирати, промена реда, поједностављење корака - шта год да ради брже и више ефикасан.

ЦСС Методологија

Сада ћемо говорити о ЦСС методологији. Као и код свега што је у животу, имамо и метод писања ЦСС-а: неки ЦСС за ресетовање писања, неки стилови распореда места, неки почињу са две до три класе за стилинг елемента, неки пишу све ЦСС кодове у једну датотеку.

Наше жељене методе су или биле успостављене на нашој властитој страни током времена или под утицајем других или су биле потребне на нашем радном мјесту или због свега горе наведеног. Али временом, ЦСС ветерани су формулисали методологије за писање ЦСС-а то је више флексибилан, дефинисан, поновљив, разумљив и управљив.

Размотрићемо оне формулисане методологије које ће укључивати:

ООЦСС (објектно оријентисани ЦСС)
БЕМ (блок, елемент, модификатор)
АЦСС (Атомски ЦСС)
СМАЦСС (скалабилна и модуларна архитектура за ЦСС)

Белешка: Ни један од доле наведених концепата не треба мијешати с било којим оквиром, библиотеком или алатом који може имати исто име и концепт као ове методологије. Овај пост је само о методологијама за писање ЦСС-а.

1. ООЦСС

Развијен од стране Ницоле Сулливан 2008. године, кључни концепти ООЦСС-а (Објецт Ориентед ЦСС) укључују ЦСС објекат идентификацију, раздвајање структуре и визуелних стилова и избегавање стилова заснованих на локацији.

У ООЦСС-у, први корак који Ницоле предлаже је да то учинимо идентификовати објекте у ЦСС-у.

“У основи, "објекат" ЦСС-а је понављајући визуелни образац, који се може апстраховати у независни исечак ХТМЛ-а, ЦСС-а и евентуално ЈаваСцрипт-а. Тај објекат се затим може поново користити у целом сајту. - Ницоле Сулливан, Гитхуб (ООЦСС)“

Узмите на пример ову структуру са овог сајта. Ево нечег што је понављајући визуелни образац и има свој независни ХТМЛ и / или ЦСС:

Овде имамо два типа објеката, већи преглед наслова које ћемо именовати пост-превиев-примари и сидебар са насловима које ћемо именовати пост-превиев-секундарни.

Морамо да одвојена структура и кожа (тј. стилови који стварају изглед објекта). Две врсте објеката имају различите структуре, једна је у већој кутији иако изгледају слично, са сликама лево и насловима на десној страни.

Дајемо слике оба објекта класом пост-превиев-слика и додајте код који ставља слику на лево. Ово нас спречава да поновимо код где да ставимо слику унутар објеката у ЦСС-у. Ако постоје и други слични објекти, поново их користимо пост-превиев-слика за њих.

Одвајање коже се такође може урадити за једноставније стилове границе или позадине. Ако имате више објеката са истом плавом границом, креирање посебне класе за плаву границу и додавање предмета објектима смањите број пута када се плаве границе морају кодирати ин ЦСС.

Ницоле такође предлаже не додајте стилове на основу локације, на пример, уместо да циљате све везе унутар одређеног див-а да бисте истакли, додајте те везе а хигхлигхтер цласс са одговарајућим ЦСС стиловима. На овај начин, када треба да означите везу у неком другом делу странице, можете поново да користите класу истицања.

Прос оф ООЦСС: Вишекратне визуалне шифре за обликовање, флексибилни кодови локација, смањење дубоко уклопљених селектора.

Цонс оф ООЦСС: Без приличног броја понављајућих визуелних образаца, одвајање структуре и визуелни кодови стилова изгледају непотребно.

2. БЕМ

Развијени од стране програмера на Иандек-у 2009. године, кључни концепти за БЕМ (блок, елемент, модификатор) обухватају идентификацију блокирати, елемент & модификатор и именовање у складу с тим.

А “блокирати” у суштини је иста као “објекат”(из претходног примера), “елемент” односи се на компоненте блока (слика, наслов, текст за преглед у горњем тексту) приказ порука- објеката). А “модификатор” може се користити када се стање блока или елемента промени, на пример када додате активну класу у ставку менија да бисте је означили, активна класа делује као ваш модификатор.

Када идентификујете компоненте, наведите их у складу са тим. На пример:

блок менија ће имати класу мени
његови предмети ће имати класу ставка изборника или менија (блок и елемент су одвојени двоструком доњом цртом)
модификатор за онемогућено стање менија може имати класу мену_дисаблед (модификатор разграничен једном доњом цртом)
модификатор за онемогућено стање ставке менија може бити мену__итем_дисаблед.

За модификаторе, такође можемо користити кеи_валуе формат за именовање. На пример, да бисте разликовали ставке менија које су повезане са застарелим чланцима, можемо им дати класу мену__итем_статус_обсолете, и за стилизовање ставки менија које указују на документе на чекању, име класе може бити мену__итем_статус_пендинг.

Именовање се може модификовати на оно што вам одговара. Идеја је да то буде могуће идентификују, блокове, елементе и модификаторе из назива класа. Погледајте неки од система именовања који су наведени на сајту БЕМ-а.

Сајт БЕМ-а такође наводи како се сегрегација блока, елемента и модификатора може довести у ЦСС датотечни систем. Блокови воле “дугмад” и “улази” могу имати сопствене фасцикле које се састоје од датотека (.цсс, .јс) које су повезане са тим блоковима, што олакшава рад када желимо да увеземо те блокове у друге пројекте.

Прос за БЕМ:Једноставна употреба назива класа и редукција дубоких ЦСС селектора.

Цонс оф БЕМ:Да би имена остала разумна, БЕМ саветује да блокирамо блокирање плитких гнезда.

3. АЦСС

Постала је позната по Иахоо-у, негде близу краја прве деценија 21^ст стољећа, кључни концепти АЦСС-а се састоје од стварања класа за највише атомски ниво стила, тј. пара својстава-вриједности, а затим их користити у ХТМЛ-у по потреби.

Тешко је одредити када је АЦСС (Атомиц ЦСС) први пут развијен од када је концепт у употреби већ неко вријеме. Програмери су користили класе као .цлеарфик оверфлов: хидден дуже време. Идеја у АЦСС је да имају класу за скоро сваки пар за својство-вредност који се не односи на садржај требаће нам на нашем сајту и додати те класе када је то потребно ХТМЛ елементима.

У наставку је дат пример класа заснованих на АЦСС и како се оне користе у ХТМЛ-у.

 .мр-8 маргин-ригхт: 8пк; .фл-р флоат: ригхт;

Као што можете видјети, број класа ће се повећати овом методом и ХТМЛ ће бити препун свих тих класа. Ова метода није 100% ефикасна, али може бити корисна ако се жели. Иахоо то ипак користи.

Прос оф АЦСС:Стилинг ХТМЛ без остављања ХТМЛ-а.

Цонс оф АЦСС:Превише часова, не баш уредно и можда га мрзиш.

4. СМАЦСС

Развијен од стране Јонатхана Сноока 2011. СМАЦСС (Сцалабле анд Модулар Арцхитецтуре фор ЦСС) ради тако што идентификује 5 различитих типова правила стила. На основу њих се креирају називи класа и систем архивирања.

“СМАЦСС је начин да се испита ваш процес дизајна и као начин да се ти ригидни оквири уклопе у флексибилан процес размишљања. - Јонатхан Сноок”

СМАЦСС идентификује 5 типова стилских правила база, распоред, модул, стање, и тхеме.

Основни стилови су подразумевани стилови усмерени на основне ХТМЛ ознаке
, .
Стилови изгледа су стилови који се користе за дефинисање изгледа странице, као што је кодирање где ће се менији заглавља, подножја и бочни менији појавити.
Стилови модула су специфични за модул као што су галерија или слидесхов.
Стилови држава су за истицање елемената са променљивим стањима као што су скривени или онемогућени.
Тема се користи за промену визуелне шеме странице.

Различита правила стила могу се идентификовати користећи префикс у називу класе, на пример, л-заглавље (за распоред) или т-заглавље (за тему). Такође можемо да организујемо ове различите типове правила тако што ћемо их смјестити у засебне датотеке и мапе.

Прос оф СМАЦСС:Боље организовани код.

Цонс оф СМАЦСС: Ништа се не могу сјетити.

Постоји бесплатна онлине књига коју можете прочитати о СМАЦСС-у, или можете купити њену ебоок верзију да је проучите више.

Закључак

Горе наведене ЦСС методологије ће вам дати систем управљате и оптимизујете ЦСС кодове. Могу се комбиновати заједно, као што су ООЦСС-СМАЦСС, или ООЦСС-БЕМ, или БЕМ-САМЦСС да одговарају вашим потребама.

Такође постоје оквири и библиотеке ако желите аутоматизовани систем за извршавање ЦСС методологија као што су:

ООЦСС фрамеворк
БЕМ тоолс
Органски ЦСС оквир (слиједи атомски концепт).