CSS கட்டமைப்பு: BEM மற்றும் Atomic CSS - ஒரு உலகளாவிய ஒப்பீடு

பராமரிக்கக்கூடிய, அளவிடக்கூடிய மற்றும் புரிந்துகொள்ளக்கூடிய வலைப் பயன்பாடுகளை உருவாக்குவதற்கு சரியான CSS கட்டமைப்பைத் தேர்ந்தெடுப்பது மிக முக்கியம். BEM (பிளாக் எலிமென்ட் மாடிஃபையர்) மற்றும் Atomic CSS (செயல்பாட்டு CSS என்றும் அழைக்கப்படுகிறது) ஆகியவை இரண்டு பிரபலமான அணுகுமுறைகளாகும். இந்தக் கட்டுரை இந்த வழிமுறைகளின் விரிவான ஒப்பீட்டை வழங்குகிறது, அவற்றின் பலம், பலவீனங்கள் மற்றும் பல்வேறு உலகளாவிய மேம்பாட்டு சூழல்களில் உள்ள திட்ட வகைகளுக்கான பொருத்தத்தை கருத்தில் கொள்கிறது.

BEM (பிளாக் எலிமென்ட் மாடிஃபையர்) பற்றி புரிந்துகொள்ளுதல்

BEM என்பது பிளாக், எலிமென்ட் மற்றும் மாடிஃபையர் ஆகியவற்றைக் குறிக்கிறது. இது CSS வகுப்புகளுக்கான ஒரு பெயரிடும் மரபு, இது குறியீடு வாசிப்புத்தன்மை, பராமரிப்பு மற்றும் மறுபயன்பாட்டை மேம்படுத்துவதை நோக்கமாகக் கொண்டுள்ளது. ரஷ்யாவைச் சேர்ந்த (தற்போது சர்வதேச அளவில் செயல்படும்) ஒரு பெரிய தொழில்நுட்ப நிறுவனமான Yandex ஆல் உருவாக்கப்பட்டது, BEM உலகளவில் பரவலான அங்கீகாரத்தைப் பெற்றுள்ளது.

BEM-இன் முக்கிய கருத்துக்கள்

• பிளாக் (Block): தனியாகப் பொருள் தரும் ஒரு முழுமையான கூறு. எடுத்துக்காட்டுகள்: .header, .button, .form.
• எலிமென்ட் (Element): ஒரு பிளாக்கின் ஒரு பகுதி, அது தனியாக எந்தப் பொருளையும் கொண்டிருக்காது மற்றும் அதன் பிளாக்குடன் சொற்பொருள் ரீதியாக இணைக்கப்பட்டுள்ளது. எடுத்துக்காட்டுகள்: .header__logo, .button__text, .form__input.
• மாடிஃபையர் (Modifier): ஒரு பிளாக் அல்லது எலிமென்ட்டின் தோற்றம் அல்லது நடத்தையை மாற்றுவதற்காகப் பயன்படுத்தப்படும் ஒரு கொடி. எடுத்துக்காட்டுகள்: .button--primary, .button--disabled, .form__input--error.

BEM பெயரிடும் மரபு

BEM பெயரிடும் மரபு ஒரு குறிப்பிட்ட கட்டமைப்பைப் பின்பற்றுகிறது:

• .block
• .block__element
• .block--modifier
• .block__element--modifier

செயல்பாட்டில் BEM-இன் ஒரு எடுத்துக்காட்டு

ஒரு எளிய தேடல் படிவத்தைக் கவனியுங்கள்:

<form class="search-form">
  <input type="text" class="search-form__input" placeholder="Search...">
  <button class="search-form__button">Go</button>
</form>

.search-form {
  /* தேடல் படிவ பிளாக்கிற்கான ஸ்டைல்கள் */
}

.search-form__input {
  /* உள்ளீட்டு எலிமென்ட்டிற்கான ஸ்டைல்கள் */
}

