Ang mga programmers ay nagkakahalaga ng maraming taon sa lahat ng mga duplication, ang lahat ng pangangailangan upang makakuha ng mga disenyo adaptable, at ang lahat ng pag-aalis ng mga conflict ng estilo. Three new features are now revolutionizing CSS into a cleaner, slimmer, and more modern tool: Nesting, Container Queries, and Scoped Styles. CSS Ang mga ito ay hindi trivial na pagbabago; sila ay revolutionize kung paano namin style, at ang CSS ay mas intuitive, modular, at predictable. Sa huli, ang CSS ay nangangailangan ng mga developer na i-repeat ang kanilang sarili kapag nag-styling ang mga elemento. Ang pag-nisting ay nag-solve ito sa pamamagitan ng nagbibigay-daan ng mga estilo na sumusunod sa natural na struktural na nilalaman. Sa halip ng pagpapatakbo ng mga patakaran individually sa bawat elemento, ang pag-nisting ay nagbibigay-daan sa mga ito upang i-collect ang mga ito logically. Ito ay nagbibigay ng mga estilo na mas madaling i-read at patuloy-tuloy, dahil ang CSS ay mas matatagpuan sa strukturong HTML na ito ay lumikha. Para sa mga grupo, ito ay nangangahulugan ng mas mababang mga error at isang mas malinaw na koneksyon sa pagitan ng disenyo at ang code na sumusuporta sa kanya. Container Queries Mga Container Ang mga web developer ay gumagamit para sa loob ng maraming taon ng media queries na i-adjust ang mga disenyo batay sa size ng browser window. Ito ay simpleng magagandang sa ilang mga kaso, ngunit hindi kapag ang isang elemento - isang card, button, o sidebar, halimbawa - ay ginagamit sa ilang mga lugar sa isang pahina. Ang mga query ng container ay tumutulong sa problemang ito sa pamamagitan ng inihahanda ng isang bahagi na i-re-size ang mga ito ayon sa kung ano ang lumang lugar na ito ay nasa, hindi ang buong screen. Mag-iisip ng isang card na tinatawag na maliit sa isang sidebar ngunit maaaring lumago sa katunayan sa isang pangunahing area ng nilalaman - walang karagdagang tricks o konvoluted workarounds. This ability makes components maximum reusable and adaptable, no matter where they are located. Mga Styles One of the worst CSS headaches is that styles can "leak" across a page. A style intended for one component may inadvertently alter another, producing furious bugs. Scoped styles stop this by keeping styles bound to a single section or component. Ang isolasyon na ito ay gumagawa ng CSS na predictable at safe. Ito ay lalo na mahalaga sa modernong pag-unlad, kung saan ang mga website ay binuo mula sa maraming mga reusable na mga bahagi. Scoped styles ay panatilihin na ang bawat bahagi ay nakikita tulad nito, libre mula sa pag-interference sa pamamagitan ng iba pang mga bahagi. Why Do These Features Matter? Bakit importante ang mga characteristics? Sa kabuuan, ang tatlong mga tampok na ito ay binubuo ng isang pangunahing pagbabago sa CSS: 
 
 
 
 Nesting ay nagbibigay-daan ng code clean at madaling i-read. Container Queries ay nagbibigay ng mga disenyo upang maging flexible sa anumang situasyon. Ang mga pangunahing components ay hindi maaaring mag-interference. Ang lahat ng mga ito ay gumagana sa pamamagitan ng pag-aralan ng CSS sa karanasan ng pagbuo ng mga website ngayon: modular, reusable, at user-centric. The Road Ahead ang path forward Ang suporta para sa mga tampok na ito ay hindi sa lahat ng mga browser na ngayon, ngunit ito ay lumaki nang mabilis. Mga developer na subukan ang mga ito ngayon ay mapagpapatuloy sa kurva kapag dumating ang kabuuan ng CSS, at sila ay makakuha ng mga benepisyo ngayon kung saan ang suporta ay magagamit. Conclusion Konklusyon Ang CSS ay nagbabago upang matugunan ang mga pangangailangan ng contemporary web development. Nesting, container queries, at scopeed styles ay lumiligtas ng styling, gumawa ng ito ng mas smart, at higit pang trustworthy. Para sa mga designer at developer, ang mga tampok na ito ay nagpapakita ng isang bukas na kung saan ang CSS ay mas mahusay na kumpanya sa paraan na lumikha namin ng mga website ngayon. 
 
 Ang story na ito ay inilathala bilang isang release ng Sanya Kapoor sa ilalim ng HackerNoon's Business Blogging Program. Ang story na ito ay inilathala bilang isang release ng Sanya Kapoor sa ilalim ng HackerNoon's Business Blogging Program.

The is an opinion piece based on the author’s POV and does not necessarily reflect the views of HackerNoon.

Read My Stories

Ang audio na ito ay ginawa sa orihinal na wika ng kuwento!

Ang Buhay ng Web Styling: CSS Nesting, Container Queries & Scoped Styles

About Author

MGA KOMENTO

HANG TAGS

ANG ARTIKULONG ITO AY IPINAKITA SA

Related Stories

Getting intimate with Ethereum tokens

State of the Noonion: The Year of Profitability and Product Renaissance

Hosting a DNS domain on the blockchain

How I deployed my spark document classification(Logistic Regression) model/s as a standalone app…

Getting intimate with Ethereum tokens

State of the Noonion: The Year of Profitability and Product Renaissance

Hosting a DNS domain on the blockchain

How I deployed my spark document classification(Logistic Regression) model/s as a standalone app…

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps