CSS básico nisqap kamachiyninkunata yachaspaqa, modular, musuqmanta llamk'achinapaq, sut'inchanapaq estilokunata qillqanapaq yachachikun, mantenimiento nisqa kananpaq. Ichaqa mayk'aq ruwaqkuna chiqa pacha ruwanakunawan tinkinku, sapa kuti mana atikuq hina sientekun UI ruwanakuna yapayta mana estilokuna mana munasqa kitikunaman lluqsispa. Kay asuntoqa sapa kutim rit’i bola hina huk kikin hunt’akuq llimp’iman; estilokuna teóricamente huk elementoman utaq claseman alcanceyuq kaqkuna maypi mana pertenecesqankupi rikuchiyta qallarinku. Kayqa ruwaqta aswan sapanchasqa akllaqkunata ruwananpaq tanqan chaymanta lluqsisqa estilokunata llallinanpaq, chaymanta mana yuyaypi tukuy pacha estilokunata llallichinku, chaymanta wakkuna. Convenios de nombres rígidas de clase, ahinataq BEM, huk solución teórica kay asuntopaq. BEM (Bloque, Elemento, Modificador) metodología nisqaqa huk sistematico ñanmi CSS clasekuna sutichaypaq, CSS willañiqikuna ukhupi musuqmanta llamk'achiyta chaymanta estructurata qhawanapaq. Kayhina sutichay convencionkunaqa carga cognitivata pisiyachinman, dominio simita aprovechaspa elementokunata chaymanta estadonmanta willanapaq, chaymanta allinta ruwasqa kaptinqa, hatun ruwanakunapaq estilokunata aswan facilta waqaychayta atin. Ichaqa cheqaq pachapiqa manan chhaynachu ruwakun. Ñawpaqman churasqakunaqa tikrakunmanmi, tikrakuywantaqmi ruwayqa mana tupaqman tikrakun. HTML ruwaypi huch'uy tikraykunaqa achka CSS clase suti musuqyachiykunata mañakunman. Altamente interactivo ñawpaq-tukuy ruwanakunawan, BEM ruwayta qatiq clase sutikuna unay chaymanta mana hap’inapaq kanman (e.g., app-user-overview__status--is-authenticating), chaymanta mana hunt’asqata sutichay kamachiykunaman hapipakuyqa sistemapa ruwayninta p’akikun, chaywantaq allinninkunata negakun. Kay sasachakuykunata qusqa, mana musphaychu ruwaqkuna marcokunaman kutirisqanku, Tailwind aswan riqsisqa CSS marco kaq. Aswanpas maqanakuyta munaspa imachus mana atipanapaq especificidad maqanakuy hina rikch'akun estilokunapura, aswan facilmi CSS Cascade kaqmanta saqiy chaymanta yanapakuykunata llamk'achiy mayqinkunachus hunt'asqa sapanchasqa kayta garantizanku. Paqarichiqkuna Aswanta Utilidades kaqpi hapipakunku ¿Imaynatataq yachanchik wakin paqarichiqkuna cascada estilokunamanta karunchakuyta munasqankuta? Chayqa “kunan pacha” ñawpaq-tukuy yanapakuypa wichariyninmi — CSS-in-JS marcokuna hina — chaypaq ruwasqa. Sapanchasqa estilokunawan llamk'ayqa, mayqinkunachus componentes específicos nisqaman allinta alcanceyuq kanku, juk sumaq wayra samayjina rikch'akunman. Imakunatapas sutichay necesidadta hurqun — kunankamapas huk aswan chiqnisqa chaymanta pacha hapiq ñawpaq ruwanakunamanta — chaymanta ruwaqkunata ruruchiq kanankupaq saqillan mana hunt'asqata hamut'aspa utaq CSS herenciapa allinninkunata aprovechaspa. Ichaqa CSS Cascadeta zanjayqa kikin sasachakuyninkunawanmi hamun. Ejemplopaq, JavaScript kaqpi estilokuna ruwayqa llasa ruway ruwanakunata munan chaymanta sapa kuti estilokuna mana allinta componente marcaywan utaq HTML kaqwan chaqrusqaman pusakun. Allinta qhawasqa sutichay convencionkunamantaqa, ruway yanapakuykunata ñuqaykupaq akllaqkunata chaymanta riqsichiqkunata kikillanmanta ruwayta saqiyku (e.g., .jsx-3130221066), ruwaqkunata huk yanqa simiwan kikinpi chaymanta kikinpi purinankupaq mañaspa. (Imaynachus carga cognitiva entiendeymanta imatachus tukuy componenteykipa useEffects ruwanku mana suficienteñachu!) Aswan abstracción llamk'ayta clasekuna sutichay yanapakuykunaman niyta munan, sapsi pantay allichay sapa kuti harkasqa kachkan sapanchasqa ruwana layakuna wiñachiypaq huñusqa, aswan nativo maskaq ruwanakuna kawsaq pantay allichayta yanapaq, ahinataq Paqarichiq yanapakuykuna. Yaqa imaynachus yanapakuykunata ruwanayku tiyan yanapakuykunata pantachinaykupaq llamk’asqaykumanta abstracción ruwanapaq imachus web qusqaña — tukuy chay “nanaymanta” ayqinapaq allinpaq CSS estándar qillqaymanta. Suertepaq, kunan pacha CSS ruwanakuna mana CSS estándar qillqayllatachu aswan flexible ruwanku aswanpas ñuqayku hina paqarichiqkunaman huk hatun aswan atiyta qunku cascada kamachiypaq chaymanta ñuqaykupaq llamk'ananpaq. CSS Cascade Layers huk hatun ejemplo kanku, ichaqa huk ruwana kan mayqinchus huk musphay mana qhawayta tarin — ichaqa chay kunan tikrakun chaymanta chayllaraq Baseline tupaqman tukusqa. Chay CSS @scope At-Rule nisqa CSS @scope at-rule kaqmanta huk hampi atikuq kaqta qhawani chaymanta chay clase estilo-fuga-inducida llakikuypaq qatasqayku, huk mana obligawanchikchu nativo web ventajakuna abstracciones kaqpaq chaymanta extra ruway herramientakuna kaqpaq comprometer. “@scope CSS at-rule nisqa DOM huch’uy sach’akunapi elementokunata akllayta atichisunki, elementokunata allinta qhawaspa mana llumpay específico akllaqkunata qillqaspa, chaykunaqa sasa llallinapaqmi, chaymanta mana akllaqniykikunata DOM estructuraman anchata tinkuchispa.”— MDN
Huk rimaypiqa, sapanchasqa estilokunawan llamk'ayta atisunman instancias específicas nisqapi mana herenciata, cascadata, nitaq preocupaciones básicas t'aqanakuytapas sacrificaspachaymi unaymantaña puriq pusaq kamachikuy karqan ñawpaqpi wiñariypaq. Astawan, allin navegador coberturayuq. Chiqamanta, Firefox 146 @scope yanapakuyta yaparqa diciembre killapi, ñawpaq kutita Baseline kaqwan tupaq. Kaypi huk sanu tupachiy huk botón BEM patrón kaqwan @scope kamachiywan:
nisqa
@scope kamachiyqa pisi sasachakuyniyuq chiqan kayta saqin. Ruwaqqa manañam clase sutikunata llamk'achispa linderos ruwayta munanchu, chaytaq, kutichiyninpi, akllaqkunata qillqayta saqin nativo HTML elementokunapi, chaywan kamachisqa CSS clase suti ruwanakuna necesidadta chinkachin. Clase suti kamachiy necesidadta hurquspalla, @scope hatun llamkanakunapi CSS kaqwan tinkisqa manchakuyta pisiyachiyta atin.
Uso Básico nisqa
Qallarinapaq, @scope kamachiyta CSS kaqman yapay chaymanta huk saphi akllaqta churay mayqin estilokunamanchus alcanceyuq kanqa:
@alcance (
Chaymi, huk rikch'anapaq, sichus estilokunata huk
@alcance (nav) {. a { /* nav alcance ukhupi t'inkisqa estilokuna */ } .
a:active { /* Ruwaq t'inki estilokuna */ } .
a:active::before { /* Pseudo-elementwan llamk'aq t'inki yapasqa estilopaq */ }
@media (aswan anchun: 768px) { a { /* Kutichiq allichaykuna */ } . } . } .
Kayqa, sapallanmantaqa, manam allpata kichariqchu. Ichaqa iskay kaq argumento yapakunmanmi alcanceman aswan pisi lindero ruwanapaq, allinta definispa alcancepa qallariynin, tukukuynin ima.
/* Ima a elementopas ul ukhupi mana estilokuna churasqachu kanqa */ @alcance (nav)manta (ul)kama { . a { . letra-tamaño: 14px; } . } .
Kay ruwayqa donut alcance sutichasqa, chaymanta kanmi achka ruwaykuna huk llamk'achiyta atinman, huk serie rikch'aq, ancha específico akllanakuna DOM estructuraman allinta tinkisqa, huk :mana pseudo-selector, utaq específico clase sutikuna elementokunaman
Tukuchina Utility-first CSS marcokuna, Tailwind hina, allinta llamk'anku prototipopaq chaymanta aswan huch'uy llamk'anakunapaq. Ichaqa, aswan hatun ruwaykunapi llamk'achiptinku, aswan iskay kimsa ruwaqkuna llamk'achiptinku, allinninkuqa usqhaylla pisiyan. Front-end wiñachiyqa aswanta llumpay sasachakuyman tukusqa kay qhipa watakunapi, chaymanta CSS mana hukniraqchu. @scope kamachiy mana tukuy hampichu kaptinpas, sasachakuyniyuq yanapakuykunata pisiyachinman. Estratégico clase sutichaypa rantinpi, utaq ladunpi llamk'achisqa kaqtin, @scope aswan facilta chaymanta aswan kusikuyta ruwayta atin CSS waqaychaypaq qillqayta. Astawan Ñawinchay
CSS @alcance (MDN) nisqa. “CSS @ámbito”, Juan Diego Rodríguez (CSS-Tricks) sutiyuq runaqa. Firefox 146 Kacharisqamanta willakuykunata (Firefox) . Navegador Yanapakuy (CanIUse) . CSS nisqap ancha riqsisqa marconkuna (CSS 2024 nisqap suyun) . “CSS: Cascada nisqapi “C” nisqa”, Thomas Yip (CSS-Tricks) BEM Riqsichikuy (BEM chaskiy) .
