கட்டமைப்பு முடிவு பதிவு: CSS கட்டமைப்பு

உள்ளடக்கம்:

• சுருக்கம்
  • சிக்கல்
  • முடிவு
  • நிலை
• விவரங்கள்
  • அனுமானங்கள்
  • கட்டுப்பாடுகள்
  • நிலைப்பாடுகள்
  • வாதம்
  • தாக்கங்கள்
• தொடர்புடையவை
  • தொடர்புடைய முடிவுகள்
  • தொடர்புடைய தேவைகள்
  • தொடர்புடைய படைப்புகள்
  • தொடர்புடைய கொள்கைகள்
• குறிப்புகள்

சுருக்கம்

சிக்கல்

எங்கள் வலைப் பயன்பாடுகளை உருவாக்க CSS கட்டமைப்பைப் பயன்படுத்த விரும்புகிறோம்:

• அனைத்து பிரபலமான உலாவிகளிலும் திரை அளவுகளிலும் பயனர் அனுபவம் வேகமாகவும் நம்பகமாகவும் இருக்க வேண்டும்.

• வடிவமைப்பு, தளவமைப்பு, UI/UX போன்றவற்றில் விரைவான மீள்செயல் வேண்டும்.

• குறிப்பாக மொபைல் சாதனங்கள் போன்ற சிறிய திரைகள், 4K அகன்ற திரைகள் போன்ற பெரிய திரைகள், சுழற்றக்கூடிய காட்சிகள் போன்ற இயங்குநிலைத் திரைகளுக்குத் துலங்கும் பயன்பாடுகள் வேண்டும்.

முடிவு

Bulma வில் முடிவு செய்யப்பட்டது.

நிலை

Bulma வில் முடிவு செய்யப்பட்டது. புதிய CSS கட்டமைப்புத் தேர்வுகள் வரும்போது அவற்றுக்குத் திறந்துள்ளோம்.

விவரங்கள்

அனுமானங்கள்

நவீன, வேகமான, நம்பகமான, துலங்கும் போன்ற வலைப் பயன்பாடுகளை உருவாக்க விரும்புகிறோம்.

வழக்கமான நவீன வலைப் பயன்பாடுகள் பல காரணங்களால் jQuery யின் பயன்பாட்டைக் குறைத்து/நீக்கி வருகின்றன:

• நவீன JavaScript, jQuery வழங்கிய பல திறன்களைப் படிப்படியாக இணைத்து வருகிறது, எனவே jQuery க்கான தேவை குறைவு, குறிப்பிட்ட நடைமுறைப்படுத்தல்களை வழங்கும் சிறந்த/வேகமான/சிறிய தொகுதிகள் உள்ளன

• jQuery யின் பரந்த அணுகுமுறை நேரடி DOM கையாளுதல் ஆகும், இது நவீன JavaScript கட்டமைப்புகளுக்கு (எ.கா. React, Vue, Svelte) எதிர்-வடிவம்

• jQuery இரண்டு முறை ஏற்றப்பட்டால் தனக்குத்தானே குறுக்கிடுகிறது, போன்றவை.

கட்டுப்பாடுகள்

jQuery ஐப் பயன்படுத்தும் CSS கட்டமைப்பைத் தேர்ந்தெடுத்தால், jQuery ஐ இறக்குமதி செய்வதில் நாம் சிக்கிக்கொள்கிறோம். எடுத்துக்காட்டாக, Semantic UI jQuery ஐப் பயன்படுத்துகிறது, Tachyons பயன்படுத்தவில்லை.

குறைந்தபட்ச CSS கட்டமைப்பைத் தேர்ந்தெடுத்தால், இப்போது அல்லது விரைவில் நாம் விரும்பக்கூடிய கட்டமைப்புக் கூறுகளை விட்டுவிடுகிறோம். எடுத்துக்காட்டாக, Semantic UI பட கொணர்வியை வழங்குகிறது, Tachyons வழங்கவில்லை.

நிலைப்பாடுகள்

எந்தக் கட்டமைப்பையும் பயன்படுத்தாமல் இருப்பதைப் பரிசீலித்தோம். இது இன்னும் சாத்தியமாகத் தெரிகிறது, குறிப்பாக CSS grid எங்கள் திட்டத்துக்குத் தேவையான பலவற்றை வழங்குவதால்..

விரைவான சிறுபட்டியல் வடிகட்டலைப் பயன்படுத்தி பல CSS கட்டமைப்புகளைப் பரிசீலித்தோம்: Bootstrap, Bulma, Foundation, Materialize, Semantic UI, Tachyons, போன்றவை. ஆழமான மதிப்பாய்வுக்கு எங்கள் இரண்டு தேர்வுகள் Semantic UI (ஏனெனில் அது மிகவும் பொருள்சார் அணுகுமுறை கொண்டது) மற்றும் Bulma (ஏனெனில் நாங்கள் இப்போது விரும்பும் கூறுகளை வழங்கும் மிக எடை குறைந்த அணுகுமுறை அதனிடம் உள்ளது).

