ഒന്നിലധികം CSS സെലക്ടറുകൾ ഗ്രൂപ്പുചെയ്യുന്നു

ലോഡ് സ്പീഡ് മെച്ചപ്പെടുത്തുന്നതിന് ഗ്രൂപ്പ് ഒന്നിലധികം CSS സെലക്ടർമാർ

വിജയകരമായ ഒരു വെബ് സൈറ്റിൽ കാര്യക്ഷമതയാണ് പ്രധാന ഘടകം. ഓൺലൈനിൽ ഇമേജുകൾ ഉപയോഗിക്കുന്നത് എങ്ങനെയെന്നത് ആ സൈറ്റിന് കാര്യക്ഷമമായിരിക്കണം. സന്ദർശകർക്ക് സൈറ്റ് മികച്ചതും അവരുടെ ഉപകരണങ്ങളിൽ വേഗത്തിൽ ലോഡ് ചെയ്യുന്നതും ഉറപ്പാക്കാൻ ഇത് സഹായിക്കും. നിങ്ങളുടെ മൊത്തത്തിലുള്ള പ്രോസസ്സിന്റെ ഭാഗമാകാനും കാര്യക്ഷമമായി ഒരു സൈറ്റിന്റെ പുരോഗതിയും ബജറ്റിലും നിലനിർത്താനും നിങ്ങളെ സഹായിക്കും.

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

ഗ്രൂപ്പിംഗ് സെലക്ടർമാർ

നിങ്ങൾ CSS സെലക്ടറുകൾ ഗ്രൂപ്പുചെയ്യുമ്പോൾ, നിങ്ങളുടെ ശൈലി ഷീറ്റിലെ ശൈലികൾ ആവർത്തിക്കാതെ വ്യത്യസ്ത ഘടകങ്ങളിലേക്ക് അതേ ശൈലികൾ പ്രയോഗിക്കുന്നു. രണ്ടോ മൂന്നോ അതിലധികമോ സി.എസ്.എസ് നിയമങ്ങൾ ഉള്ളതുകൊണ്ട് അവയെല്ലാം ഒരേ കാര്യം തന്നെ ചെയ്യും (ഉദാഹരണം, ചുവപ്പ് നിറമുള്ളവയുടെ നിറം സജ്ജമാക്കുക), നിങ്ങളുടെ പേജിനായി നിർവഹിക്കുന്ന ഒരു സിഎസ്എസ് റൂൾ ഉണ്ട്.

ഈ "സെലക്ടർമാർ കൂട്ടിച്ചേർക്കുന്നത്" ഒരു പേജിനുള്ള പ്രയോജനം എന്തുകൊണ്ടാണ് പല കാരണങ്ങളുണ്ടാകുന്നത്. ആദ്യത്തേത്, നിങ്ങളുടെ ശൈലി ഷീറ്റ് ചെറുതും കൂടുതൽ വേഗത്തിൽ ലോഡ് ചെയ്യും. സ്റ്റഡി ഷീറ്റുകൾ പ്രധാന ലോജിംഗ് സൈറ്റുകൾക്ക് വരുമ്പോൾ പ്രധാന കുറ്റവാളികളിൽ ഒന്നുമല്ല. സി.എസ്.എസ് ഫയലുകൾ ടെക്സ്റ്റ് ഫയലുകളാണ്, അതിനാൽ അപ്രതീക്ഷിതമല്ലാത്ത ഇമേജുകളെ അപേക്ഷിച്ച് വളരെ ദൈർഘ്യമേറിയ CSS ഷീറ്റുകൾ പോലും ഫയലുകളുടെ വലിപ്പമുള്ളവയാണ്. എന്നിരുന്നാലും, ഓരോ ചെറിയ കാര്യവും, നിങ്ങളുടെ ചില സി.എസ്.വൈസറുകൾ ഷേവ് ചെയ്യുകയും വളരെ വേഗത്തിൽ പ്രവർത്തിക്കുന്ന പേജുകൾ ലോഡ് ചെയ്യുകയും ചെയ്താൽ എല്ലായ്പ്പോഴും ഒരു നല്ല കാര്യമാണ്.