.search-form__button {
  /* பொத்தான் எலிமென்ட்டிற்கான ஸ்டைல்கள் */
}

.search-form__button--primary {
  /* முதன்மை பொத்தான் மாடிஃபையருக்கான ஸ்டைல்கள் */
  background-color: blue;
  color: white;
}

BEM-இன் நன்மைகள்

• மேம்படுத்தப்பட்ட குறியீடு வாசிப்புத்தன்மை: தெளிவான பெயரிடும் மரபு ஒவ்வொரு CSS வகுப்பின் நோக்கத்தையும் எளிதாகப் புரிந்துகொள்ள உதவுகிறது.
• அதிகரித்த பராமரிப்புத்தன்மை: மட்டு அமைப்பு பயன்பாட்டின் பிற பகுதிகளை பாதிக்காமல் CSS ஸ்டைல்களை மாற்றியமைப்பதையும் புதுப்பிப்பதையும் எளிதாக்குகிறது.
• மேம்படுத்தப்பட்ட மறுபயன்பாடு: பிளாக்குகளை பயன்பாட்டின் வெவ்வேறு பகுதிகளில் மீண்டும் பயன்படுத்தலாம், இது குறியீடு நகலெடுப்பைக் குறைக்கிறது.
• குறைக்கப்பட்ட CSS பிரத்யேகத்தன்மை சிக்கல்கள்: BEM குறைந்த பிரத்யேகத்தன்மையை ஊக்குவிக்கிறது, இது CSS முரண்பாடுகள் மற்றும் எதிர்பாராத ஸ்டைலிங் அபாயத்தைக் குறைக்கிறது.
• பெரிய திட்டங்களுக்கு நல்லது: பல டெவலப்பர்கள் குறியீட்டுத் தளத்தில் பணிபுரியும் பெரிய மற்றும் சிக்கலான திட்டங்களுக்கு BEM நன்றாக அளவிடப்படுகிறது.

BEM-இன் தீமைகள்

• நீளமான வகுப்புப் பெயர்கள்: BEM வகுப்புப் பெயர்கள் மிகவும் நீளமாக இருக்கலாம், இது சில டெவலப்பர்களுக்கு சிரமமாகத் தோன்றுகிறது.
• அதிகரித்த HTML அளவு: நீளமான வகுப்புப் பெயர்கள் HTML கோப்புகளின் அளவை அதிகரிக்கக்கூடும்.
• கடினமான கற்றல் வளைவு: கருத்து எளிமையானதாக இருந்தாலும், BEM-ஐ முழுமையாகப் புரிந்துகொண்டு தொடர்ந்து பயன்படுத்துவதற்கு நேரமும் முயற்சியும் தேவை.
• அதிகப்படியான பொறியியலுக்கான சாத்தியம்: சிறிய திட்டங்களுக்கு, BEM அதிகப்படியானதாக இருக்கலாம் மற்றும் தேவையற்ற சிக்கலை அறிமுகப்படுத்தலாம்.

Atomic CSS (செயல்பாட்டு CSS) பற்றி புரிந்துகொள்ளுதல்

Atomic CSS, செயல்பாட்டு CSS என்றும் அழைக்கப்படுகிறது, இது சிறிய, ஒற்றை-நோக்க வகுப்புகளை ஆதரிக்கும் ஒரு CSS கட்டமைப்பாகும். ஒவ்வொரு வகுப்பும் ஒரு ஒற்றை CSS பண்பு மற்றும் மதிப்பைக் குறிக்கிறது. Tailwind CSS மற்றும் Tachyons போன்ற பிரபலமான கட்டமைப்புகள் இந்த அணுகுமுறையை எடுத்துக்காட்டுகின்றன. Atomic CSS பயன்பாட்டு-முதல் ஸ்டைலிங்கை ஊக்குவிக்கிறது, அங்கு நீங்கள் இந்த அணு வகுப்புகளைப் பயன்படுத்தி நேரடியாக உங்கள் HTML-இல் ஸ்டைல்களை உருவாக்குகிறீர்கள்.

Atomic CSS-இன் முக்கிய கருத்துக்கள்

• அணு வகுப்புகள் (Atomic Classes): சிறிய, ஒற்றை-நோக்க வகுப்புகள் ஒரு ஒற்றை CSS பண்பு மற்றும் மதிப்பைக் குறிக்கின்றன. எடுத்துக்காட்டுகள்: .ma0 (margin: 0), .pa2 (padding: 2), .f4 (font-size: 16px), .bg-blue (background-color: blue).
• பயன்பாட்டு-முதல் அணுகுமுறை (Utility-First Approach): தனிப்பயன் CSS விதிகளை எழுதுவதற்குப் பதிலாக, அணு வகுப்புகளைப் பயன்படுத்தி நேரடியாக HTML-இல் ஸ்டைல்கள் உருவாக்கப்படுகின்றன.
• மாறாத்தன்மை (Immutability): அணு வகுப்புகள் மாறாதவையாக இருக்க வேண்டும், அதாவது அவற்றின் ஸ்டைல்கள் மேலெழுதப்படவோ அல்லது மாற்றியமைக்கப்படவோ கூடாது.

செயல்பாட்டில் Atomic CSS-இன் ஒரு எடுத்துக்காட்டு

Tailwind CSS-ஐப் பயன்படுத்தி, மேலே உள்ள தேடல் படிவ எடுத்துக்காட்டு இதுபோல் இருக்கும்:

<form class="flex items-center">
  <input type="text" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline mr-2" placeholder="Search...">
  <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">Go</button>
</form>

flex, items-center, shadow, rounded போன்ற பயன்பாட்டு வகுப்புகளைப் பயன்படுத்தி HTML-இல் ஸ்டைல்கள் நேரடியாகப் பயன்படுத்தப்படுவதைக் கவனியுங்கள்.

Atomic CSS-இன் நன்மைகள்

• விரைவான முன்மாதிரி உருவாக்கம்: தனிப்பயன் CSS எழுதாமல் விரைவாக ஸ்டைல்களைப் பயன்படுத்த முடியும் என்பதால், Atomic CSS விரைவான முன்மாதிரி மற்றும் பரிசோதனையை அனுமதிக்கிறது.
• சீரான ஸ்டைலிங்: நீங்கள் முன்னரே வரையறுக்கப்பட்ட பயன்பாட்டு வகுப்புகளைப் பயன்படுத்துவதால், Atomic CSS பயன்பாடு முழுவதும் சீரான ஸ்டைலிங்கை ஊக்குவிக்கிறது.
• குறைக்கப்பட்ட CSS கோப்பு அளவு: அணு வகுப்புகளை மீண்டும் பயன்படுத்துவதன் மூலம், உங்கள் CSS கோப்புகளின் அளவை கணிசமாகக் குறைக்கலாம்.
• பெயரிடல் முரண்பாடுகளை நீக்குகிறது: நீங்கள் தனிப்பயன் CSS எழுதாததால், பெயரிடல் முரண்பாடுகள் மற்றும் பிரத்யேகத்தன்மை சிக்கல்களைத் தவிர்க்கிறீர்கள்.
• எளிதான ஒத்துழைப்பு: Atomic CSS கட்டமைப்புகளைப் பயன்படுத்தும் குழுக்கள், தரப்படுத்தப்பட்ட ஸ்டைலிங் சொற்களஞ்சியம் காரணமாக ஒத்துழைப்பை சுமுகமாகக் காண்கின்றன.

Atomic CSS-இன் தீமைகள்

