എന്താണ് CSS സെലക്ടറുകളിലെ കോമ?

ലളിതമായ കോമ കോഡിംഗ് ലളിതമാക്കുന്നു

CSS, അല്ലെങ്കിൽ കാസ്കേഡിംഗ് ശൈലി ഷീറ്റുകൾ, വെബ് ഡിസൈൻ വ്യവസായത്തിന്റെ ഒരു സൈറ്റിലേക്ക് ദൃശ്യ ശൈലികൾ ചേർക്കുവാൻ സ്വീകരിച്ച മാർഗമാണ്. CSS ഉപയോഗിച്ച് നിങ്ങൾക്ക് പേജ് ലേഔട്ട്, നിറങ്ങൾ, ടൈപ്പിഗ്രാഫി , പശ്ചാത്തല ഇമേജ് എന്നിവയും അതിലേറെയും നിയന്ത്രിക്കാനാകും. അടിസ്ഥാനപരമായി, അത് ഒരു വിഷ്വൽ ശൈലിയാണെങ്കിൽ, ആ വെബ്സൈറ്റിൽ ആ ശൈലികൾ കൊണ്ടുവരുന്നതിനുള്ള മാർഗമാണ് CSS.

നിങ്ങൾ ഒരു പ്രമാണത്തിലേക്ക് CSS ശൈലികൾ ചേർക്കുമ്പോൾ, പ്രമാണം കൂടുതൽ സമയവും നീളവും ലഭിക്കാൻ തുടങ്ങും. വളരെ ചെറിയ ഒരു പേജും മാത്രമേ ഒരു ചെറിയ സൈറ്റിനൊപ്പം ഒരു സിഎസ്എസ്എഫ് ഫയൽ ഉപയോഗിച്ച് അവസാനിക്കാറുള്ളൂ - ധാരാളം വലിയ സൈറ്റുകളും അദ്വിതീയ ഉള്ളടക്കമുള്ള നിരവധി പേജുകളും വളരെ വലിയ സിഎസ്എസ് ഫയലുകൾ ഉണ്ടാക്കാം. ദൃശ്യങ്ങൾ എങ്ങനെ ദൃശ്യമാകണമെന്നതും, വ്യത്യസ്ത സ്ക്രീനുകൾക്കായി പേജുകൾ പ്രതിഷ്ഠിക്കുന്നതും മാറ്റുന്നതിന് സ്റ്റൈൽഷീറ്റുകളിൽ ഉൾപ്പെടുത്തിയിട്ടുള്ള ധാരാളം മീഡിയ ചോദ്യങ്ങൾ ഉൾപ്പെടുന്ന പ്രതികരിക്കുന്ന സൈറ്റുകളുടെ കൂട്ടിച്ചേർക്കലാണ്.

അതെ, സി.എസ്.എസ്. ഫയലുകൾക്ക് ദീർഘനേരം ലഭിക്കും. സൈറ്റിന്റെ പ്രകടനവും ഡൌൺലോഡ് സ്പീമിന്റേതുമായിരിക്കുമ്പോൾ ഇതൊരു വലിയ പ്രശ്നമല്ല, കാരണം വളരെ ദൈർഘ്യമേറിയ ഒരു സി.എസ്.എസ്. ഫയൽ പോലും വളരെ ചെറിയതായിരിക്കും (അത് ഒരു ടെക്സ്റ്റ് ഡോക്യുമെന്റാണ്). എന്നിരുന്നാലും, പേജ് സ്പീഡിൽ വരുമ്പോൾ ഓരോ ചെറിയ കാര്യവും കണക്കാക്കുന്നു, അതിനാൽ നിങ്ങൾക്ക് നിങ്ങളുടെ ശൈലി ഷീറ്റ് ലീൻ നിർമ്മിക്കാൻ കഴിയും, അത് വളരെ നല്ല ആശയമാണ്. ഇവിടെയാണ് "കോമ" നിങ്ങളുടെ ശൈലി ഷീറ്റിൽ വളരെ എളുപ്പം ലഭ്യമാവുന്നത്!

