M

MLOG

Latviešu

Izpētiet divas populāras CSS arhitektūras, BEM un atomāro CSS, analizējot to priekšrocības, trūkumus un piemērotību dažādiem globāliem projektiem.

CSS arhitektūra: BEM pret atomāro CSS — globāls salīdzinājums

Pareizās CSS arhitektūras izvēle ir izšķiroša, lai veidotu uzturamas, mērogojamas un saprotamas tīmekļa lietojumprogrammas. Divas populāras pieejas ir BEM (Block Element Modifier) un atomārais CSS (pazīstams arī kā funkcionālais CSS). Šis raksts sniedz visaptverošu šo metodoloģiju salīdzinājumu, ņemot vērā to stiprās un vājās puses, kā arī piemērotību dažādu veidu projektiem dažādās globālās izstrādes vidēs.

Izpratne par BEM (Block Element Modifier)

BEM ir saīsinājums no Block (bloks), Element (elements) un Modifier (modifikators). Tā ir CSS klašu nosaukumu veidošanas konvencija, kuras mērķis ir uzlabot koda lasāmību, uzturamību un atkārtotu izmantojamību. BEM, ko izstrādāja Yandex, liels Krievijas (tagad starptautiski darbojošs) tehnoloģiju uzņēmums, ir ieguvis plašu atzinību visā pasaulē.

BEM pamatkoncepcijas

BEM nosaukumu veidošanas konvencija

BEM nosaukumu veidošanas konvencija seko noteiktai struktūrai:

BEM piemērs darbībā

Apskatīsim vienkāršu meklēšanas formu:


<form class="search-form">
  <input type="text" class="search-form__input" placeholder="Meklēt...">
  <button class="search-form__button">Aiziet</button>
</form>


.search-form {
  /* Meklēšanas formas bloka stili */
}

.search-form__input {
  /* Ievades elementa stili */
}

.search-form__button {
  /* Pogas elementa stili */
}

.search-form__button--primary {
  /* Primārās pogas modifikatora stili */
  background-color: blue;
  color: white;
}

BEM priekšrocības

BEM trūkumi

Izpratne par atomāro CSS (funkcionālo CSS)

Atomārais CSS, pazīstams arī kā funkcionālais CSS, ir CSS arhitektūra, kas dod priekšroku mazām, viena mērķa klasēm. Katra klase apzīmē vienu CSS īpašību un vērtību. Populāri ietvari, piemēram, Tailwind CSS un Tachyons, ir šīs pieejas piemēri. Atomārais CSS veicina uz lietderību balstītu (utility-first) stilu veidošanu, kur stilus veidojat tieši savā HTML, izmantojot šīs atomārās klases.

Atomārā CSS pamatkoncepcijas

Atomārā CSS piemērs darbībā

Izmantojot Tailwind CSS, iepriekš minētais meklēšanas formas piemērs izskatītos šādi:


<form class="flex items-center">
  <input type="text" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline mr-2" placeholder="Meklēt...">
  <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">Aiziet</button>
</form>

Ievērojiet, kā stili tiek piemēroti tieši HTML, izmantojot lietderības klases, piemēram, flex, items-center, shadow, rounded utt.

Atomārā CSS priekšrocības

Atomārā CSS trūkumi

BEM pret atomāro CSS: detalizēts salīdzinājums

Šeit ir tabula, kas apkopo galvenās atšķirības starp BEM un atomāro CSS:

Iezīme BEM Atomārais CSS
Nosaukumu veidošanas konvencija Bloks, Elements, Modifikators Viena mērķa lietderības klases
Stilu veidošanas pieeja Rakstīt pielāgotus CSS noteikumus Veidot stilus HTML, izmantojot lietderības klases
Koda lasāmība Laba, ar skaidru nosaukumu veidošanas konvenciju Var būt apgrūtinoši HTML pārblīvētības dēļ, atkarīgs no ietvara pārzināšanas
Uzturamība Augsta, pateicoties modulārajai struktūrai Augsta, pateicoties konsekventai stilu veidošanai un atkārtoti lietojamām klasēm
Atkārtota izmantojamība Augsta, blokus var atkārtoti izmantot visā lietojumprogrammā Ļoti augsta, lietderības klases ir ļoti atkārtoti izmantojamas
CSS specifikācija Zema, veicina plakanu specifikāciju Nav specifikācijas problēmu, stili tiek piemēroti tieši
HTML izmērs Var būt lielāks garo klašu nosaukumu dēļ Var būt lielāks daudzo lietderības klašu dēļ
Mācīšanās līkne Mērena Mērena līdz augsta, atkarīgs no ietvara
Pielāgošana Ļoti pielāgojama Ierobežota ar ietvaru, bet bieži konfigurējama
Prototipēšanas ātrums Mērens Ātrs

Kad izmantot BEM

BEM ir laba izvēle, ja:

Kad izmantot atomāro CSS

Atomārais CSS ir laba izvēle, ja:

Globālie apsvērumi un lokalizācija

Izvēloties CSS arhitektūru globālai auditorijai, apsveriet sekojošo:

BEM un atomārā CSS apvienošana

Ir iespējams arī apvienot BEM un atomāro CSS. Piemēram, jūs varētu izmantot BEM savu komponentu vispārējai struktūrai un atomāro CSS sīkākai stilu pielāgošanai. Šī pieeja var nodrošināt līdzsvaru starp BEM modularitāti un atomārā CSS ātrās prototipēšanas iespējām.

Noslēgums

BEM un atomārais CSS ir abas vērtīgas CSS arhitektūras, kas piedāvā dažādas priekšrocības un trūkumus. Labākā izvēle jūsu projektam ir atkarīga no jūsu specifiskajām prasībām, komandas vēlmēm un jūsu izstrādes vides kopējā konteksta. Izpratne par katras pieejas stiprajām un vājajām pusēm ļaus jums pieņemt pamatotu lēmumu, kas novedīs pie uzturamas, mērogojamas un veiksmīgas tīmekļa lietojumprogrammas globālai auditorijai. Eksperimentējiet ar abām metodoloģijām mazākos projektos, lai gūtu praktisku izpratni, pirms apņematies izmantot vienu no tām lielākam projektam. Atcerieties dizaina un ieviešanas fāzēs ņemt vērā globālas sekas, piemēram, RTL atbalstu un kultūras sensitivitāti.