• HTML ஒழுங்கின்மை: உங்கள் எலிமென்ட்களில் பல பயன்பாட்டு வகுப்புகளைச் சேர்ப்பதால், Atomic CSS ஒழுங்கற்ற HTML-க்கு வழிவகுக்கும்.
• கற்றல் வளைவு: ஒரு குறிப்பிட்ட Atomic CSS கட்டமைப்பின் பயன்பாட்டு வகுப்புகளைக் கற்றுக்கொள்ள நேரமும் முயற்சியும் தேவை.
• வரையறுக்கப்பட்ட தனிப்பயனாக்கம்: Atomic CSS கட்டமைப்புகள் பொதுவாக முன்னரே வரையறுக்கப்பட்ட பயன்பாட்டு வகுப்புகளை வழங்குகின்றன, இது தனிப்பயனாக்குதல் விருப்பங்களைக் கட்டுப்படுத்தலாம். இருப்பினும், பெரும்பாலான கட்டமைப்புகள் உள்ளமைவு மற்றும் நீட்டிப்பை அனுமதிக்கின்றன.
• சுருக்க சவால்கள்: பல வகுப்புகளுடன் இன்லைன் ஸ்டைலிங் செய்வது HTML-இன் சொற்பொருள் அர்த்தத்தை மறைக்கிறது என்று சிலர் வாதிடுகின்றனர்.
• சாத்தியமான செயல்திறன் கவலைகள்: CSS கோப்பு அளவுகள் சிறியதாக இருந்தாலும், HTML-இல் உள்ள வகுப்புகளின் எண்ணிக்கை ரெண்டரிங் செயல்திறனை பாதிக்கக்கூடும் (நடைமுறையில் அரிதாக இருந்தாலும்).

BEM மற்றும் Atomic CSS: ஒரு விரிவான ஒப்பீடு

BEM மற்றும் Atomic CSS-க்கு இடையிலான முக்கிய வேறுபாடுகளைச் சுருக்கமாகக் காட்டும் ஒரு அட்டவணை இங்கே:

அம்சம்	BEM	Atomic CSS
பெயரிடும் மரபு	பிளாக், எலிமென்ட், மாடிஃபையர்	ஒற்றை-நோக்க பயன்பாட்டு வகுப்புகள்
ஸ்டைலிங் அணுகுமுறை	தனிப்பயன் CSS விதிகளை எழுதுதல்	HTML-இல் பயன்பாட்டு வகுப்புகளைப் பயன்படுத்தி ஸ்டைல்களை உருவாக்குதல்
குறியீடு வாசிப்புத்தன்மை	நல்லது, தெளிவான பெயரிடும் மரபுடன்	HTML ஒழுங்கின்மை காரணமாக சவாலாக இருக்கலாம், கட்டமைப்புடன் உள்ள பரிச்சயத்தைப் பொறுத்தது
பராமரிப்புத்தன்மை	உயர்ந்தது, மட்டு அமைப்பு காரணமாக	உயர்ந்தது, சீரான ஸ்டைலிங் மற்றும் மறுபயன்பாட்டு வகுப்புகள் காரணமாக
மறுபயன்பாடு	உயர்ந்தது, பிளாக்குகளை பயன்பாடு முழுவதும் மீண்டும் பயன்படுத்தலாம்	மிக உயர்ந்தது, பயன்பாட்டு வகுப்புகள் மிகவும் மறுபயன்பாட்டுக்குரியவை
CSS பிரத்யேகத்தன்மை	குறைந்தது, தட்டையான பிரத்யேகத்தன்மையை ஊக்குவிக்கிறது	பிரத்யேகத்தன்மை சிக்கல்கள் இல்லை, ஸ்டைல்கள் நேரடியாகப் பயன்படுத்தப்படுகின்றன
HTML அளவு	நீளமான வகுப்புப் பெயர்கள் காரணமாக பெரியதாக இருக்கலாம்	பல பயன்பாட்டு வகுப்புகள் காரணமாக பெரியதாக இருக்கலாம்
கற்றல் வளைவு	மிதமானது	மிதமானது முதல் உயர்வானது, கட்டமைப்பைப் பொறுத்தது
தனிப்பயனாக்கம்	மிகவும் தனிப்பயனாக்கக்கூடியது	கட்டமைப்பால் வரையறுக்கப்பட்டது, ஆனால் பெரும்பாலும் உள்ளமைக்கக்கூடியது
முன்மாதிரி வேகம்	மிதமானது	வேகமானது

