സിംഗിൾ എലമെന്റുകളിൽ ഒന്നിലധികം സിഎസ്എസ് ക്ലാസുകൾ എങ്ങനെയാണ് ഉപയോഗിക്കുക

• Pullquote
• ഫീച്ചർ ചെയ്തത്
• ഇടത്തെ

ഈ ക്ലാസ് മൂല്യങ്ങളിൽ ഓരോന്നിനും ഇടയിൽ സ്പേസുകൾ ശ്രദ്ധിക്കുക. ഈ ഇടങ്ങൾ വ്യത്യസ്തമായ, ഓരോ ക്ലാസുകളായി അവയെ സജ്ജമാക്കുന്നു. അതുകൊണ്ടാണ് ക്ലാസ് പേരുകൾ അവയിൽ ഇടങ്ങൾ ഉണ്ടാകാൻ പാടില്ല, കാരണം അങ്ങനെ അവയെ പ്രത്യേക വിഭാഗങ്ങളായി സജ്ജമാക്കും.

ഉദാഹരണത്തിന്, നിങ്ങൾ സ്പെയ്സ് ഇല്ലാതെ "pullquote-featured-left" ഉപയോഗിച്ചാൽ, അത് ഒരു വർഗമൂല്യമായിരിക്കും, എന്നാൽ മുകളിൽ പറഞ്ഞ ഉദാഹരണം, ഈ മൂന്ന് പദങ്ങൾ ഒരു സ്പേസ് ഉപയോഗിച്ച് വേർതിരിച്ചിരിക്കുന്ന, അവ അവ ഓരോ വ്യക്തിഗത മൂല്യങ്ങളായി സജ്ജമാക്കുന്നു. നിങ്ങളുടെ വെബ്പേജുകളിൽ ഏതൊക്കെ ക്ലാസ് മൂല്യങ്ങൾ ഉപയോഗിക്കണമെന്ന് തീരുമാനിക്കുമ്പോൾ ഈ ആശയം മനസ്സിലാക്കേണ്ടത് പ്രധാനമാണ്.

നിങ്ങളുടെ ക്ലാസ് മൂല്യങ്ങൾ എച്ച്ടിഎംഎലിൽ ഉണ്ടെങ്കിൽ, നിങ്ങൾക്ക് നിങ്ങളുടെ CSS ൽ ക്ലാസുകളായി ഇവ നൽകി അതിൽ നിങ്ങൾ ചേർക്കാൻ ആഗ്രഹിക്കുന്ന ശൈലികൾ പ്രയോഗിക്കാവുന്നതാണ്. ഉദാഹരണത്തിന്.

. pullquote {...}
.featured ... ...
p.left {...}

ഈ ഉദാഹരണങ്ങളിൽ, സിഎസ്എസ് ഡിക്ലറേഷനുകളും മൂല്ല്യങ്ങളും ജോലിയുടെ ചുരുളുകളിൽ ആയിരിക്കും, ആ ശൈലികൾ ഉചിതമായ സെലക്ടറിൽ പ്രയോഗിക്കുന്നതെങ്ങനെ.

കുറിപ്പ് - നിങ്ങൾ ഒരു പ്രത്യേക ഗ്രൂപ്പ് (ഉദാഹരണത്തിന്, p.left) ആയി ക്രമീകരിച്ചിട്ടുണ്ടെങ്കിൽ, നിങ്ങൾക്കിത് ക്ലാസുകളുടെ ഒരു പട്ടികയായി ഉപയോഗിക്കാം; എന്നിരുന്നാലും, അത് CSS- ൽ വ്യക്തമാക്കിയ ആ ഘടകങ്ങളെ മാത്രമേ ബാധിക്കുമെന്ന് ബോധ്യമുള്ളൂ. മറ്റൊരു രീതിയിൽ പറഞ്ഞാൽ, p.left സ്റ്റൈൽ ഈ ക്ലാസുകളിലേക്ക് ഖണ്ഡികകൾക്ക് മാത്രമേ ബാധകമാകുകയുള്ളൂ, കാരണം നിങ്ങളുടെ സെലക്ടർ അതിനെ "ഇടതുവശത്തുള്ള ഒരു ക്ലാസ് മൂല്യം" ഉപയോഗിച്ച് ഖണ്ഡികയിലേക്ക് പ്രയോഗിക്കുന്നതായിരിക്കും. ഇതിനു വിപരീതമായി, മറ്റ് രണ്ട് സെലക്ടർമാർ ഒരു നിശ്ചിത ഘടകം വ്യക്തമാക്കേണ്ടതില്ല, അതിലൂടെ ആ ക്ലാസ് മൂല്യങ്ങൾ ഉപയോഗിക്കുന്ന ഏതെങ്കിലും ഘടകത്തിലേക്ക് അവർ പ്രയോഗിക്കും.

