នៅពេលរៀនគោលការណ៍នៃ CSS ជាមូលដ្ឋាន វាត្រូវបានបង្រៀនឱ្យសរសេររចនាប័ទ្មម៉ូឌុល ប្រើឡើងវិញបាន និងពិពណ៌នា ដើម្បីធានាបាននូវការថែរក្សា។ ប៉ុន្តែនៅពេលដែលអ្នកអភិវឌ្ឍន៍ចូលរួមជាមួយកម្មវិធីក្នុងពិភពពិត វាច្រើនតែមានអារម្មណ៍ថាមិនអាចបន្ថែមមុខងារ UI ដោយគ្មានស្ទីលលេចធ្លាយទៅក្នុងផ្នែកដែលមិនចង់បាន។ បញ្ហានេះជារឿយៗធ្លាក់ចូលទៅក្នុងរង្វិលជុំដែលបំពេញដោយខ្លួនឯង; រចនាប័ទ្មដែលត្រូវបានកំណត់តាមទ្រឹស្តីទៅធាតុមួយ ឬថ្នាក់ចាប់ផ្តើមបង្ហាញកន្លែងដែលពួកគេមិនមែនជាកម្មសិទ្ធិ។ នេះបង្ខំឱ្យអ្នកអភិវឌ្ឍន៍បង្កើតឧបករណ៍ជ្រើសរើសជាក់លាក់បន្ថែមទៀតដើម្បីបដិសេធរចនាប័ទ្មលេចធ្លាយ ដែលបន្ទាប់មកជំនួសរចនាប័ទ្មសកលដោយចៃដន្យ។ល។ អនុសញ្ញាឈ្មោះថ្នាក់រឹង ដូចជា BEM គឺជាដំណោះស្រាយទ្រឹស្តីមួយចំពោះបញ្ហានេះ។ វិធីសាស្រ្ត BEM (Block, Element, Modifier) គឺជាវិធីជាប្រព័ន្ធមួយក្នុងការដាក់ឈ្មោះថ្នាក់ CSS ដើម្បីធានានូវលទ្ធភាពប្រើប្រាស់ឡើងវិញ និងរចនាសម្ព័ន្ធនៅក្នុងឯកសារ CSS ។ ការដាក់ឈ្មោះអនុសញ្ញាដូចនេះអាចកាត់បន្ថយបន្ទុកការយល់ដឹងដោយប្រើប្រាស់ភាសាដែន ដើម្បីពិពណ៌នាអំពីធាតុ និងស្ថានភាពរបស់វា ហើយប្រសិនបើអនុវត្តបានត្រឹមត្រូវ អាចធ្វើឱ្យរចនាប័ទ្មសម្រាប់កម្មវិធីធំងាយស្រួលក្នុងការថែទាំ។ ទោះយ៉ាងណាក៏ដោយ នៅក្នុងពិភពពិត វាមិនតែងតែដំណើរការដូចនោះទេ។ អាទិភាពអាចផ្លាស់ប្តូរ ហើយជាមួយនឹងការផ្លាស់ប្តូរ ការអនុវត្តក្លាយជាមិនស៊ីសង្វាក់គ្នា។ ការផ្លាស់ប្តូរតិចតួចចំពោះរចនាសម្ព័ន្ធ HTML អាចតម្រូវឱ្យមានការកែប្រែឈ្មោះថ្នាក់ CSS ជាច្រើន។ ជាមួយនឹងកម្មវិធីផ្នែកខាងមុខដែលមានអន្តរកម្មខ្ពស់ ឈ្មោះថ្នាក់តាមលំនាំ BEM អាចក្លាយទៅជាវែង និងគ្មានប្រយោជន៍ (ឧ. app-user-overview__status--is-authenticating) ហើយការមិនប្រកាន់ខ្ជាប់យ៉ាងពេញលេញទៅនឹងច្បាប់ដាក់ឈ្មោះធ្វើឱ្យខូចរចនាសម្ព័ន្ធរបស់ប្រព័ន្ធ ដោយហេតុនេះការបដិសេធផលប្រយោជន៍របស់វា។ ដោយសារបញ្ហាប្រឈមទាំងនេះ វាគ្មានអ្វីចម្លែកទេដែលអ្នកអភិវឌ្ឍន៍បានងាកទៅរកក្របខ័ណ្ឌ Taiwind គឺជាក្របខ័ណ្ឌ CSS ដែលពេញនិយមបំផុត។ ជាជាងការព្យាយាមប្រយុទ្ធប្រឆាំងនឹងអ្វីដែលហាក់ដូចជាសង្រ្គាមជាក់លាក់ដែលមិនអាចឈ្នះបានរវាងរចនាប័ទ្ម វាជាការងាយស្រួលក្នុងការបោះបង់ចោល CSS Cascade ហើយប្រើឧបករណ៍ដែលធានាភាពឯកោពេញលេញ។ អ្នកអភិវឌ្ឍន៍ពឹងផ្អែកលើឧបករណ៍ប្រើប្រាស់ តើយើងដឹងដោយរបៀបណាថាអ្នកអភិវឌ្ឍន៍មួយចំនួនមានចំណាប់អារម្មណ៍ក្នុងការជៀសវាងរចនាប័ទ្មល្បាក់? វាគឺជាការកើនឡើងនៃឧបករណ៍ខាងមុខ "ទំនើប" ដូចជា CSS-in-JS frameworks — ដែលត្រូវបានរចនាឡើងជាពិសេសសម្រាប់គោលបំណងនោះ។ ការធ្វើការជាមួយរចនាប័ទ្មដាច់ស្រយាលដែលមានវិសាលភាពយ៉ាងតឹងរឹងចំពោះសមាសធាតុជាក់លាក់អាចហាក់ដូចជាដង្ហើមនៃខ្យល់ស្រស់។ វាដកចេញនូវតម្រូវការក្នុងការដាក់ឈ្មោះរបស់ផ្សេងៗ - នៅតែជាកិច្ចការផ្នែកខាងមុខដែលគួរឱ្យស្អប់បំផុត និងចំណាយពេលវេលាច្រើនបំផុត - និងអនុញ្ញាតឱ្យអ្នកអភិវឌ្ឍន៍មានផលិតភាពដោយមិនចាំបាច់យល់ដឹងពេញលេញ ឬប្រើប្រាស់អត្ថប្រយោជន៍នៃមរតក CSS ។ ប៉ុន្តែការលុបចោល CSS Cascade កើតឡើងជាមួយនឹងបញ្ហាផ្ទាល់របស់វា។ ជាឧទាហរណ៍ ការតែងរចនាប័ទ្មក្នុង JavaScript ទាមទារការកំណត់រចនាសម្ព័ន្ធសំណង់ធ្ងន់ៗ ហើយជារឿយៗនាំឱ្យរចនាប័ទ្មដែលច្របូកច្របល់ជាមួយការសម្គាល់សមាសធាតុ ឬ HTML ។ ជំនួសឱ្យការពិចារណាដោយប្រុងប្រយ័ត្ននូវអនុសញ្ញាដាក់ឈ្មោះ យើងអនុញ្ញាតឱ្យបង្កើតឧបករណ៍ដើម្បីបង្កើតឧបករណ៍ជ្រើសរើស និងឧបករណ៍កំណត់អត្តសញ្ញាណដោយស្វ័យប្រវត្តិសម្រាប់យើង (ឧ. jsx-3130221066) ដោយតម្រូវឱ្យអ្នកអភិវឌ្ឍន៍បន្តប្រើភាសាក្លែងក្លាយផ្សេងទៀតនៅក្នុងខ្លួនវាផ្ទាល់។ (ដូចជាប្រសិនបើបន្ទុកការយល់ដឹងនៃការយល់ដឹងពីអ្វីដែល ផលប៉ះពាល់នៃការប្រើប្រាស់សមាសធាតុរបស់អ្នក គឺមិនគ្រប់គ្រាន់ទេ!) ការពន្យល់បន្ថែមអំពីការងារនៃការដាក់ឈ្មោះថ្នាក់ទៅឧបករណ៍មានន័យថាការបំបាត់កំហុសជាមូលដ្ឋានជារឿយៗត្រូវបានរារាំងចំពោះកំណែកម្មវិធីជាក់លាក់ដែលបានចងក្រងសម្រាប់ការអភិវឌ្ឍន៍ ជាជាងការប្រើប្រាស់លក្ខណៈពិសេសរបស់កម្មវិធីរុករកតាមអ៊ីនធឺណិតដែលគាំទ្រការកែកំហុសផ្ទាល់ ដូចជាឧបករណ៍អ្នកអភិវឌ្ឍន៍។ វាស្ទើរតែដូចជាយើងត្រូវបង្កើតឧបករណ៍ដើម្បីបំបាត់កំហុសឧបករណ៍ដែលយើងកំពុងប្រើដើម្បីអរូបីនូវអ្វីដែលគេហទំព័រផ្តល់រួចហើយ — ទាំងអស់សម្រាប់ជាប្រយោជន៍នៃការរត់ចេញពី "ការឈឺចាប់" នៃការសរសេរស្តង់ដារ CSS ។ ជាសំណាងល្អ លក្ខណៈពិសេស CSS ទំនើបមិនត្រឹមតែធ្វើឱ្យការសរសេរស្តង់ដារ CSS កាន់តែមានភាពបត់បែនប៉ុណ្ណោះទេ ប៉ុន្តែថែមទាំងផ្តល់ឱ្យអ្នកអភិវឌ្ឍន៍ដូចជាពួកយើងនូវថាមពលកាន់តែច្រើនក្នុងការគ្រប់គ្រងល្បាក់ និងធ្វើឱ្យវាដំណើរការសម្រាប់យើង។ CSS Cascade Layers គឺជាឧទាហរណ៍ដ៏អស្ចារ្យមួយ ប៉ុន្តែមានលក្ខណៈពិសេសមួយទៀតដែលទទួលបានការចាប់អារម្មណ៍គួរឱ្យភ្ញាក់ផ្អើល - ទោះបីជាវាកំពុងផ្លាស់ប្តូរឥឡូវនេះដែលវាបានក្លាយជា Baseline ដែលត្រូវគ្នានាពេលថ្មីៗនេះក៏ដោយ។ CSS @scope At-Rule ខ្ញុំចាត់ទុក CSS @scope at-rule ជាការព្យាបាលដ៏មានសក្តានុពលសម្រាប់ប្រភេទនៃការថប់បារម្ភដែលបណ្ដាលមកពីរចនាប័ទ្មដែលយើងបានគ្របដណ្តប់ ដែលមិនបង្ខំយើងឱ្យសម្របសម្រួលអត្ថប្រយោជន៍គេហទំព័រដើមសម្រាប់ការអរូបី និងឧបករណ៍បង្កើតបន្ថែម។ "ច្បាប់ @scope CSS អាចឱ្យអ្នកជ្រើសរើសធាតុនៅក្នុងអនុមែកធាង DOM ជាក់លាក់ ដោយកំណត់គោលដៅយ៉ាងជាក់លាក់ដោយមិនចាំបាច់សរសេរកម្មវិធីជ្រើសរើសជាក់លាក់ពេក ដែលពិបាកនឹងបដិសេធ ហើយដោយមិនភ្ជាប់ឧបករណ៍ជ្រើសរើសរបស់អ្នកតឹងពេកទៅនឹងរចនាសម្ព័ន្ធ DOM ។"— MDN
ម្យ៉ាងវិញទៀត យើងអាចធ្វើការជាមួយរចនាប័ទ្មដាច់ស្រយាលនៅក្នុងករណីជាក់លាក់ដោយមិនចាំបាច់លះបង់មរតក ការបាត់បង់ ឬសូម្បីតែការបំបែកមូលដ្ឋាននៃការព្រួយបារម្ភនោះគឺជាគោលការណ៍ណែនាំដ៏យូរអង្វែងនៃការអភិវឌ្ឍន៍ផ្នែកខាងមុខ។ លើសពីនេះ វាមានការគ្របដណ្តប់កម្មវិធីរុករកដ៏ល្អឥតខ្ចោះ។ តាមពិត Firefox 146 បានបន្ថែមការគាំទ្រសម្រាប់ @scope នៅក្នុងខែធ្នូ ដែលធ្វើឱ្យវាអាចប្រើជាមូលដ្ឋានជាលើកដំបូង។ នេះគឺជាការប្រៀបធៀបដ៏សាមញ្ញមួយរវាងប៊ូតុងដោយប្រើលំនាំ BEM ធៀបនឹងច្បាប់ @scope៖
<រចនាប័ទ្ម> .button .button__text { /* រចនាប័ទ្មអត្ថបទប៊ូតុង */ } .button .button__icon { /* រចនាប័ទ្មរូបតំណាងប៊ូតុង */ } .button--primary { រចនាប័ទ្មប៊ូតុងចម្បង */ }
<រចនាប័ទ្ម> @scope (.primary-button) { វិសាលភាព៖ កូនទីមួយ { // រចនាប័ទ្មអត្ថបទប៊ូតុង */ } span: last-child { //* រចនាប័ទ្មរូបតំណាងប៊ូតុង */ } }
ច្បាប់ @scope អនុញ្ញាតឱ្យមានភាពច្បាស់លាស់ជាមួយនឹងភាពស្មុគស្មាញតិច។ អ្នកអភិវឌ្ឍន៍លែងត្រូវការបង្កើតព្រំដែនដោយប្រើឈ្មោះថ្នាក់ ដែលអនុញ្ញាតឱ្យពួកគេសរសេរកម្មវិធីជ្រើសរើសដោយផ្អែកលើធាតុ HTML ដើម ដោយហេតុនេះលុបបំបាត់តម្រូវការសម្រាប់គំរូឈ្មោះថ្នាក់ CSS តាមវេជ្ជបញ្ជា។ ដោយគ្រាន់តែដកចេញនូវតម្រូវការសម្រាប់ការគ្រប់គ្រងឈ្មោះថ្នាក់ @scope អាចកាត់បន្ថយការភ័យខ្លាចដែលទាក់ទងនឹង CSS នៅក្នុងគម្រោងធំៗ។
ការប្រើប្រាស់មូលដ្ឋាន
ដើម្បីចាប់ផ្តើម សូមបន្ថែមច្បាប់ @scope ទៅ CSS របស់អ្នក ហើយបញ្ចូលជម្រើស root មួយណាដែលរចនាប័ទ្មនឹងត្រូវបានកំណត់៖
@scope (<ជ្រើសរើស>) {
/* រចនាប័ទ្មកំណត់ទៅ
ដូច្នេះ ជាឧទាហរណ៍ ប្រសិនបើយើងកំណត់រចនាប័ទ្មទៅធាតុ
@វិសាលភាព (nav) { a { /* រចនាប័ទ្មតំណនៅក្នុងវិសាលភាព nav */ }
a:សកម្ម { // រចនាប័ទ្មតំណសកម្ម */ }
a:active::before { /* Active link with pseudo-element for extra styling */ }
@media (ទទឹងអតិបរមា៖ 768px) { a { /* ការកែតម្រូវការឆ្លើយតប */ } } }
នេះដោយខ្លួនវាផ្ទាល់ មិនមែនជាលក្ខណៈពិសេសមួយទេ។ ទោះជាយ៉ាងណាក៏ដោយ អាគុយម៉ង់ទីពីរអាចត្រូវបានបន្ថែមទៅវិសាលភាពដើម្បីបង្កើតព្រំដែនទាប ដោយកំណត់ចំណុចចាប់ផ្តើម និងចំណុចបញ្ចប់នៃវិសាលភាពប្រកបដោយប្រសិទ្ធភាព។
/* ធាតុណាមួយនៅក្នុង ul នឹងមិនត្រូវបានអនុវត្តរចនាប័ទ្មទេ */ @scope (nav) ទៅ (ul) { មួយ { ទំហំពុម្ពអក្សរ៖ ១៤ ភីច; } }
ការអនុវត្តនេះត្រូវបានគេហៅថាការធ្វើវិសាលភាពនំដូណាត់ ហើយមានវិធីសាស្រ្តជាច្រើនដែលអ្នកអាចប្រើ រួមទាំងស៊េរីនៃកម្មវិធីជ្រើសរើសជាក់លាក់ខ្ពស់ស្រដៀងគ្នា ដែលភ្ជាប់យ៉ាងតឹងរ៉ឹងទៅនឹងរចនាសម្ព័ន្ធ DOM ដែលជា: មិនមែន pseudo-selector ឬកំណត់ឈ្មោះថ្នាក់ជាក់លាក់ទៅ ធាតុនៅក្នុង
សេចក្តីសន្និដ្ឋាន Utility-first CSS frameworks ដូចជា Tailwind ដំណើរការល្អសម្រាប់ការធ្វើគំរូ និងគម្រោងតូចៗ។ ទោះជាយ៉ាងណាក៏ដោយ អត្ថប្រយោជន៍របស់ពួកគេថយចុះយ៉ាងឆាប់រហ័ស នៅពេលប្រើក្នុងគម្រោងធំ ៗ ដែលពាក់ព័ន្ធនឹងអ្នកអភិវឌ្ឍន៍ច្រើនជាងពីរ។ ការអភិវឌ្ឍន៍ផ្នែកខាងមុខមានភាពស្មុគស្មាញកាន់តែខ្លាំងឡើងក្នុងរយៈពេលប៉ុន្មានឆ្នាំចុងក្រោយនេះ ហើយ CSS មិនមានករណីលើកលែងនោះទេ។ ខណៈពេលដែលច្បាប់ @scope មិនមែនជាការព្យាបាលទាំងអស់ វាអាចកាត់បន្ថយតម្រូវការសម្រាប់ឧបករណ៍ស្មុគស្មាញ។ នៅពេលប្រើជំនួស ឬជាមួយការដាក់ឈ្មោះថ្នាក់យុទ្ធសាស្ត្រ @scope អាចធ្វើឱ្យវាកាន់តែងាយស្រួល និងរីករាយក្នុងការសរសេរ CSS ដែលអាចរក្សាបាន។ ការអានបន្ថែម
CSS @scope (MDN) “CSS @scope”, Juan Diego Rodríguez (CSS-Tricks) កំណត់ចំណាំការចេញផ្សាយរបស់ Firefox 146 (Firefox) ការគាំទ្រកម្មវិធីរុករក (CanIUse) ក្របខ័ណ្ឌ CSS ពេញនិយម (ស្ថានភាព CSS 2024) "C" នៅក្នុង CSS: Cascade", Thomas Yip (CSS-Tricks) ការណែនាំអំពី BEM (ទទួលបាន BEM)
