Төп CSS принципларын өйрәнгәндә, тотрыклылыкны тәэмин итү өчен модульле, кабат кулланыла торган һәм тасвирлау стильләрен язарга өйрәтәләр. Ләкин уйлап табучылар реаль дөнья кушымталары белән катнашкач, UI функцияләрен планлаштырылмаган өлкәләргә кертмичә кертү мөмкин түгел. Бу проблема еш кына үз-үзен үтәүче әйләнешкә керә. теоретик яктан бер элементка яки класска тупланган стильләр алар булмаган җирне күрсәтә башлый. Бу эшкәртүчене тагын да конкрет селекторлар булдырырга мәҗбүр итә, ачыкланган стильләрне юкка чыгарырга, аннары очраклы рәвештә глобаль стильләрне юкка чыгарырга һ.б. BEM кебек каты класс исем конвенциясе - бу проблеманы теоретик чишү. BEM (блок, элемент, модификатор) методикасы - CSS файллары эчендә кабат куллану һәм структураны тәэмин итү өчен CSS классларына исем бирүнең системалы ысулы. Мондый конвенцияләрне атау, элементларны һәм аларның торышын тасвирлау өчен домен телен кулланып, танып белү йөген киметергә мөмкин, һәм дөрес кулланылса, зур кушымталар өчен стильләрне саклау җиңелрәк булырга мөмкин. Реаль дөньяда, ләкин ул һәрвакыт алай эшләми. Приоритетлар үзгәрергә мөмкин, һәм үзгәрү белән тормышка ашыру туры килми. HTML структурасына кечкенә үзгәрешләр күп CSS класс исемен яңартуны таләп итә ала. Highlyгары интерактив фронтовик кушымталар ярдәмендә, BEM үрнәгенә ияргән класс исемнәре озын һәм катлаулы булырга мөмкин (мәсәлән, кушымта-кулланучы-күзәтү__ статусы - раслаучы), һәм исем бирү кагыйдәләрен тулысынча үтәмәү система структурасын боза, шуның белән аның өстенлекләрен кире кага. Бу проблемаларны исәпкә алып, уйлап табучыларның рамкаларга мөрәҗәгать итүе гаҗәп түгел, Tailwind иң популяр CSS рамкасы. Стильләр арасындагы җиңелмәс спецификация сугышы кебек көрәшергә тырышу урынына, CSS Каскадыннан баш тарту һәм тулы изоляцияне гарантияләүче коралларны куллану җиңелрәк. Төзүчеләр коммуналь хезмәтләргә күбрәк таяналар Кайбер уйлап табучыларның каскадлы стильләрдән сакланырга теләгәннәрен без кайдан беләбез? Бу "заманча" фронтовик кораллануның күтәрелүе - CSS-in-JS рамкалары кебек - бу максат өчен махсус эшләнгән. Аерым компонентлар белән тыгыз бәйләнгән стильләр белән эшләү саф һава сулышы кебек тоелырга мөмкин. Бу әйберләрне атау кирәклеген бетерә - әле иң нәфрәтләнгән һәм күп вакыт таләп итә торган эшләрнең берсе - һәм уйлап табучыларга CSS мирасы өстенлекләрен тулысынча аңламыйча, уңышлы булырга мөмкинлек бирә. Ләкин CSS Каскадын чокырлау үз проблемалары белән килә. Мәсәлән, JavaScript'та стильләр язу авыр конфигурацияләр таләп итә һәм еш кына стильләрне компонент билгесе яки HTML белән уңайсыз аралашуга китерә. Конвенцияләрне җентекләп карау урынына, без үзебез өчен селекторларны һәм идентификаторларны (мәсәлән, .jsx-3130221066) автоматлаштыру өчен кораллар төзергә рөхсәт итәбез, уйлап табучылардан тагын бер псевдо телен саклап калуны таләп итәбез. (Сезнең компонентның куллану эффектларын аңламаган танып белү йөге җитмәгән кебек!) Алга таба классларга исем бирү эшен абстрактлаштыру - төп төзәтмәләр еш кына үсеш өчен төзелгән махсус кушымта версияләре белән чикләнә, эшкәртүче кораллары кебек тере дебугны яклаучы туган браузер функцияләрен куллану урынына. Веб тәкъдим иткәнне абстрактлаштыру өчен кулланган коралларны төзәтү өчен кораллар эшләргә кирәк диярлек - барысы да стандарт CSS язу "авыртуыннан" качу өчен. Бәхеткә, заманча CSS үзенчәлекләре стандарт CSS язуны тагын да сыгылмаслык итеп кенә калмый, ә безнең кебек эшләүчеләргә каскад белән идарә итү һәм аны безнең өчен эшләтү өчен зур көч бирә. CSS Каскад Катламнары - яхшы үрнәк, ләкин тагын бер үзенчәлек бар, ул гаҗәп игътибарсызлыкны ала - хәзерге вакытта ул үзгәрә, күптән түгел Baseline туры килә. CSS @scope At-Rule Мин CSS @scope кагыйдәсен без каплаган стиль-агып чыккан борчылу өчен потенциаль дәвалау чарасы дип саныйм, бу абстракт һәм өстәмә төзү кораллары өчен туган веб өстенлекләрен бозарга мәҗбүр итми. "@Scope CSS кагыйдәсе сезгә билгеле DOM субтитрларында элементларны сайларга мөмкинлек бирә, элементларны төгәл максат итеп, артык катлаулы селекторларны язмыйча, һәм селекторларыгызны DOM структурасына бик нык бәйләмичә." - MDN
Башка сүзләр белән әйткәндә, без аерым очракларда мирасны, каскадны, хәтта борчылуларны аермыйча, аерым очракларда эшли алабыз.бу фронтовик үсешнең озак дәвамлы җитәкче принцибы булды. Моннан тыш, аның браузерның искиткеч яктыртылуы бар. Чынлыкта, Firefox 146 декабрьдә @scope өчен ярдәм өстәде, аны Baseline беренче тапкыр яраклаштырды. Менә @scope кагыйдәсенә каршы BEM үрнәген кулланып төймә арасында гади чагыштыру: <төймә класс = "төймә төймәсе - төп">
<стиль> .буттон .button__text {/ * төймә текст стиле * /} .буттон .буттон__icon {/ * төймә иконасы стильләре * /} . төймә - төп {төп төймә стильләре * /}
<төймә класс = "төп төймә"> Миңа басыгыз →
<стиль> @scope (.primary-button) { span: беренче бала {/ * төймә текст стиле * /} ара: соңгы бала {/ * төймә иконасы стильләре * /} }
@Scope кагыйдәсе катлаулырак төгәллеккә мөмкинлек бирә. Төзүчегә класс исемнәрен кулланып чикләр булдырырга кирәк түгел, бу, үз чиратында, аларга HTML элементларына нигезләнеп селекторлар язарга мөмкинлек бирә, шуның белән CSS класс исеме үрнәкләре кирәклеген бетерә. Класс исеме белән идарә итү ихтыяҗын бетереп, @scope зур проектларда CSS белән бәйле куркуны җиңеләйтә ала.
Төп куллану
Башлау өчен, CSS-ка @scope кагыйдәсен өстәгез һәм нинди стильләр кулланылачагына төп селектор кертегез:
@scope (
Шулай итеп, мәсәлән, без стильләрне
@scope (nav) { a nav / * Nav стиле эчендә сылтама стильләре * /}
а: актив {/ * Актив сылтама стильләре * /}
a: актив :: элек {/ * өстәмә стиллау өчен псевдо-элемент белән актив сылтама * /}
@media (макс-киңлек: 768px) { a {/ * onsаваплы көйләүләр * /} } }
Бу, үзеннән-үзе, нигез салучы үзенчәлек түгел. Ләкин, икенче аргумент түбән чик булдыру өчен, масштабның башлану һәм ахыр нокталарын эффектив билгеләү өчен өстәлергә мөмкин.
/ * Ул эчендәге теләсә нинди элемент кулланылган стильләр булмаячак * / @scope (nav) to (ul) { a { шрифт зурлыгы: 14px; } }
Бу практика донут скопинг дип атала, һәм кулланырга мөмкин булган берничә ысул бар, шул исәптән DOM структурасына тыгыз бәйләнгән охшаш, бик специаль селекторлар сериясе, а: псевдо-селектор түгел, яки төрле CSS белән эш итү өчен
/ *
Йомгаклау Tailwind кебек файдалы беренче CSS рамкалары прототиплау һәм кечерәк проектлар өчен яхшы эшли. Аларның өстенлекләре тиз арада кими, ләкин, берничәдән артык уйлап табучылар катнашындагы зур проектларда кулланылганда. Соңгы берничә ел эчендә фронт үсеше көннән-көн катлаулана башлады, һәм CSS да моннан читтә калмый. @Scope кагыйдәсе бөтенесен дәваламаса да, катлаулы кораллау ихтыяҗын киметә ала. Стратегик класс исеме белән кулланылганда, @scope тотрыклы CSS язуны җиңеләйтә һәм кызыклырак итә ала. Киләсе уку
CSS @scope (MDN) "CSS @scope", Хуан Диего Родружес (CSS-Трикс) Firefox 146 чыгарылыш язмалары (Firefox) Браузер ярдәме (CanIUse) Популяр CSS нигезләре (CSS 2024 торышы) "С" CSS: Каскад ", Томас Йип (CSS-Трикс) BEM кереш сүз (BEM алыгыз)
