Негизги CSS принциптерин үйрөнүп жатканда, туруктуулукту камсыз кылуу үчүн модулдук, көп жолу колдонулуучу жана сүрөттөмө стилдерди жазууга үйрөтүлөт. Бирок иштеп чыгуучулар реалдуу тиркемелерге аралашканда, стилдер күтүлбөгөн аймактарга агып кетпей, UI функцияларын кошуу мүмкүн эместей сезилет. Бул маселе көп учурда өзүн-өзү аткаруу луп кар; теориялык жактан бир элементке же класска камтылган стилдер алар таандык эмес жерде көрсөтүлө баштайт. Бул иштеп чыгуучуну ачыкка чыккан стилдерди жокко чыгаруу үчүн дагы өзгөчө селекторлорду түзүүгө мажбурлайт, алар кокусунан глобалдык стилдерди жокко чыгарат жана башкалар. Катуу класс атын конвенциялар, мисалы, BEM, бул маселенин бир теориялык чечими болуп саналат. BEM (Блок, Элемент, Модификатор) методологиясы CSS файлдарынын ичинде көп жолу колдонулушун жана структурасын камсыз кылуу үчүн CSS класстарын атоонун системалуу жолу. Ушул сыяктуу конвенцияларды атоо элементтерди жана алардын абалын сүрөттөө үчүн домен тилин колдонуу менен когнитивдик жүктөмдү азайтат жана туура ишке ашырылса, чоң колдонмолор үчүн стилдерди тейлөөнү жеңилдетет. Чыныгы дүйнөдө, бирок, ал дайыма эле ушундай боло бербейт. Приоритеттер өзгөрүшү мүмкүн жана өзгөртүү менен ишке ашыруу шайкеш келбей калат. HTML түзүмүндөгү кичинекей өзгөртүүлөр CSS классынын аталышын өзгөртүүнү талап кылышы мүмкүн. Жогорку интерактивдүү алдыңкы тиркемелерде, BEM үлгүсүнөн кийинки класс аттары узун жана кыйын болуп калышы мүмкүн (мисалы, колдонмо-колдонуучунун жалпы кароосу__статус--аныктыктыгын текшерүү), жана ат коюу эрежелерин толук сактабоо системанын структурасын бузуп, ошону менен анын артыкчылыктарын жокко чыгарат. Бул кыйынчылыктарды эске алуу менен, иштеп чыгуучулар алкактарга кайрылышканы таң калыштуу эмес, Tailwind эң популярдуу CSS алкактары. Стильдер ортосундагы жеңе алгыс өзгөчөлүк согушу сыяктуу көрүнгөн нерсе менен күрөшүүгө аракет кылуунун ордуна, CSS Каскадынан баш тартуу жана толук изоляцияга кепилдик берүүчү куралдарды колдонуу оңой. Иштеп чыгуучулар коммуналдык кызматтарга көбүрөөк таянышат Кээ бир иштеп чыгуучулар каскаддык стилдерден качууну каалаарын кайдан билебиз? Бул атайын ушул максат үчүн иштелип чыккан CSS-in-JS алкактары сыяктуу "заманбап" алдыңкы куралдардын өсүшү. Белгилүү бир компоненттер менен тыгыз байланышкан обочолонгон стилдер менен иштөө таза абанын деми сыяктуу сезилиши мүмкүн. Бул нерселерди атоо зарылдыгын жок кылат - дагы эле эң жек көрүндү жана көп убакытты талап кылган алдыңкы тапшырмалардын бири - жана иштеп чыгуучуларга CSS мурасынын артыкчылыктарын толук түшүнбөстөн же пайдаланбастан жемиштүү болууга мүмкүндүк берет. Бирок CSS каскадын жокко чыгаруу өзүнүн көйгөйлөрү менен коштолот. Мисалы, JavaScript'те стилдерди түзүү оор конфигурацияларды талап кылат жана көбүнчө стилдердин компоненттерди белгилөө же HTML менен ыңгайсыз аралашуусуна алып келет. Кылдат каралган ат коюу конвенцияларынын ордуна, биз өзүбүз үчүн селекторлорду жана идентификаторлорду (мис., .jsx-3130221066) автогенерациялоочу куралдарды курууга уруксат беребиз, бул иштеп чыгуучулардан дагы башка псевдо-тил менен иштөөнү талап кылат. (Сиздин бардык компонентиңиздин useEffects эмне кылаарын түшүнүү үчүн когнитивдик жүк жетишсиз болгон сыяктуу!) Класстарды инструментке атоо жумушун андан ары абстракциялоо негизги мүчүлүштүктөрдү оңдоо көбүнчө иштеп чыгуучу куралдары сыяктуу жандуу мүчүлүштүктөрдү оңдоону колдогон жергиликтүү браузердин функцияларын колдонуунун ордуна, иштеп чыгуу үчүн түзүлгөн конкреттүү колдонмо версиялары менен чектелет дегенди билдирет. Биз веб-сайт берген нерселерди абстракциялоо үчүн колдонуп жаткан куралдарды оңдоо үчүн куралдарды иштеп чыгышыбыз керек окшойт - мунун баары стандарттуу CSS жазуудагы "оорудан" качуу үчүн. Бактыга жараша, заманбап CSS функциялары стандарттуу CSS жазууну ийкемдүү кылып гана тим болбостон, биз сыяктуу иштеп чыгуучуларга каскадды башкаруу жана аны биз үчүн иштөө үчүн көбүрөөк күч берет. CSS Cascade Layers сонун мисал, бирок таң калыштуу түрдө көңүл бурулбай калган дагы бир өзгөчөлүк бар - бирок ал жакында эле Базалык линияга шайкеш келгендиктен өзгөрүп жатат. CSS @scope At-Rule Мен CSS @scope at-rule биз камтылган стилден улам келип чыккан тынчсыздануу үчүн потенциалдуу даба деп эсептейм, бул бизди абстракциялар жана кошумча куруу куралдары үчүн жергиликтүү веб артыкчылыктарын бузууга мажбурлабайт. "@scope CSS эрежеси сизге DOM түзүмүнө өтө катуу туташтырбай туруп эле, өзгөчө бир DOM дарактарынын элементтерин тандап алууга, элементтерди так аныктоого мүмкүндүк берет, аларды жокко чыгаруу кыйын болгон өтө спецификалык селекторлорду жазбастан жана селекторлоруңузду DOM түзүмүнө өтө тыгыз байланыштырбастан." - MDN.
Башкача айтканда, биз мурасты, каскаддыкты, атүгүл кооптонууларды негизги бөлүп салбастан, белгилүү бир учурларда обочолонгон стилдер менен иштей алабыз.бул алдыцкы енугуунун узакка созулган башкы принциби болуп калды. Мындан тышкары, ал мыкты браузер камтууга ээ. Чынында, Firefox 146 декабрда @scope үчүн колдоо кошуп, аны биринчи жолу Baseline шайкеш кылган. Бул жерде @scope эрежеси менен BEM үлгүсүн колдонгон баскычты жөнөкөй салыштыруу:
<стиль> .button .button__text { /* баскычтын текст стилдери */ } .button .button__icon { /* баскыч сөлөкөтүнүн стилдери */ } .button--primary { негизги баскыч стилдери */ }
<стиль> @scope (.primary-button) { span:first-child { /* баскычтын текст стилдери */ } span: last-child { /* баскыч сөлөкөтүн стилдери */ } }
@Scope эрежеси азыраак татаалдык менен тактыкка мүмкүндүк берет. Иштеп чыгуучу мындан ары класс атын колдонуу менен чектерди түзүүнүн кереги жок, бул өз кезегинде аларга HTML элементтеринин негизинде селекторлорду жазууга мүмкүндүк берет, ошону менен CSS класс аталыштарынын көрсөтмөлүү үлгүлөрүнүн зарылдыгын жок кылат. Жөн гана класстын аталышын башкаруу зарылдыгын алып салуу менен, @scope чоң долбоорлордо CSS менен байланышкан коркуу сезимин басаңдата алат.
Негизги колдонуу
Баштоо үчүн, CSS'иңизге @scope эрежесин кошуңуз жана стилдер камтыла турган түпкү селекторду киргизиңиз:
@scope (
Ошентип, мисалы, биз стилдерди
@scope (nav) { a { /* Навигациянын алкагындагы шилтеме стилдери */ }
a:active { /* активдүү шилтеме стилдери */ }
a:active::for { /* Кошумча стилдештирүү үчүн псевдоэлемент менен активдүү шилтеме */ }
@media (максималдуу туурасы: 768px) { a { /* Жооптуу оңдоолор */ } } }
Бул, өз алдынча, негиздүү өзгөчөлүк эмес. Бирок, экинчи аргумент чөйрөнүн башталышы жана аяккы чекиттерин эффективдүү аныктоочу төмөнкү чекти түзүү үчүн чөйрөгө кошулушу мүмкүн.
/* ul ичиндеги кандайдыр бир элементте стилдер колдонулбайт */ @scope (nav) to (ul) { а { шрифт өлчөмү: 14px; } }
Бул практика пончиктин масштабын аныктоо деп аталат жана бир нече ыкмаларды колдонууга болот, анын ичинде DOM түзүмү менен тыгыз байланышкан бир катар окшош, өтө спецификалык селекторлор, :псевдокселектор эмес, же ар кандай CSS менен иштөө үчүн элементтерине белгилүү класс атын ыйгаруу. Башка ыкмаларга карабастан, @scope ыкмасы кыйла кыскараак. Андан да маанилүүсү, класс аттары өзгөрсө же туура эмес колдонулса же HTML структурасы өзгөртүлсө, стилдердин бузулуу коркунучун алдын алат. Эми @scope Baseline шайкеш болгондуктан, бизге мындан ары убактылуу чечимдердин кереги жок! "Стиль сегизин" түзүү үчүн биз бул идеяны бир нече чек ара менен уланта алабыз:
/*
Корутунду Tailwind сыяктуу пайдалуу биринчи CSS алкактары прототиптөө жана кичине долбоорлор үчүн жакшы иштейт. Бирок, бир нече иштеп чыгуучуларды камтыган ири долбоорлордо колдонулганда, алардын пайдасы бат эле азаят. Front-end иштеп чыгуу акыркы бир нече жылда барган сайын өтө татаал болуп калды, жана CSS да четте калган жок. @Scope эрежеси бардыгын айыктыруучу болбосо да, ал татаал шаймандарды колдонууну азайтышы мүмкүн. Класстын стратегиялык аталышынын ордуна же аны менен бирге колдонулганда, @scope сакталуучу CSS жазууну оңой жана кызыктуураак кыла алат. Андан ары окуу
CSS @scope (MDN) "CSS @scope", Хуан Диего Родригес (CSS-Tricks) Firefox 146 релиз эскертүүлөрү (Firefox) Браузерди колдоо (CanIUse) Популярдуу CSS алкактары (CSS 2024 абалы) "CSSдеги "С": Каскад", Томас Йип (CSS-Tricks) BEM киргизүү (BEM алуу)