കോമകളും CSS- ഉം

സിഎസ്സെ സെലക്റ്റർ സിന്റാക്സിൽ കോമാ കൈകാര്യം ചെയ്യുന്നതിൽ നിങ്ങൾ എത്രമാത്രം പങ്ക് വഹിച്ചിട്ടുണ്ടാകും. വാക്യങ്ങൾ പോലെ, കോമ എന്നത് വ്യക്തതയോടെയുള്ളതാണ്- വേർതിരിച്ചറിയുന്നതിനുള്ള കോഡ് അല്ല. ഒരു CSS സെലക്റ്ററിലെ കോമ ഒരേ സ്റ്റൈൽ ഉള്ളിൽ ഒന്നിലധികം സെലക്ടറുകളെ വേർതിരിക്കുന്നു.

ഉദാഹരണത്തിന്, താഴെ ചില CSS നോക്കാം.

th {color: red; }
td {color: red; }
p.red {color: red; }
div # മുൻപ് {വർണ്ണം: ചുവപ്പ്; }

ഈ സിന്റാക്സ് ഉപയോഗിച്ച്, നിങ്ങൾക്ക് ടാഗുകൾ, td ടാഗുകൾ, ക്ലാസ് റെഡ് ഉള്ള പാരാഗ് ടാഗുകൾ, ഐഡി ഉള്ള ഡൈഗ് ടാഗുകൾ എല്ലാം സ്റ്റൈൽ വർണ്ണത്തിലുള്ള ചുവപ്പ് ഉണ്ടെന്ന് നിങ്ങൾ പറയും.

ഇതു് തികച്ചും സ്വീകാര്യമായ സിഎസ്എസ് ആകുന്നു, പക്ഷേ ഇതു് രണ്ടു് ദോഷകരമായ പിഴവുകളുണ്ടു്:

• ഭാവിയിൽ, ഈ വസ്തുക്കളുടെ ഫോണ്ട് വർണ്ണം നീല മാറ്റാൻ നിങ്ങൾ തീരുമാനിക്കുകയാണെങ്കിൽ, നിങ്ങളുടെ ശൈലിയിൽ നിങ്ങൾ നാല് തവണ മാറ്റം വരുത്തണം.
• നിങ്ങൾക്ക് ആവശ്യമില്ലാത്ത നിങ്ങളുടെ ശൈലി ഷീറ്റിന് ഒരുപാട് അക്ഷരങ്ങൾ ചേർക്കുന്നു. ഈ 4 ശൈലികൾ ഓവർകിലായി തോന്നിയേക്കില്ല, എന്നാൽ നിങ്ങളുടെ മുഴുവൻ സ്റ്റൈൽ ഷീറ്റിലുടനീളം ഇത് തുടരുകയാണെങ്കിൽ, വരികൾ ചേർക്കുകയും ഷീറ്റ് വളരെ വലുതായിരിക്കുകയും ചെയ്യും.

ഈ പോരായ്മകൾ ഒഴിവാക്കാനും നിങ്ങളുടെ CSS ഫയൽ സ്ട്രീം ചെയ്യാനും, ഞങ്ങൾ കോമകൾ ഉപയോഗിച്ച് ശ്രമിക്കും.

കോമാ ഉപയോഗിച്ച് പ്രത്യേക സെലക്ടറുകളിലേക്ക്

4 വ്യത്യസ്ത സി.എസ് സെലക്ടറുകളും 4 നിയമങ്ങളും എഴുതുന്നതിനു പകരം, ഓരോ സെലക്ടറുകളും കോമാ ഉപയോഗിച്ചു് ഓരോ സെലക്ടറേയും ഒറ്റയൊളം കൂട്ടിച്ചേർക്കാം. അത് എങ്ങനെ ചെയ്യാമെന്നത് ഇതാ:

th, td, p.red, div # മുൻപ് {വർണ്ണം: ചുവപ്പ്; }

