பெரிய கோட் பேஸ்களுக்கு உதவும் CSS ஆர்க்கிடெக்சர் முறைகள் யாவை?

Question

Accepted Answer

திட்டங்கள் வளரும்போது, சாதாரண CSS **உலகளாவிய நோக்கத்திலிருந்து** பாதிக்கப்படுகிறது — ஒவ்வொரு தேர்வியும் உலகளாவிய ரீதியாக போட்டி இடுகிறது, குறிப்பত்वம் போர் வெடிக்கிறது, மற்றும் யாரும் ஒரு விதியை நீக்க துணிய மாட்டார்கள். முறைகள் CSS கூடுதல் சொத்து இருந்து கட்டமைப்பு மற்றும் பெயரிடல் மாநாடுகளை திணிக. ## BEM (Block Element Modifier) ெ பெயரிடல் கொண்ட குறிப்பியல் தொடர்பை வெளிப்படையாக செய்கிறது மற்றும் குறிப்பத்வம் தட்டையாக வைத்திருக்கிறது (வெறும் ஒற்றை வகுப்புகள்): ```css .card { } /* Block — standalone component */ .card__title { } /* Element — a part of the block (double underscore) */ .card__button { } .card--featured { } /* Modifier — a variant (double dash) */ ``` ```html

...

``` BEM-இன் மதிப்பு: வகுப்பு பெயர்கள் தங்களை ஆவணப்படுத்துகின்றன, மாநாடு மூலம் பொதியப்படுகின்றன, மற்றும் சீராக குறைந்த குறிப்பத்வம் (நட்டு/ஐடி போர் இல்லை). ## Utility-first (Tailwind) நிமிடமான ஒற்றை-நோக்கம் வகுப்புகளிலிருந்து நேரடிப் பொருள்களில் பாணியை রচனை செய்யுங்கள்: ```html

...

``` பக்கத்திற்க்க்: பெயரிடல் இல்லை, பயன்படாத CSS இல்லை (சுரक்ஷিது), நிலையான வடிப்பு டோக்கன்கள். குறைகோள்: வெரோச HTML. பெரிது பிரபலமாக உள்ளது அதன் வேகம் மற்றும் ஒருமுகத்வத்திற்க்க். ## Scoped / CSS Modules & CSS-in-JS க்கொம்பிஊனேன்ட் কাঠமைகளில் நவீன அணுகுமுறை — பாணிகளை ஒரு க்கொம்பிஊனேன்टकுக்குப் பொதையும் வகையில் அவை **உண்ண முடியாது**: ```jsx import styles from "./Card.module.css"; // class names are hashed/localized

...

// → .Card_card__a1b2 (unique) ``` இது உலகளாவிய-நோக்கம் சிக்கலை যান்ত்রிக ரீதியாக மாநாட்டின் பதிலாக தீர்க்கிறது. ## பிற கணினிகள் ```text OOCSS — separate structure from skin, reuse objects SMACSS — categorize rules (base, layout, module, state, theme) ITCSS — layer CSS by specificity (generic → explicit), low to high ``` ## பொதிய இலக்ష்य சகல்வும் ஒரே எதிரிகளுடன் சண்டையிடுகின்றன: **குறிப்பத்வம் ஊர்வ**, **பெயர் மோதல்கள்**, **இறந்த குறிமுறை**, மற்றும் **கணிக முடியாத கேஸ்கேடுகள்**. பெயரிடல் (BEM), பயன்பாடுகள் (Tailwind), அல்லது பொதையுங்கள் (மொட்டு) மூலமாக, அவை CSS கணிக்கக்கூடிய மற்றும் மாப்பில் மாற்ற பாதுகாப்பாக கொள்கிறது. ## ஏன் இது சக்கதி பெரிய CSS கோட் பேஸ்கள் உலகளாவிய நோக்கம் மற்றும் குறிப்பத்வம் போர் இல்லாமல் உடைந்துவிடுகின்றன. தேர்வு மற்றும் அடுத்தடுத்த உபயோக ஒரு முறை (பொதுவாக BEM, Tailwind, அல்லது scoped CSS Modules இன்று) என்பது பாணிகளை மாற்றுகூடிய வகைப்படுத்தப்படாத, மற்றும் ஒரு குழு மற்றும் codebase வளரும் போது மோதல் இல்லாமல் வைத்திருக்கிறது.