BEM-ஐ எப்போது பயன்படுத்துவது

BEM பின்வருவனவற்றிற்கு ஒரு நல்ல தேர்வாகும்:

• பெரிய மற்றும் சிக்கலான திட்டங்கள்
• பராமரிப்பு மற்றும் அளவிடுதிறனுக்கு வலுவான முக்கியத்துவம் கொடுக்கும் திட்டங்கள்
• தனிப்பயன் CSS எழுதுவதை விரும்பும் குழுக்கள்
• சொற்பொருள் HTML ஒரு முன்னுரிமையாக இருக்கும் திட்டங்கள்

Atomic CSS-ஐ எப்போது பயன்படுத்துவது

Atomic CSS பின்வருவனவற்றிற்கு ஒரு நல்ல தேர்வாகும்:

• விரைவான முன்மாதிரி உருவாக்கம்
• மேம்பாட்டின் வேகம் முக்கியமானதாக இருக்கும் திட்டங்கள்
• பயன்பாட்டு-முதல் கட்டமைப்புகளுடன் வேலை செய்ய வசதியாக இருக்கும் குழுக்கள்
• வடிவமைப்பில் சீரான தன்மை முதன்மையாக இருக்கும் திட்டங்கள்
• அதிகப்படியான பொறியியல் விரும்பத்தகாத சிறிய திட்டங்கள் அல்லது கூறுகள்

உலகளாவிய பரிசீலனைகள் மற்றும் உள்ளூர்மயமாக்கல்

ஒரு உலகளாவிய பார்வையாளர்களுக்காக ஒரு CSS கட்டமைப்பைத் தேர்ந்தெடுக்கும்போது, பின்வருவனவற்றைக் கவனியுங்கள்:

• வலமிருந்து இடம் (RTL) மொழிகள்: BEM மற்றும் Atomic CSS ஆகிய இரண்டையும் RTL மொழிகளுக்கு மாற்றியமைக்க முடியும். BEM-உடன், நீங்கள் RTL மாறுபாடுகளுக்கு மாடிஃபையர் வகுப்புகளை உருவாக்கலாம் (எ.கா., .button--rtl). Tailwind CSS போன்ற Atomic CSS கட்டமைப்புகள் பெரும்பாலும் உள்ளமைக்கப்பட்ட RTL ஆதரவை வழங்குகின்றன.
• வடிவமைப்பில் கலாச்சார வேறுபாடுகள்: வண்ணத் தட்டுகள், அச்சுக்கலை மற்றும் படங்கள் போன்ற வடிவமைப்பு விருப்பங்களில் உள்ள கலாச்சார வேறுபாடுகளைக் கவனத்தில் கொள்ளுங்கள். வெவ்வேறு பிராந்தியங்களுக்கு ஸ்டைல்களை எளிதில் மாற்றியமைக்க CSS மாறிகளைப் (தனிப்பயன் பண்புகள்) பயன்படுத்தவும். எடுத்துக்காட்டாக, ஒரு நிறம் ஒரு கலாச்சாரத்தில் நேர்மறையாகவும் மற்றொரு கலாச்சாரத்தில் எதிர்மறையாகவும் உணரப்படலாம்.
• அணுகல்தன்மை: நீங்கள் தேர்ந்தெடுத்த CSS கட்டமைப்பு அணுகல்தன்மை சிறந்த நடைமுறைகளை ஆதரிக்கிறது என்பதை உறுதிப்படுத்தவும். சொற்பொருள் HTML-ஐப் பயன்படுத்தவும், படங்களுக்கு மாற்று உரையை வழங்கவும், போதுமான வண்ண மாறுபாட்டை உறுதிப்படுத்தவும். Atomic CSS கட்டமைப்புகள் பெரும்பாலும் அணுகல்தன்மையை மையமாகக் கொண்ட பயன்பாட்டு வகுப்புகளை உள்ளடக்கியுள்ளன.
• செயல்திறன்: உலகெங்கிலும் உள்ள பயனர்களுக்கு வேகமான மற்றும் பதிலளிக்கக்கூடிய பயனர் அனுபவத்தை உறுதிப்படுத்த உங்கள் CSS-ஐ செயல்திறனுக்காக மேம்படுத்தவும். உங்கள் CSS கோப்புகளைச் சுருக்கவும், CSS ஸ்ப்ரைட்டுகளைப் பயன்படுத்தவும், மற்றும் உலாவி தற்காலிக சேமிப்பைப் பயன்படுத்தவும்.
• மொழிபெயர்ப்பு: CSS-க்கு மொழிபெயர்ப்பு தேவையில்லை என்றாலும், உங்கள் CSS-இல் உள்ள உரை அடிப்படையிலான கூறுகளைக் கவனத்தில் கொள்ளுங்கள், அதாவது உள்ளடக்கப் பண்புகள் (எ.கா., content: "Read More";). உங்கள் வலைத்தளம் வெவ்வேறு மொழிகளுக்கும் பிராந்தியங்களுக்கும் சரியாக மொழிபெயர்க்கப்படுவதை உறுதிசெய்ய, பன்னாட்டுமயமாக்கல் (i18n) மற்றும் உள்ளூர்மயமாக்கல் (l10n) ஆகியவற்றிற்கு பொருத்தமான நுட்பங்களைப் பயன்படுத்தவும்.

