No masursuro dagiti prinsipio ti batayan a CSS, ti maysa ket maisuro nga agsurat kadagiti modular, mausar manen, ken mangiladawan nga estilo tapno masigurado ti pannakamantener. Ngem no dagiti developer ket makiraman kadagiti pudno a lubong nga aplikasion, masansan a marikna nga imposible ti manginayon kadagiti tampok ti UI nga awan dagiti estilo nga agruar kadagiti di nairanta a lugar. Masansan nga ag-snowball daytoy nga isyu iti maysa a makatungpal iti bagina a loop; dagiti estilo a teoretikal a nasaklaw iti maysa nga elemento wenno klase ket mangrugin nga agparang no sadino ti saanda. Daytoy ket mangpilit ti developer a mangpartuat kadagiti ad-adu pay nga espesipiko a managpili tapno mangbalbaliw kadagiti nagruar nga estilo, a kalpasanna ket aksidente a mangbalbaliw kadagiti sangalubongan nga estilo, ken dadduma pay. Dagiti nainget a konbension ti nagan ti klase, kas iti BEM, ket maysa a teoretikal a solusion iti daytoy nga isyu. Ti metodolohia ti BEM (Block, Element, Modifier) ket sistematiko a wagas ti panagnagan kadagiti klase ti CSS tapno masigurado ti pannakausar manen ken estruktura iti uneg dagiti papeles ti CSS. Dagiti konbension ti panagnagan a kas daytoy ket mabalin a mangkissay ti kognitibo a karga babaen ti panag-aprobetsar ti pagsasao ti dominio tapno mangiladawan kadagiti elemento ken ti kasasaadda, ken no umiso a maipatungpal, ket mabalin a mangaramid kadagiti estilo para kadagiti dadakkel nga aplikasion a nalaklaka a mataginayon. Ngem iti pudpudno a lubong, saan a kanayon a kasta ti pagbanaganna. Priorities can change, and with change, implementation becomes inconsistent. Dagiti babassit a panagbalbaliw iti estruktura ti HTML ket mabalin a kasapulan ti adu a panagrebisar ti nagan ti klase ti CSS. Kadagiti nangato nga interaktibo nga aplikasion ti sango, dagiti nagan ti klase a mangsurot ti padron ti BEM ket mabalin nga agbalin nga atiddog ken saan a maiggaman (e.g., app-user-overview__status--is-authenticating), ken ti saan a naan-anay a panagtungpal kadagiti pagannurotan ti panagnagan ket manglabsing ti estruktura ti sistema, iti kasta ket mangikkat kadagiti pagimbaganna. Given these challenges, it’s no wonder that developers have turned to frameworks, Tailwind being the most popular CSS framework. Imbes a padasen a labanan ti kasla saan a maabak a gubat ti espesipiko iti nagbaetan dagiti estilo, nalaklaka a sumuko iti CSS Cascade ken agusar kadagiti ramit a mangipanamnama iti naan-anay a pannakaisina. Ad-adda nga Agsandig dagiti Developer Kadagiti Utilities Kasano nga ammotayo a dadduma a developer ti magagaran a mangliklik kadagiti cascaded style? Daytat’ panagpangato ti “moderno” a front-end tooling — kas kadagiti balangkas ti CSS-in-JS — a nadisenio nga espesipiko para iti dayta a panggep. Ti panagtrabaho kadagiti naiputputong nga estilo a nairut ti pannakasaklawda kadagiti espesipiko a paset ket mabalin a kasla panaganges iti presko nga angin. Daytoy ket mangikkat ti panagkasapulan a manginaganan kadagiti banag — maysa pay laeng kadagiti kaaduan a kagura ken makabusbos ti panawen a front-end nga aramid — ken mangipalubos kadagiti agparparang-ay nga agbalin a produktibo a saan a naan-anay a maawatan wenno mang-aprobetsar kadagiti pagimbagan ti panagtawid ti CSS. Ngem ti panangibelleng iti CSS Cascade ket addaan kadagiti bukodna a parikut. Kas pagarigan, ti panagputar kadagiti estilo iti JavaScript ket agkasapulan kadagiti nadagsen a panagisaad ti panagbangon ken masansan nga agturong kadagiti estilo a makauma a makilaok iti panagmarka ti paset wenno HTML. Imbes a dagiti naannad a naikonsidera a konbension ti panagnagan, palubosanmi dagiti ramit ti panagbangon a mang-autogenerate kadagiti agpili ken mangilasin para kadakami (e.g., .jsx-3130221066), a kasapulan dagiti agparparang-ay a makidanggay iti sabali pay a pseudo-language iti bagina. (Kasla saan pay nga umdas ti kognitibo a karga ti pannakaawat no ania ti ar-aramiden ti amin a component’s useEffects-mo!) Ti ad-adu pay a panagabstrakto ti trabaho ti panagnagan kadagiti klase iti tooling ket kayatna a sawen a ti batayan a panag-debug ket masansan a natengngel kadagiti espesipiko a bersion ti aplikasion a naurnong para iti panagrang-ay, imbes a mang-aprobetsar kadagiti katutubo a tampok ti browser a mangsuporta ti sibibiag a panag-debug, a kas dagiti Remienta ti Developer. Dandani kasla kasapulantayo ti mangaramid kadagiti ramit tapno ma-debug dagiti ramit nga us-usarentayo tapno abstrakto no ania ti dati nga ipaay ti web — amin para iti pagimbagan ti panagtaray manipud iti “ut-ot” ti panagsurat iti gagangay a CSS. Naimbag laengen ta dagiti moderno a tampok ti CSS ket saan laeng a mangaramid ti panagsurat ti pagalagadan a CSS nga ad-adda a nalaka a maibagay ngem mangted pay kadagiti developer a kas kadatayo iti dakkel nga ad-adu a bileg a mangituray ti kaskada ken mangaramid daytoy nga agtrabaho para kadatayo. Dagiti CSS Cascade Layers ket maysa a nasayaat a pagarigan, ngem adda sabali pay a tampok a makagun-od iti nakaskasdaaw a kinakurang ti atension — nupay agbaliwbaliw dayta ita ta nabiit pay a nagbalin a Baseline compatible. Ti CSS @scope Iti-Pagannurotan Ibilangko ti CSS @scope at-rule a maysa a potensial nga agas para iti kita ti style-leak-induced anxiety a sinakupmi, maysa a saan a mangpilit kadakami a mangikompromiso kadagiti katutubo a pagimbagan ti web para kadagiti abstraksion ken ekstra a build tooling. “Ti @scope CSS at-rule ti mangpabalin kenka a mangpili kadagiti elemento kadagiti espesipiko a subtree ti DOM, nga eksakto a puntiriaen dagiti elemento a di agsurat kadagiti nalabes nga espesipiko a selector a narigat a baliwan, ken saan a nairut unay a mangikapet kadagiti selector-mo iti estruktura ti DOM.”— MDN
Iti sabali a pannao, mabalintayo ti agtrabaho kadagiti naiputputong nga estilo kadagiti espesipiko a pasamak a ditay isakripisio ti tawid, cascading, wenno uray pay ti kangrunaan a panagsina dagiti pakaseknandayta ti nabayagen a mangiwanwan a prinsipio ti front-end development. Plus, nagsayaat ti browser coverage-na. Kinapudnona, ti Firefox 146 ket nanginayon ti suporta para iti @scope idi Disiembre, a mangaramid daytoy a maitunos iti Baseline iti umuna a gundaway. Adda ditoy ti simple a panagidilig ti nagbaetan ti buton nga agus-usar ti padron ti BEM kontra ti pagannurotan ti @scope:
Ti pagannurotan ti @scope ket mangipalubos ti kinaeksakto nga addaan iti basbassit a kinarikut. Ti agparparang-ay ket saanen a kasapulan a mangpartuat kadagiti pagbeddengan babaen ti panagusar kadagiti nagan ti klase, a daytoy, iti kasumbangirna, ket mangipalubos kadakuada nga agsurat kadagiti agpili a naibatay kadagiti katutubo nga elemento ti HTML, iti kasta ket mangikkat ti panagkasapulan kadagiti mangireseta a padron ti nagan ti klase ti CSS. Babaen laeng ti panangikkat ti panagkasapulan ti panagmanehar ti nagan ti klase, ti @scope ket mabalinna a pabassiten ti panagbuteng a nainaig iti CSS kadagiti dadakkel a proyekto.
Pangrugian nga Usar
Tapno mangrugi, inayon ti @scope rule iti CSS-mo ken mangikabil ti root selector no ania dagiti estilo a masakop:
@sakkop (
Isu a, kas pagarigan, no agsaklawtayo kadagiti estilo iti maysa nga elemento ti
@sakop (nav) { . a { /* Link styles within nav scope */ }
a:active { /* Aktibo nga estilo ti silpo */ } .
a:active::before { /* Active link with pseudo-element for extra styling */ }
@media (max-lawa: 768px) { a { /* Dagiti makasungbat a panagbalbaliw */ } . } . } .
Daytoy, no bukodna, ket saan a groundbreaking feature. Nupay kasta, ti maikadua nga argumento ket mabalin a mainayon iti sakup tapno mangpataud iti nababbaba a beddeng, nga epektibo a mangikeddeng kadagiti punto ti pangrugian ken panagpatingga ti sakup.
/* Aniaman nga elemento iti uneg ti ul ket saan nga addaan kadagiti estilo a naipakat */ . @sakop (nav) agingga iti (ul) { . a { . kadakkel ti letra: 14px; } . } .
Daytoy nga aramid ket maawagan iti donut scoping, ken adda dagiti sumagmamano nga asidegan a mabalin nga usaren ti maysa, a mairaman ti serye dagiti kapada, nangato nga espesipiko a managpili a naikapet a nairut iti estruktura ti DOM, ti maysa a :saan a pseudo-selector, wenno mangituding kadagiti espesipiko a nagan ti klase kadagiti nga elemento iti uneg ti
Konklusion Dagiti balangkas ti CSS nga umuna nga utilidad, a kas ti Tailwind, ket agtrabaho a nasayaat para iti panagprototipo ken dagiti babbabassit a proyekto. Nupay kasta, alisto a bumassit dagiti pagimbaganda no mausar kadagiti dadakkel a proyekto a pakairamanan ti nasurok a dua a developer. Ti panagrang-ay ti front-end ket nagbalin nga ad-adda a nalabes a komplikado kadagiti napalabas a sumagmamano a tawen, ken ti CSS ket saan a nailaksid. Bayat a ti @scope rule ket saan nga agas-amin, mabalin a pabassitenna ti panagkasapulan iti komplikado a tooling. No mausar a kasukat ti, wenno iti abay ti estratehiko a panagnagan ti klase, ti @scope ket mabalinna a pagbalinen a nalaklaka ken ad-adda a makaay-ayo ti panagsurat ti mataginayon a CSS. Kanayonan a Panagbasa
CSS @saklaw (MDN) . “CSS @saklaw”, ni Juan Diego Rodríguez (CSS-Tricks) . Dagiti Pakaammo ti Panakairuar ti Firefox 146 (Firefox) . Suporta ti Browser (CanIUse) . Dagiti Nalatak a Balangkas ti CSS (Estado ti CSS 2024) . “Ti “C” iti CSS: Kaskada”, Thomas Yip (CSS-Tricks) . Panangidatag ti BEM (Maala ti BEM) .
