Када се уче принципи основног ЦСС-а, неко се учи да пише модуларне, вишекратне и дескриптивне стилове како би се обезбедило одржавање. Али када се програмери укључе у апликације из стварног света, често се чини немогућим додати карактеристике корисничког интерфејса, а да стилови не процуре у нежељена подручја. Овај проблем се често претвара у самоиспуњавајућу петљу; стилови који су теоретски ограничени на један елемент или класу почињу да се појављују тамо где им није место. Ово приморава програмера да креира још специфичније селекторе како би заменио процуреле стилове, који онда случајно надјачавају глобалне стилове и тако даље. Чврсте конвенције о називима класа, као што је БЕМ, су једно теоријско решење овог проблема. БЕМ (Блоцк, Елемент, Модифиер) методологија је систематски начин именовања ЦСС класа како би се осигурала поновна употреба и структура унутар ЦСС датотека. Овакве конвенције о именовању могу смањити когнитивно оптерећење коришћењем језика домена за описивање елемената и њиховог стања, а ако се правилно имплементирају, могу олакшати одржавање стилова за велике апликације. У стварном свету, међутим, не иде увек тако. Приоритети се могу променити, а са променом, примена постаје недоследна. Мале промене у ХТМЛ структури могу захтевати много ревизија имена ЦСС класе. Са веома интерактивним фронт-енд апликацијама, имена класа које прате БЕМ образац могу постати дугачка и незграпна (нпр. апп-усер-овервиев__статус--ис-аутхентицатинг), а непоштовање правила именовања у потпуности разбија структуру система, чиме се негирају његове предности. С обзиром на ове изазове, није ни чудо што су се програмери окренули оквирима, а Таилвинд је најпопуларнији ЦСС оквир. Уместо да покушавате да се борите против онога што изгледа као непобедив рат специфичности између стилова, лакше је одустати од ЦСС Цасцаде и користити алате који гарантују потпуну изолацију. Програмери се ослањају више на услужне програме Како знамо да неки програмери желе да избегну каскадне стилове? То је успон „модерног“ фронт-енд алата - попут ЦСС-ин-ЈС оквира - дизајнираних посебно за ту сврху. Рад са изолованим стиловима који су уско ограничени на одређене компоненте може изгледати као дах свежег ваздуха. Уклања потребу за именовањем ствари – и даље један од најомраженијих и најзахтевнијих фронт-енд задатака – и омогућава програмерима да буду продуктивни без потпуног разумевања или искориштавања предности ЦСС наслеђивања. Али напуштање ЦСС Цасцаде-а долази са сопственим проблемима. На пример, састављање стилова у ЈаваСцрипт-у захтева тешке конфигурације израде и често доводи до тога да се стилови неспретно мешају са означавањем компоненти или ХТМЛ-ом. Уместо пажљиво разматраних конвенција именовања, дозвољавамо алатима за прављење да аутоматски генеришу селекторе и идентификаторе за нас (нпр. .јск-3130221066), захтевајући од програмера да држе корак са још једним псеудо-језиком сам по себи. (Као да когнитивно оптерећење разумевања шта све ваше компоненте усеЕффецтс раде већ није било довољно!) Даље апстраховање посла именовања класа алатима значи да је основно отклањање грешака често ограничено на специфичне верзије апликације компајлиране за развој, уместо да се користе изворне функције претраживача које подржавају отклањање грешака уживо, као што су алатке за програмере. Скоро да треба да развијемо алате за отклањање грешака у алатима које користимо да апстрахујемо оно што веб већ пружа – све да бисмо избегли „бол” писања стандардног ЦСС-а. Срећом, модерне ЦСС карактеристике не само да чине писање стандардног ЦСС-а флексибилнијим, већ и дају програмерима попут нас много више моћи да управљају каскадом и да она ради за нас. ЦСС каскадни слојеви су одличан пример, али постоји још једна карактеристика која добија изненађујуће недостатак пажње — иако се то мења сада када је недавно постала компатибилна са основном линијом. ЦСС @сцопе Ат-правило Сматрам да је правило ЦСС @сцопе потенцијални лек за врсту анксиозности изазване цурењем стила коју смо покрили, а која нас не приморава да угрозимо предности изворног веба за апстракције и додатне алате за прављење. „Правило @сцопе ЦСС вам омогућава да изаберете елементе у одређеним ДОМ подстаблима, прецизно циљајући елементе без писања превише специфичних селектора које је тешко заобићи и без превише чврстог повезивања ваших селектора са ДОМ структуром.“— МДН
Другим речима, можемо да радимо са изолованим стиловима у одређеним случајевима без жртвовања наслеђа, каскаде или чак основног раздвајања бригакоји је дуго био водећи принцип развоја фронт-енд-а. Осим тога, има одличну покривеност претраживача. У ствари, Фирефок 146 је додао подршку за @сцопе у децембру, чинећи га по први пут компатибилним са основном линијом. Ево једноставног поређења између дугмета који користи БЕМ шаблон и правила @сцопе: <буттон цласс="буттон буттон--примари"> <спан цласс="буттон__тект">Кликни ме <спан цласс="буттон__ицон">→
<стиле> .буттон .буттон__тект { /* стилови текста дугмади */ } .буттон .буттон__ицон { /* стилови иконе дугмета */ } .буттон--примари { примарни стилови дугмади */ }
<буттон цласс="примари-буттон"> <спан>Кликни на мене <спан>→
<стиле> @сцопе (.примари-буттон) { спан:фирст-цхилд { /* стилови текста дугмади */ } спан:ласт-цхилд { /* стилови иконе дугмета */ } }
Правило @сцопе омогућава прецизност са мање сложености. Програмер више не мора да креира границе користећи имена класа, што им заузврат омогућава да пишу селекторе засноване на изворним ХТМЛ елементима, чиме се елиминише потреба за прескриптивним ЦСС обрасцима имена класа. Једноставним уклањањем потребе за управљањем именима класа, @сцопе може ублажити страх повезан са ЦСС-ом у великим пројектима. Основна употреба Да бисте започели, додајте правило @сцопе свом ЦСС-у и уметните основни селектор којем ће стилови бити обухваћени: @сцопе (<селектор>) { /* Стилови обухваћени <селектором> */ }
Дакле, на пример, ако бисмо стилове обухватили елементом <нав>, то би могло изгледати отприлике овако:
@сцопе (нав) { а { /* Стилови веза у оквиру навигације */ }
а:ацтиве { /* активни стилови линкова */ }
а:ацтиве::бефоре { /* Активна веза са псеудо-елементом за додатни стил */ }
@медиа (макс. ширина: 768 пиксела) { а { /* Прилагодљива прилагођавања */ } } }
Ово, само по себи, није револуционарна карактеристика. Међутим, други аргумент се може додати опсегу да би се створила доња граница, ефективно дефинишући почетну и крајњу тачку опсега.
/* Било који елемент унутар ул неће имати примењене стилове */ @сцопе (нав) до (ул) { а { фонт-сизе: 14пк; } }
Ова пракса се зове донут сцопинг, и постоји неколико приступа који се могу користити, укључујући низ сличних, високо специфичних селектора који су чврсто повезани са ДОМ структуром, :нот псеудо-селектор, или додељивање специфичних имена класа елементима <а> унутар <нав> за руковање различитим ЦСС-ом. Без обзира на те друге приступе, @сцопе метод је много сажетији. Што је још важније, спречава ризик од покварених стилова ако се имена класа промене или злоупотребе или ако се ХТМЛ структура измени. Сада када је @сцопе компатибилан са основном линијом, више нам нису потребна заобилазна решења! Ову идеју можемо проширити даље са вишеструким крајњим границама да бисмо створили „стилску фигуру осам“:
/* Било који <а> или <п> елемент унутар <асиде> или <нав> неће имати примењене стилове */ @сцопе (главни) до (у страну, нав) { а { фонт-сизе: 14пк; } п { лине-хеигхт: 16пк; боја: тамно сива; } }
Упоредите то са верзијом којом се рукује без правила @сцопе, где програмер мора да „ресетује“ стилове на њихове подразумеване вредности:
главни а { фонт-сизе: 14пк; }
главни п { лине-хеигхт: 16пк; боја: тамно сива; }
осим а, главна навигација а { фонт-сизе: наследити; /* или шта год би требало да буде подразумевано */ }
главна страна п, главна навигација п { лине-хеигхт: наследити; /* или шта год би требало да буде подразумевано */ боја: наследити; /* или одређена боја */ }
Погледајте следећи пример. Да ли примећујете како је једноставно циљати неке угнежђене селекторе док изузимате друге? Погледајте пример Пен @сцопе [форкед] од Блејка Лундквиста. Размислите о сценарију где јединствени стилови морају да се примене на прорезни садржај унутар веб компоненти. Приликом постављања садржаја у веб компоненту, тај садржај постаје део Схадов ДОМ-а, али и даље наслеђује стилове из надређеног документа. Програмер ће можда желети да имплементира различите стилове у зависности од тога у коју веб компоненту је садржај смештен: <излог-производ> <усер-цард слот="ревиевер"> <имг срц="аватар.јпг" слот="аватар"> <спан слот="наме">Јане Дое
<теам-ростер> <корисничка картицаслот="мембер"> <имг срц="аватар.јпг" слот="аватар"> <спан слот="наме">Јане Дое
У овом примеру, програмер би можда желео да <усер-цард> има различите стилове само ако је приказан унутар <теам-ростер>: @сцопе (репрезентација тима) { корисничка картица { дисплеј: инлине-флек; алигн-итемс: центар; зазор: 0.5рем; }
корисничка картица имг { граница радијуса: 50%; ширина: 40пк; висина: 40пк; } }
Више погодности Постоје додатни начини на које @сцопе може уклонити потребу за управљањем класама без прибегавања услужним програмима или именима класа генерисаних ЈаваСцрипт-ом. На пример, @сцопе отвара могућност да се лако циљају потомци било ког селектора, а не само имена класа:
/* Само див елементи са директним подређеним дугметом су укључени у основни опсег */ @сцопе (див:хас(> дугме)) { п { фонт-сизе: 14пк; } }
И они могу бити угнежђени, стварајући опсеге унутар опсега: @сцопе (главни) { п { фонт-сизе: 16пк; боја: црна; } @сцопе (одељак) { п { фонт-сизе: 14пк; боја: плава; } @сцопе (.хигхлигхт) { п { боја позадине: жута; фонт-веигхт: болд; } } } }
Осим тога, основни опсег се може лако референцирати унутар правила @сцопе:
/* Примјењује се на елементе унутар директних подређених елемената главне секције, али се зауставља на било којој директној страни која је директно хлађена од тих секција */ @сцопе (главни > одељак) до (:сцопе > у страну) { п { боја позадине: светлоплава; боја: плава; } /* Односи се на ул елементе који су непосредна браћа и сестре основног опсега */ :сцопе + ул { стил листе: ниједан; } }
@сцопе ат-правило такође уводи нову димензију близине у резолуцију специфичности ЦСС-а. У традиционалном ЦСС-у, када два селектора одговарају истом елементу, побеђује селектор са вишом специфичношћу. Са @сцопе, када два елемента имају једнаку специфичност, побеђује онај чији је корен опсега ближи елементу који се подудара. Ово елиминише потребу да се превазиђу надређени стилови ручним повећањем специфичности елемента, пошто унутрашње компоненте природно замењују стилове спољашњих елемената.
<стиле> @сцопе (.цонтаинер) { .титле { боја: зелена; } } @сцопе (.сидебар) { .титле { боја: црвена; } }
<див цласс="сидебар"> <див цласс="цонтаинер"> <х2 цласс="титле">Здраво
Закључак Услужни ЦСС оквири, као што је Таилвинд, добро раде за израду прототипа и мање пројекте. Међутим, њихове предности брзо се смањују када се користе у већим пројектима који укључују више од неколико програмера. Фронт-енд развој је постао све компликованији у последњих неколико година, а ЦСС није изузетак. Иако правило @сцопе није лек за све, оно може смањити потребу за сложеним алатима. Када се користи уместо стратешког именовања класа или поред њега, @сцопе може олакшати и учинити забавнијим писање ЦСС-а за одржавање. Даље читање
ЦСС @сцопе (МДН) „ЦСС @сцопе“, Хуан Дијего Родригез (ЦСС-трикови) Напомене о издању Фирефок 146 (Фирефок) Подршка за прегледач (ЦанИУсе) Популарни ЦСС оквири (Стање ЦСС-а 2024) „Ц“ у ЦСС: Цасцаде, Тхомас Иип (ЦСС-Трицкс) БЕМ Увод (Преузми БЕМ)