ഒന്നിലധികം ക്ലാസുകളുടെ പ്രയോജനങ്ങൾ

ഒന്നിലധികം ക്ലാസുകൾ ആ ഘടകത്തിന് പുതിയ ശൈലി സൃഷ്ടിക്കാതെ തന്നെ ഘടകങ്ങളിൽ പ്രത്യേക ഇഫക്റ്റുകൾ ചേർക്കാൻ എളുപ്പമുള്ളതാക്കുന്നു.

ഉദാഹരണത്തിന്, നിങ്ങൾക്ക് ഇടത് ഭാഗത്തേക്കോ വലത്തേക്കോ ഉള്ള വസ്തുക്കൾ ഫ്ലോട്ട് ചെയ്യാൻ നിങ്ങൾ ആഗ്രഹിച്ചേക്കാം. നിങ്ങൾ വെറും float കൊണ്ട് രണ്ട് ക്ലാസുകൾ ഇടതും വലതും എഴുതാം; ഫ്ലോട്ട്: വലത്; അവയിൽ. പിന്നെ, നിങ്ങൾക്ക് ഒരു ഘടകമുണ്ടെങ്കിൽ ഇടതുവശത്ത് ഫ്ലോട്ട് ചെയ്യണം, ക്ലാസ്സ് "ഇടത്" ക്ലാസ് ലിസ്റ്റിലേക്ക് ചേർത്താൽ മതിയാകും.

ഇവിടെ നടക്കാൻ നല്ലൊരു ലൈനുണ്ട്. വെബ് സ്റ്റാൻഡേർഡുകൾ സ്റ്റൈലും ഘടനയും വേർതിരിച്ചറിയാൻ ഓർക്കുക. CSS- ൽ ഘടന വരുമ്പോൾ ഘടന HTML- ലാണ് കൈകാര്യം ചെയ്യുന്നത്.

നിങ്ങളുടെ HTML രേഖ നിറഞ്ഞുനിൽക്കുന്ന മൂലകങ്ങളായ "ചുവപ്പ്" അല്ലെങ്കിൽ "ഇടത്" പോലെയാണെങ്കിൽ, അവ എന്റർമാർക്കെന്തെന്നതിനെക്കാൾ അവ എങ്ങനെ ആയിരിക്കണം എന്ന് നിർദേശിക്കുന്ന പേരുകളാണ്, ഘടനയും ശൈലിയും തമ്മിൽ നിങ്ങൾ ആ ലൈൻ പകർത്തുകയാണ്. ഈ കാരണത്താൽ എന്റെ സിനന്റിക്ക് ക്ലാസ് പേരുകൾ പരമാവധി പരിമിതപ്പെടുത്താൻ ഞാൻ ശ്രമിക്കുന്നു.

ഒന്നിലധികം ക്ലാസുകൾ, സെമന്റിക്കുകൾ, ജാവാസ്ക്രിപ്റ്റുകൾ

ഒന്നിലധികം ക്ലാസുകൾ ഉപയോഗിക്കുന്നതിന്റെ മറ്റൊരു ഗുണം അത് നിങ്ങൾക്ക് കൂടുതൽ ഇന്ററാക്ടീവ് സാധ്യതകൾ നൽകുന്നു എന്നതാണ്.

