Негізгі CSS принциптерін үйрену кезінде қолдауды қамтамасыз ету үшін модульдік, қайта пайдалануға болатын және сипаттамалық стильдерді жазуға үйретіледі. Бірақ әзірлеушілер нақты әлем қолданбаларымен айналысқанда, стильдер күтілмеген аймақтарға ағып кетпей, UI мүмкіндіктерін қосу жиі мүмкін емес. Бұл мәселе көбінесе өздігінен орындалатын циклге айналады; бір элементке немесе сыныпқа теориялық тұрғыдан бөлінген стильдер олар тиесілі емес жерде көрсетіле бастайды. Бұл әзірлеушіге ағып кеткен мәнерлерді қайта анықтау үшін одан да нақты селекторларды жасауға мәжбүр етеді, содан кейін олар жаһандық мәнерлерді кездейсоқ қайталайды және т.б. BEM сияқты қатаң класс атауы конвенциялары осы мәселенің бір теориялық шешімі болып табылады. BEM (Блок, Элемент, Модификатор) әдістемесі CSS файлдарының ішінде қайта пайдалану және құрылымды қамтамасыз ету үшін CSS сыныптарын атаудың жүйелі әдісі болып табылады. Осындай конвенцияларды атау элементтерді және олардың күйін сипаттау үшін домен тілін пайдалану арқылы когнитивтік жүктемені азайтады және дұрыс орындалса, үлкен қолданбаларға арналған стильдерді қолдауды жеңілдетеді. Алайда, нақты әлемде бұл әрдайым бола бермейді. Басымдықтар өзгеруі мүмкін, ал өзгерту кезінде іске асыру сәйкессіз болады. HTML құрылымына кішігірім өзгертулер CSS класс атауының көптеген түзетулерін қажет етуі мүмкін. Жоғары интерактивті интерфейс қолданбаларымен BEM үлгісіне сәйкес сынып атаулары ұзақ және қолайсыз болуы мүмкін (мысалы, қолданба-пайдаланушыға шолу__status--аутентификация) және атау ережелерін толық сақтамау жүйенің құрылымын бұзады, осылайша оның артықшылықтарын жоққа шығарады. Осы қиындықтарды ескере отырып, әзірлеушілердің фреймворктарға бет бұрғаны таңқаларлық емес, Tailwind ең танымал CSS негізі. Стильдер арасындағы жеңуге болмайтын ерекшелік соғысы сияқты көрінетін нәрсемен күресуге тырысудың орнына, CSS каскадынан бас тарту және толық оқшаулауға кепілдік беретін құралдарды пайдалану оңайырақ. Әзірлеушілер утилиталарға көбірек сүйенеді Кейбір әзірлеушілер каскадтық стильдерден аулақ болғысы келетінін қайдан білеміз? Бұл осы мақсат үшін арнайы жасалған CSS-in-JS фреймворктері сияқты «заманауи» алдыңғы қатарлы құралдардың өсуі. Белгілі бір құрамдас бөліктерге тығыз байланысты оқшауланған стильдермен жұмыс істеу таза ауаның тынысы сияқты көрінуі мүмкін. Ол нәрселерді атау қажеттілігін жояды - әлі де ең жек көретін және уақытты қажет ететін алдыңғы тапсырмалардың бірі - және әзірлеушілерге CSS мұрасының артықшылықтарын толық түсінбестен немесе пайдаланбай өнімді болуға мүмкіндік береді. Бірақ CSS каскадынан бас тартудың өзіндік проблемалары бар. Мысалы, JavaScript-те стильдер құрастыру күрделі құрастыру конфигурацияларын талап етеді және көбінесе стильдердің құрамдас белгілермен немесе HTML-мен ыңғайсыз араласуына әкеледі. Мұқият қарастырылған атау конвенцияларының орнына біз құрастыру құралдарына біз үшін селекторлар мен идентификаторларды (мысалы, .jsx-3130221066) автогенерациялауға рұқсат етеміз, бұл әзірлеушілерден басқа жалған тілге ілесуін талап етеді. (Компоненттің барлық қолдану эффектілері не істейтінін түсінудің когнитивтік жүктемесі жеткіліксіз болған сияқты!) Құралдарға сыныптарды атау жұмысын одан әрі абстракциялау негізгі жөндеудің әзірлеуші құралдары сияқты тікелей жөндеуді қолдайтын жергілікті шолғыш мүмкіндіктерін пайдаланудан гөрі әзірлеу үшін құрастырылған арнайы қолданба нұсқаларымен шектелетінін білдіреді. Бізге веб ұсынатын нәрселерді абстракциялау үшін қолданатын құралдарды жөндеу үшін құралдарды әзірлеу керек сияқты - барлығы стандартты CSS жазудағы «ауыртпалықтан» қашу үшін. Бақытымызға орай, заманауи CSS мүмкіндіктері стандартты CSS жазуды икемді етіп қана қоймайды, сонымен қатар біз сияқты әзірлеушілерге каскадты басқаруға және оны біз үшін жұмыс істеуге мүмкіндік береді. CSS Cascade Layers - бұл тамаша мысал, бірақ таңқаларлық назар аудармайтын тағы бір мүмкіндік бар - ол жақында Baseline үйлесімді болғаннан кейін өзгеріп жатыр. CSS @scope At-Rule Мен CSS @scope at-rule біз қарастырған стильдің ағып кетуіне байланысты алаңдаушылықтың ықтимал емі деп санаймын, бұл бізді абстракциялар мен қосымша құрастыру құралдары үшін жергілікті веб артықшылықтарын бұзуға мәжбүрлемейді. «@scope CSS ережесі нақты 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) - (ul) { а { шрифт өлшемі: 14px; } }
Бұл тәжірибе пончик ауқымын анықтау деп аталады және бірнеше тәсілдерді қолдануға болады, соның ішінде DOM құрылымымен тығыз байланыстырылған ұқсас, жоғары спецификалық селекторлар тізбегі, :псевдокелектор емес немесе әртүрлі CSS-ті өңдеу үшін
/*
Қорытынды Tailwind сияқты утилитаға арналған бірінші CSS құрылымдары прототиптеу және кішірек жобалар үшін жақсы жұмыс істейді. Дегенмен, бірнеше әзірлеушілер қатысатын үлкен жобаларда пайдаланылған кезде олардың артықшылықтары тез төмендейді. Соңғы бірнеше жылда Front-end әзірлеу барған сайын күрделене түсті және CSS де ерекшелік емес. @Scope ережесі барлығын емдейтін құрал болмаса да, ол күрделі құралдардың қажеттілігін азайтады. Сыныптың стратегиялық атауының орнына немесе онымен қатар пайдаланылғанда, @scope қолдау көрсетілетін CSS жазуды жеңілдетеді және қызықты етеді. Қосымша оқу
CSS @scope (MDN) «CSS @scope», Хуан Диего Родригес (CSS-трюктері) Firefox 146 шығарылым жазбалары (Firefox) Браузерді қолдау (CanIUse) Танымал CSS Frameworks (CSS күйі 2024) CSS ішіндегі «С»: каскад», Томас Йип (CSS-трюктері) BEM кіріспе (BEM алу)
