កំណត់ត្រាការសម្រេចចិត្តខាងស្ថាបត្យកម្ម៖ ក្របខ័ណ្ឌ CSS

មាតិកា៖

• សង្ខេប
  • បញ្ហា
  • ការសម្រេចចិត្ត
  • ស្ថានភាព
• ព័ត៌មានលម្អិត
  • ការសន្មត់
  • ឧបសគ្គ
  • ជំហរ
  • អាគុយម៉ង់
  • ផលវិបាក
• ពាក់ព័ន្ធ
  • ការសម្រេចចិត្តពាក់ព័ន្ធ
  • តម្រូវការពាក់ព័ន្ធ
  • វត្ថុពាក់ព័ន្ធ
  • គោលការណ៍ពាក់ព័ន្ធ
• កំណត់ចំណាំ

សង្ខេប

បញ្ហា

យើងចង់ប្រើក្របខ័ណ្ឌ CSS ដើម្បីបង្កើតកម្មវិធីគេហទំព័ររបស់យើង៖

• យើងចង់ឱ្យបទពិសោធន៍អ្នកប្រើលឿន និងអាចទុកចិត្តបាន នៅលើកម្មវិធីរុករកពេញនិយមទាំងអស់ និងទំហំអេក្រង់ទាំងអស់។

• យើងចង់បានការធ្វើវដ្តលឿនលើការរចនា ប្លង់ UI/UX ។ល។

• យើងចង់បានកម្មវិធីដែលឆ្លើយតបបាន ជាពិសេសសម្រាប់អេក្រង់តូចៗដូចជានៅលើឧបករណ៍ចល័ត អេក្រង់ធំៗដូចជានៅលើអេក្រង់ទូលាយ 4K និងអេក្រង់ថាមវន្តដូចជាអេក្រង់ដែលអាចបង្វិលបាន។

ការសម្រេចចិត្ត

បានសម្រេចជ្រើស Bulma។

ស្ថានភាព

បានសម្រេចជ្រើស Bulma។ បើកចំហចំពោះជម្រើសក្របខ័ណ្ឌ CSS ថ្មីនៅពេលដែលវាមកដល់។

ព័ត៌មានលម្អិត

ការសន្មត់

យើងចង់បង្កើតកម្មវិធីគេហទំព័រដែលទំនើប លឿន អាចទុកចិត្តបាន ឆ្លើយតបបាន ។ល។

កម្មវិធីគេហទំព័រទំនើបធម្មតាកំពុងកាត់បន្ថយ/លុបបំបាត់ការប្រើ jQuery ដោយសារហេតុផលច្រើន៖

• JavaScript ទំនើបកំពុងបញ្ចូលសមត្ថភាពជាច្រើនដែល jQuery បានផ្តល់ ដូច្នេះ jQuery ត្រូវការតិចជាងមុន ហើយមានម៉ូឌុលល្អជាង/លឿនជាង/តូចជាង ដែលផ្តល់ការអនុវត្តជាក់លាក់

• វិធីសាស្ត្រទូលំទូលាយរបស់ jQuery គឺធ្វើការរៀបចំ DOM ដោយផ្ទាល់ ដែលជាគំរូប្រឆាំងសម្រាប់ក្របខ័ណ្ឌ JavaScript ទំនើប (ឧ. React, Vue, Svelte)

• jQuery រំខានខ្លួនវាផ្ទាល់ ប្រសិនបើវាត្រូវបានផ្ទុកពីរដង ។ល។

ឧបសគ្គ

ប្រសិនបើយើងជ្រើសក្របខ័ណ្ឌ CSS ដែលប្រើ jQuery នោះយើងជាប់ក្នុងការនាំចូល jQuery។ ឧទាហរណ៍ Semantic UI ប្រើ jQuery ចំណែក Tachyons មិនប្រើទេ។

ប្រសិនបើយើងជ្រើសក្របខ័ណ្ឌ CSS ដែលតិចតួចបំផុត នោះយើងបោះបង់សមាសភាគក្របខ័ណ្ឌដែលយើងអាចចង់បានឥឡូវនេះ ឬឆាប់ៗនេះ។ ឧទាហរណ៍ Semantic UI ផ្តល់ image carousel ចំណែក Tachyons មិនផ្តល់ទេ។

ជំហរ

យើងបានពិចារណាការមិនប្រើក្របខ័ណ្ឌ។ នេះនៅតែមើលទៅអាចអនុវត្តបាន ជាពិសេសដោយសារ CSS grid ផ្តល់ភាគច្រើននៃអ្វីដែលយើងត្រូវការសម្រាប់គម្រោងរបស់យើង។