Semantic UI ஐப் பரிசீலித்தோம். இது எங்கள் திட்டத்துக்கு நாங்கள் விரும்பும் tabs, grids, buttons போன்றவை உட்பட பல கூறுகளை வழங்குகிறது. Semantic UI உடன் இரண்டு வழிகளில் முன்னோட்டம் நடத்தினோம்: வழக்கமான CDN கோப்புகளைப் பயன்படுத்தி, NPM களஞ்சியங்களைப் பயன்படுத்தி. நிலையான HTML பக்கத்தில் Semantic UI உடன் வெற்றி கண்டோம், ஆனால் JavaScript SPA உருவாக்கும் எங்கள் நேர வரம்புக்குள் வெற்றி காணவில்லை (முதன்மையாக jQuery ஏற்றுச் சிக்கல்களால்). மற்ற நிரலாளர்களும் எங்களைப் போன்ற அதே காரணங்களுக்காக Semantic UI உருவாக்குநர்களை jQuery-இல்லாத பதிப்பை உருவாக்கக் கேட்டு வருவதைக் கண்டறிந்தோம். மற்ற நிரலாளர்கள் பல ஆண்டுகளாக jQuery-இல்லாத பதிப்பைக் கோரி வருகின்றனர், ஆனாலும் உருவாக்குநர்கள் மறுத்துவிட்டனர், மேலும் எந்த jQuery-இல்லாத பதிப்பும் எழுதுவது மிகவும் கடினம் என்று கூறியுள்ளனர் எ.கா. ~"Semantic UI திட்டத்தில் jQuery ஐப் பயன்படுத்தும் 22,000 க்கும் மேற்பட்ட தொடுபுள்ளிகள் உள்ளன".

Semantic உடன் எடுத்துக்காட்டு:

<div class="ui top attached tabular menu">
  <a class="item">Alpha</a>
  <a class="item">Bravo</a>
</div>

Bulma வைப் பரிசீலித்தோம். Bulma வுக்கு Semantic UI போன்ற பல ஒத்த திறன்கள் உள்ளன, ஆனால் அவ்வளவு நுட்பமான கூறுகள் இல்லை. Bulma நவீன நுட்பங்களுடன் உருவாக்கப்பட்டுள்ளது, jQuery இல்லை போன்றவை. Bulma வுக்குச் சில மூன்றாம் தரப்புக் கூறுகள் உள்ளன, அவற்றில் சிலவற்றை நாம் பயன்படுத்த விரும்பலாம்.

Bulma வுடன் எடுத்துக்காட்டு:

<div class="tabs">
  <ul>
    <li><a>Alpha</a></li>
    <li><a>Bravo</a></li>
  </ul>
</div>

வாதம்

மேலே உள்ளபடி.

குறிப்பாக, Semantic UI தொழில்நுட்ப ரீதியாகவும் (அதாவது இவ்வளவு jQuery தொடுபுள்ளிகள்) தலைமை ரீதியாகவும் (அதாவது வழிவரைபடம் அல்லது தொடர்ச்சியான மேம்பாடு அல்லது நன்கொடை நிதி திரட்டல் போன்றவற்றை முயற்சிப்பதற்குப் பதிலாக jQuery-இல்லாதது கடுமையான மறுப்பாக இருந்தது) எச்சரிக்கைக் கொடியைக் கொண்டிருப்பதாகத் தோன்றுகிறது.

தாக்கங்கள்

நல்ல jQuery அல்லாத CSS கட்டமைப்பைக் கண்டறிந்தால், இது பொதுவாகப் பயனுள்ளது, ஒட்டுமொத்தமாக நல்லது.

தொடர்புடையவை

தொடர்புடைய முடிவுகள்

நாங்கள் தேர்ந்தெடுக்கும் CSS கட்டமைப்பு சோதிக்கும் தன்மையைப் பாதிக்கலாம்.

தொடர்புடைய தேவைகள்

முழுவதும் நவீனப் பயன்பாட்டை வேகமாக அனுப்ப விரும்புகிறோம்.

பழைய சார்புகளைப் (குறிப்பாக jQuery) பயன்படுத்தும் பழைய கட்டமைப்புகளில் (குறிப்பாக Semantic UI) வேலை செய்வதில் நேரத்தைச் செலவிட நாங்கள் விரும்பவில்லை.

தொடர்புடைய படைப்புகள்

CSS ஐப் பயன்படுத்தும் அனைத்து வழக்கமான HTML ஐயும் பாதிக்கிறது.

தொடர்புடைய கொள்கைகள்

எளிதில் மாற்றியமைக்கக்கூடியது.

வேகத்துக்கான தேவை.

குறிப்புகள்

எந்தக் குறிப்புகளும் இங்கே.