പ്രാരംഭ ക്ലാസുകളിൽ ഏതെങ്കിലും ഒരെണ്ണം ഒഴിവാക്കാതെ നിങ്ങൾക്ക് JavaScript ഉപയോഗിച്ച് നിലവിലുള്ള ക്ലാസുകളിൽ പുതിയ ക്ലാസുകൾ പ്രയോഗിക്കാവുന്നതാണ്. ഒരു മൂലകത്തിന്റെ സെമാന്റിക്സിനെ നിർവചിക്കുന്നതിന് നിങ്ങൾക്ക് ക്ലാസുകൾ ഉപയോഗിക്കാം. ആ അർത്ഥം എന്താണ് സെമാന്റിക് എന്ന് നിർവചിക്കുന്നതിന് നിങ്ങൾക്ക് കൂടുതൽ ക്ലാസുകളിൽ ചേർക്കാൻ കഴിയുമെന്നാണ്. ഇങ്ങനെയാണ് മൈക്രോഫോട്ടോകൾ പ്രവർത്തിക്കുന്നത്.

ഒന്നിലധികം ക്ലാസുകളിലെ പോരായ്മകൾ

നിങ്ങളുടെ ഘടകങ്ങളിൽ ഒന്നിലധികം ക്ലാസുകൾ ഉപയോഗിക്കുന്നതിനുള്ള ഏറ്റവും വലിയ തടസ്സം, കാലാകാലങ്ങളിൽ നോക്കാനോ കൈകാര്യം ചെയ്യാനോ അവരെ അൽപം തടസ്സപ്പെടുത്താൻ കഴിയില്ല എന്നതാണ്. ഒരു ഘടകം ബാധിക്കുന്ന ഏത് സ്ക്രിപ്റ്റുകളും ഏത് സ്ക്രിപ്റ്റുകൾക്കും ബാധകമാണോയെന്ന് തീരുമാനിക്കുന്നത് ബുദ്ധിമുട്ടായേക്കാം. ഇന്ന് ലഭ്യമായ മിക്ക ഫ്രെയിംഫോമുകളും, ബൂട്ട്സ്ട്രാപ്പ് പോലെ, ഒന്നിലധികം ക്ലാസുകളുള്ള മൂലകങ്ങളുടെ ഉപയോഗവും. നിങ്ങൾ ശ്രദ്ധിച്ചില്ലെങ്കിൽ ആ കോഡ് വളരെ വേഗത്തിൽ പ്രവർത്തിക്കാൻ കഴിയും.

നിങ്ങൾ ഒന്നിലധികം ക്ലാസുകൾ ഉപയോഗിക്കുമ്പോൾ, ഈ രീതിയിൽ ഉദ്ദേശിച്ചിട്ടില്ലെങ്കിൽ, ഒരു ക്ലാസ്സിൻറെ ശൈലിക്ക് മറ്റൊരു രീതിയെ അസാധുവാക്കുന്നതിനുള്ള സാധ്യതയും നിങ്ങൾ നടത്തുന്നു. അതിനുശേഷം നിങ്ങളുടെ ശൈലികൾ പ്രയോഗിക്കേണ്ടതെങ്ങനെയെന്ന് കാണുമ്പോൾ പോലും അത് പ്രയോഗിക്കാൻ ബുദ്ധിമുട്ടുണ്ടാക്കും.

ആ ഘടകം പ്രയോഗിച്ച ആട്രിബ്യൂട്ടുകളിൽപ്പോലും, നിങ്ങൾ പ്രത്യേകതയെക്കുറിച്ച് ബോധവാനായിരിക്കണം.

Chrome ലെ വെബ്മാസ്റ്റർ ടൂളുകൾ പോലെയുള്ള ഒരു ഉപകരണം ഉപയോഗിക്കുന്നതിലൂടെ, നിങ്ങളുടെ ക്ലാസുകൾ നിങ്ങളുടെ ശൈലികളെ എങ്ങനെ ബാധിക്കുന്നുവെന്നതും കൂടുതൽ വൈരുദ്ധ്യ ശൈലികളും ആട്രിബ്യൂട്ടുകളുടെ പ്രശ്നങ്ങളും ഒഴിവാക്കുന്നതും നിങ്ങൾക്ക് കൂടുതൽ എളുപ്പത്തിൽ കാണാനാകും.

ജെന്നിഫർ ക്രിയിൻ എഴുതിയ ലേഖനം എഡിറ്റു ചെയ്തത് ജെറമി ഗിർാർഡ് 8/7/17 ന്