BEM மற்றும் Atomic CSS-ஐ இணைத்தல்

BEM மற்றும் Atomic CSS-ஐ இணைப்பதும் சாத்தியமாகும். எடுத்துக்காட்டாக, உங்கள் கூறுகளின் ஒட்டுமொத்த கட்டமைப்புக்கு BEM-ஐயும், நுணுக்கமான ஸ்டைலிங்கிற்கு Atomic CSS-ஐயும் பயன்படுத்தலாம். இந்த அணுகுமுறை BEM-இன் மட்டுத்தன்மைக்கும் Atomic CSS-இன் விரைவான முன்மாதிரி திறன்களுக்கும் இடையில் ஒரு சமநிலையை வழங்க முடியும்.

முடிவுரை

BEM மற்றும் Atomic CSS ஆகிய இரண்டும் மதிப்புமிக்க CSS கட்டமைப்புகள் ஆகும், அவை வெவ்வேறு நன்மைகள் மற்றும் தீமைகளை வழங்குகின்றன. உங்கள் திட்டத்திற்கான சிறந்த தேர்வு உங்கள் குறிப்பிட்ட தேவைகள், குழு விருப்பத்தேர்வுகள் மற்றும் உங்கள் மேம்பாட்டு சூழலின் ஒட்டுமொத்த சூழலைப் பொறுத்தது. ஒவ்வொரு அணுகுமுறையின் பலம் மற்றும் பலவீனங்களைப் புரிந்துகொள்வது, உலகளாவிய பார்வையாளர்களுக்காக மிகவும் பராமரிக்கக்கூடிய, அளவிடக்கூடிய மற்றும் வெற்றிகரமான வலைப் பயன்பாட்டிற்கு வழிவகுக்கும் ஒரு தகவலறிந்த முடிவை எடுக்க உங்களுக்கு உதவும். ஒரு பெரிய முயற்சிக்கு ஒன்றில் ஈடுபடுவதற்கு முன்பு, நடைமுறைப் புரிதலைப் பெற சிறிய திட்டங்களில் இரண்டு வழிமுறைகளையும் பரிசோதிக்கவும். உங்கள் வடிவமைப்பு மற்றும் செயல்படுத்தல் கட்டங்களில் RTL ஆதரவு மற்றும் கலாச்சார உணர்திறன் போன்ற உலகளாவிய தாக்கங்களைக் கருத்தில் கொள்ள நினைவில் கொள்ளுங்கள்.