പൊതുവേ, സൈറ്റുകളുടെ ശരാശരി ലോഡ് വേഗത 3 സെക്കൻഡിൽ കുറവാണ്. 3 മുതൽ 7 സെക്കന്റുകൾ വരെ ശരാശരിയും 7 സെക്കൻഡിനും മുകളിലായിരിക്കും. ഈ കുറഞ്ഞ അക്കങ്ങൾ നിങ്ങളുടെ സൈറ്റ് ഉപയോഗിച്ച് അവ നേടിയെടുക്കുക, നിങ്ങൾക്കാവശ്യമായതെല്ലാം ചെയ്യണം! ഗ്രൂപ്പുകളുള്ള CSS സെലക്ടറുകളുപയോഗിച്ച് നിങ്ങളുടെ സൈറ്റിനെ വേഗത്തിലാക്കാൻ സഹായിക്കുന്നതിനാണിത്.

എങ്ങനെയാണ് CSS സെലക്ടറുകളെ ഗ്രൂപ്പ് ചെയ്യുക

നിങ്ങളുടെ ശൈലി ഷീറ്റിൽ ഒരുമിച്ച് CSS സെലക്ടറുകളെ കൂട്ടിച്ചേർക്കുന്നതിന്, നിങ്ങൾ രീതിയിൽ ഒന്നിലധികം കൂട്ടിച്ചേർത്ത സെലക്ടറുകൾ വേർതിരിക്കാൻ കോമകൾ ഉപയോഗിക്കുന്നു . ചുവടെയുള്ള ഉദാഹരണത്തിൽ, ശൈലി പി, ഡി ഘടകങ്ങളെ ബാധിക്കുന്നു:

div, p {color: # f00; }

കോമ അടിസ്ഥാനപരമായി "," എന്നിവ അർത്ഥമാക്കുന്നു. അതിനാൽ ഈ സെലക്ടർ എല്ലാ ഖണ്ഡിക ഘടകങ്ങൾക്കും എല്ലാ ഡിവിഷൻ ഘടകങ്ങൾക്കും ബാധകമാണ്. കോമയി നഷ്ടപ്പെട്ടാൽ, അത് ഒരു ഡിവിഷൻ കുട്ടിയുടെ എല്ലാ ഖണ്ഡികയും ആയിരിക്കും. ഇത് വളരെ വ്യത്യസ്തമായ സെലക്ടറാണ്, അതിനാൽ ഈ കോമ സെലക്ടർ എന്നതിന്റെ അർത്ഥത്തെ യഥാർത്ഥത്തിൽ മാറ്റുന്നു!

ഏത് സെലക്ടറിലും ഏത് സെലക്ടറിലും ഗ്രൂപ്പുചെയ്യാവുന്നതാണ്. ഈ ഉദാഹരണത്തിൽ, ഒരു ക്ലാസ് സെലക്ടർ ഒരു ഐഡി സെലക്ടറിൽ ഗ്രൂപ്പുചെയ്യപ്പെടുന്നു:

p.red, #sub {color: # f00; }

അതിനാൽ ഈ രീതി "ചുവപ്പ്" എന്ന ക്ലാസ് ആട്രിബ്യൂട്ടിലെ ഏത് ഖണ്ഡികയ്ക്കും, "ഉപ" എന്നതിന്റെ ഒരു ഐഡി ആട്രിബ്യൂട്ട് ഉള്ള ഏത് ഘടകവും (ഏത് തരം വ്യക്തമാക്കാൻ ഞങ്ങൾ തയ്യാറായിരുന്നില്ല എന്നതുമായി) പ്രയോഗിക്കുന്നു.

ഒരൊറ്റ വാക്കും കോണ്ടന്റ് സെലക്ടറായ സെലക്ടറുകളും ഉൾപ്പെടുന്ന ഏത് സെലക്ടറേയും ഒന്നിച്ച് നിങ്ങൾക്ക് ഗ്രൂപ്പ് ചെയ്യാൻ കഴിയും. ഈ ഉദാഹരണത്തിൽ നാല് വ്യത്യസ്ത സെലക്ടറുകൾ ഉൾപ്പെടുന്നു:

p, .red, #sub, div: a {link: # f00; }

അതിനാൽ ഈ സിഎസ്എസ് ഭരണം താഴെപ്പറയുന്നവയ്ക്ക് ബാധകമാകും:

• ഏതെങ്കിലും ഖണ്ഡിക ഘടകം
• "ചുവപ്പ്" ക്ലാസിലുള്ള എല്ലാ ഘടകങ്ങളും
• "ഉപ" എന്ന ഐഡിയുള്ള ഒരു എലമെന്റ്
• ഒരു വിഭജനത്തിന്റെ വക്താക്കളായിട്ടുള്ള ആങ്കർ ഘടകങ്ങളുടെ "ലിങ്ക്" വ്യാജസൂചിക.

അവസാന സെലക്ടർ ഒരു സംയുക്ത സെലക്ടർ ആണ്. ഈ CSS റൂളിലെ മറ്റ് സെലക്ടറുകളുമായി ഇത് എളുപ്പത്തിൽ സംയോജിപ്പിക്കാൻ നിങ്ങൾക്ക് കഴിയും. ഈ നിയമപ്രകാരം, ഞങ്ങൾ ഈ 4 സെലക്ടറുകളിൽ # f00 (ചുവപ്പ്) എന്ന നിറം തിരഞ്ഞെടുക്കുന്നു, അത് അതേ ഫലം കൈവരിക്കാൻ 4 പ്രത്യേക സെലക്ടറുകളെ എഴുതുന്നതിന് അനുയോജ്യമാണ്.

സെലക്ടർമാർ ഗ്രൂപ്പിന്റെ മറ്റൊരു ഗുണം നിങ്ങൾ ഒരു മാറ്റം വരുത്തണമെങ്കിൽ നിങ്ങൾ ഒന്നിലധികം നിർദ്ദേശങ്ങൾക്ക് പകരം ഒരു ഏകീകൃത സി.എസ്.എസ് ഭരണം എഡിറ്റുചെയ്യാം. ഭാവിയിൽ സൈറ്റിനെ നിലനിർത്താനായി ഈ സമീപനം നിങ്ങളെ സഹായിക്കുന്നു.

ഏതെങ്കിലും സെലക്ടർ ഗ്രൂപ്പുചെയ്യാം

മേൽപ്പറഞ്ഞ ഉദാഹരണങ്ങളിൽ നിന്ന് നിങ്ങൾക്ക് കാണാൻ കഴിയുന്നതുപോലെ, ഏതെങ്കിലും സാധുതയുള്ള സെലക്ടർ ഒരു ഗ്രൂപ്പിൽ സ്ഥാപിക്കാവുന്നതാണ്, കൂടാതെ ഗ്രൂപ്പിലെ എല്ലാ ഘടകങ്ങളുമായി പൊരുത്തപ്പെടുന്ന പ്രമാണത്തിലെ എല്ലാ ഘടകങ്ങളും ആ ശൈലിയിലുള്ള ആസ്പദത്തിന് സമാനമായ ശൈലിയും ഉണ്ടായിരിക്കും.

ചില ആൾക്കാർക്ക് കോഡ് ലെ ലെജിബിലിറ്റിക്ക് വേണ്ടി വ്യത്യസ്ത വരികളിൽ ഗ്രൂപ്പ് ചെയ്ത ഘടകങ്ങൾ പട്ടികപ്പെടുത്താൻ ആഗ്രഹിക്കുന്നു. വെബ്സൈറ്റിനും ലോഡ് സ്പീമിനും ഉള്ള വ്യത്യാസം ഒന്നു തന്നെ. ഉദാഹരണത്തിന്, നിങ്ങൾക്ക് ഒരു കോടിയുടെ വരിയിൽ ഒരു സ്റ്റൈൽ പ്രോപ്പർട്ടിയിലേക്ക് കോമയിട്ട് വേർതിരിച്ച് സ്റ്റൈലുകൾ കൂട്ടിച്ചേർക്കാം:

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

അല്ലെങ്കിൽ നിങ്ങൾ വ്യക്തമായും വ്യക്തമായും വ്യക്തിഗത ലൈനുകളിൽ സ്റ്റൈലുകൾ ലിസ്റ്റുചെയ്യാൻ കഴിയും:

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

ഒന്നിലധികം CSS സെലക്ടറുകളിലേക്ക് ഗ്രൂപ്പ് ഉപയോഗിക്കുന്നതിന് നിങ്ങൾ ഉപയോഗിക്കുന്ന രീതി നിങ്ങളുടെ സൈറ്റിന്റെ വേഗത വർദ്ധിപ്പിക്കുകയും ശൈലികൾ ദീർഘകാലത്തെ കൈകാര്യം ചെയ്യാൻ എളുപ്പമാക്കുന്നു.

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