കോമാ അക്ഷരം അടിസ്ഥാനപരമായി സെലക്റ്ററിലെ "" "എന്ന വാക്കായി പ്രവർത്തിക്കുന്നു. അതുകൊണ്ട് ഇത് ടി ടാഗുകൾക്കും td റ്റാഗുകൾക്കും പേപ്പർ ടാഗുകൾക്കും ക്ലാസ് റെഡ്, ഡി ഐഡി മുമ്പുള്ള ഡിഗ് ടാഗുകൾ എന്നിവയ്ക്ക് ബാധകമാണ്. അത് നമുക്ക് നേരത്തെ തന്നെ ഉണ്ടായിരുന്നു, പകരം 4 CSS നിയമങ്ങൾ ആവശ്യമുള്ളതിനുപകരം നമുക്ക് ഒന്നിലധികം സെലക്ടറുകളുള്ള ഒരു റൂൾ ഉണ്ട്. സെലക്റ്ററിൽ കോമ എന്തു ചെയ്യുന്നു, ഇത് ഒരു നിയമത്തിൽ ഒന്നിലധികം സെലക്ടറുകളെ ലഭ്യമാക്കാൻ അനുവദിക്കുന്നു.

ഈ സമീപനം ലീനർ, ക്ലീനർ സി.എസ്.എസ്. ഫയലുകൾ, മാത്രമല്ല ഭാവി അപ്ഡേറ്റുകൾ വളരെ എളുപ്പമാക്കുന്നു. ചുവപ്പ് മുതൽ നീല വരെ നിറം മാറ്റാൻ നിങ്ങൾ ആഗ്രഹിക്കുന്നുണ്ടെങ്കിൽ, ഞങ്ങൾ ഉണ്ടാക്കിയ യഥാർത്ഥ 4 സ്റ്റൈൽ റൂളുകൾക്ക് പകരം ഒരു ലൊക്കേഷനിൽ മാറ്റം വരുത്തണം. ഒരു മുഴുവൻ സി.എസ്.എസ്. ഫയലിൽ ഉടനീളം ഈ സമയം ലാഭിക്കാനാകുമെന്നതിനാൽ, ഇത് ദീർഘകാലത്തേക്ക് നിങ്ങൾ എങ്ങനെ സമയം, ഇടം എന്നിവയെ രക്ഷിക്കും എന്ന് കാണാനാകും.

സിന്റാക്സ് വേരിയേഷൻ

ചില ആളുകൾ അതിനെ ഓരോ വരിയിലും വേർതിരിച്ച് ഒരു വരിയിൽ എഴുതിയതിനു പകരം ഓരോ സെലക്ടറിനെയും വേർതിരിച്ച് വേർതിരിച്ചെടുക്കാൻ തിരഞ്ഞെടുക്കുന്നു. ഇങ്ങനെയാണ് ഇത് ചെയ്യേണ്ടത്.

അതെ,
td,
p.red,
div # മുൻപ്
{
നിറം: ചുവപ്പ്;
}

ഓരോ സെലക്ടറിനും ശേഷം നിങ്ങൾ ഒരു കോമ സ്ഥാപിച്ച് ശ്രദ്ധിക്കുക, അടുത്ത സെലക്ടർ സ്വന്തം വരിയിൽ കടക്കാൻ "എൻറർ" ഉപയോഗിക്കുക. ഫൈനൽ സെലക്ടറിനു ശേഷം നിങ്ങൾ ഒരു കോമ ചേർക്കാൻ പാടില്ല.

നിങ്ങളുടെ സെലക്ടറുകൾക്കിടയിൽ കോമുകൾ ഉപയോഗിക്കുന്നതിലൂടെ ഭാവിയിൽ കൂടുതൽ എളുപ്പത്തിൽ അപ്ഡേറ്റ് ചെയ്യാനാകുന്ന കൂടുതൽ കോംപാക്റ്റ് ശൈലി ഷീറ്റ് നിങ്ങൾ സൃഷ്ടിക്കുന്നു, അത് ഇന്ന് വായിക്കാൻ എളുപ്പമാണ്!

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