យើងបានពិចារណាក្របខ័ណ្ឌ CSS ជាច្រើនដោយប្រើការចាត់ចំណាត់ថ្នាក់បញ្ជីខ្លីរហ័ស៖ Bootstrap, Bulma, Foundation, Materialize, Semantic UI, Tachyons ។ល។ ជម្រើសពីររបស់យើងសម្រាប់ការពិនិត្យស៊ីជម្រៅគឺ Semantic UI (ព្រោះវាមានវិធីសាស្ត្រដែលមានអត្ថន័យបំផុត) និង Bulma (ព្រោះវាមានវិធីសាស្ត្រស្រាលបំផុតដែលផ្តល់សមាសភាគដែលយើងចង់បានឥឡូវនេះ)។

យើងបានពិចារណា Semantic UI។ នេះផ្តល់សមាសភាគជាច្រើន រួមទាំងសមាសភាគដែលយើងចង់បានសម្រាប់គម្រោងរបស់យើង៖ ផ្ទាំង (tabs) ក្រឡាចត្រង្គ ប៊ូតុង ។ល។ យើងបានធ្វើគម្រោងសាកល្បងជាមួយ Semantic UI តាមពីរវិធី៖ ដោយប្រើឯកសារ CDN ធម្មតា និងដោយប្រើ NPM repo។ យើងទទួលបានជោគជ័យជាមួយ Semantic UI ក្នុងទំព័រ HTML ឋិតិវន្ត ប៉ុន្តែមិនទទួលបានជោគជ័យក្នុងក្របខណ្ឌពេលវេលារបស់យើងដើម្បីកសាង SPA JavaScript (ជាចម្បងដោយសារបញ្ហាការផ្ទុក jQuery)។ យើងបានរកឃើញថាអ្នកសរសេរកូដផ្សេងទៀតបានសុំឱ្យអ្នកអភិវឌ្ឍន៍ Semantic UI បង្កើតកំណែដែលគ្មាន jQuery ដោយសារហេតុផលដូចគ្នានឹងយើង។ អ្នកសរសេរកូដផ្សេងទៀតបានស្នើសុំកំណែគ្មាន jQuery អស់ជាច្រើនឆ្នាំ ប៉ុន្តែអ្នកអភិវឌ្ឍន៍បាននិយាយថាទេ ហើយបានថ្លែងថាកំណែគ្មាន jQuery ណាមួយនឹងពិបាកសរសេរពេក ឧ. ~“គម្រោង Semantic UI មានចំណុចប៉ះជាង 22,000 ដែលប្រើ jQuery”។

ឧទាហរណ៍ជាមួយ 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 ជាការបដិសេធដាច់ខាត ជាជាងព្យាយាមធ្វើផែនទីបង្ហាញផ្លូវ ឬការកែលម្អជាបន្តបន្ទាប់ ឬការរៀបចំការរកប្រាក់បរិច្ចាគ ។ល។)។

ផលវិបាក

ប្រសិនបើយើងរកឃើញក្របខ័ណ្ឌ CSS ល្អដែលមិនមែន jQuery នេះជាទូទៅមានប្រយោជន៍ និងល្អជារួម។

ពាក់ព័ន្ធ

ការសម្រេចចិត្តពាក់ព័ន្ធ

ក្របខ័ណ្ឌ CSS ដែលយើងជ្រើសអាចប៉ះពាល់ដល់ភាពអាចសាកល្បងបាន។

តម្រូវការពាក់ព័ន្ធ

យើងចង់ដឹកជញ្ជូនកម្មវិធីទំនើបសុទ្ធឱ្យលឿន។

យើងមិនចង់ចំណាយពេលធ្វើការលើក្របខ័ណ្ឌចាស់ (ជាពិសេស Semantic UI) ដែលប្រើភាពអាស្រ័យចាស់ (ជាពិសេស jQuery) ទេ។

វត្ថុពាក់ព័ន្ធ

ប៉ះពាល់ដល់ HTML ធម្មតាទាំងអស់ដែលនឹងប្រើ CSS។

គោលការណ៍ពាក់ព័ន្ធ

អាចត្រឡប់វិញបានយ៉ាងងាយ។

ត្រូវការល្បឿន។

កំណត់ចំណាំ

កំណត់ចំណាំណាមួយនៅទីនេះ។