M

MLOG

Lietuvių

Išnagrinėkite dvi populiarias CSS architektūras, BEM ir Atominį CSS, analizuodami jų privalumus, trūkumus ir tinkamumą įvairiems pasauliniams projektams.

CSS Architektūra: BEM Prieš Atominį CSS – Visuotinis Palyginimas

Tinkamos CSS architektūros pasirinkimas yra itin svarbus kuriant palaikomas, mastelį keičiančias ir suprantamas interneto aplikacijas. Du populiarūs požiūriai yra BEM (Block Element Modifier) ir Atominis CSS (taip pat žinomas kaip Funkcinis CSS). Šiame straipsnyje pateikiamas išsamus šių metodologijų palyginimas, atsižvelgiant į jų stipriąsias ir silpnąsias puses bei tinkamumą įvairių tipų projektams skirtingose pasaulinėse kūrimo aplinkose.

BEM (Block Element Modifier) Supratimas

BEM yra Bloko, Elemento ir Modifikatoriaus santrumpa. Tai CSS klasių pavadinimų suteikimo taisyklė, kuria siekiama pagerinti kodo skaitomumą, palaikomumą ir pakartotinį panaudojamumą. Sukurta „Yandex“, didelės Rusijos (dabar veikiančios tarptautiniu mastu) technologijų įmonės, BEM sulaukė plataus pritarimo visame pasaulyje.

Pagrindinės BEM Koncepcijos

BEM Pavadinimų Suteikimo Taisyklė

BEM pavadinimų suteikimo taisyklė laikosi konkrečios struktūros:

BEM Veikimo Pavyzdys

Apsvarstykime paprastą paieškos formą:


<form class="search-form">
  <input type="text" class="search-form__input" placeholder="Ieškoti...">
  <button class="search-form__button">Pirmyn</button>
</form>


.search-form {
  /* Paieškos formos bloko stiliai */
}

.search-form__input {
  /* Įvesties elemento stiliai */
}

.search-form__button {
  /* Mygtuko elemento stiliai */
}

.search-form__button--primary {
  /* Pirminio mygtuko modifikatoriaus stiliai */
  background-color: blue;
  color: white;
}

BEM Privalumai

BEM Trūkumai

Atominio CSS (Funkcinio CSS) Supratimas

Atominis CSS, taip pat žinomas kaip Funkcinis CSS, yra CSS architektūra, kuri teikia pirmenybę mažoms, vienos paskirties klasėms. Kiekviena klasė atspindi vieną CSS savybę ir vertę. Populiarūs karkasai, tokie kaip „Tailwind CSS“ ir „Tachyons“, iliustruoja šį požiūrį. Atominis CSS skatina „utility-first“ stilių, kai stilius kuriate tiesiogiai savo HTML faile, naudodami šias atomines klases.

Pagrindinės Atominio CSS Koncepcijos

Atominio CSS Veikimo Pavyzdys

Naudojant „Tailwind CSS“, aukščiau pateiktas paieškos formos pavyzdys atrodytų taip:


<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="Ieškoti...">
  <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">Pirmyn</button>
</form>

Atkreipkite dėmesį, kaip stiliai taikomi tiesiogiai HTML faile, naudojant pagalbines klases, tokias kaip flex, items-center, shadow, rounded ir kt.

Atominio CSS Privalumai

Atominio CSS Trūkumai

BEM Prieš Atominį CSS: Detalus Palyginimas

Štai lentelė, apibendrinanti pagrindinius skirtumus tarp BEM ir Atominio CSS:

Savybė BEM Atominis CSS
Pavadinimų suteikimo taisyklė Blokas, Elementas, Modifikatorius Vienos paskirties pagalbinės klasės
Stiliaus taikymo požiūris Rašomos pasirinktinės CSS taisyklės Stiliai kuriami HTML faile naudojant pagalbines klases
Kodo skaitomumas Geras, su aiškia pavadinimų taisykle Gali būti sudėtingas dėl HTML perkrovimo, priklauso nuo susipažinimo su karkasu
Palaikomumas Aukštas, dėl modulinės struktūros Aukštas, dėl nuoseklaus stiliaus ir pakartotinai naudojamų klasių
Pakartotinis panaudojamumas Aukštas, blokus galima pakartotinai naudoti visoje programoje Labai aukštas, pagalbinės klasės yra labai lengvai pakartotinai naudojamos
CSS Specifiškumas Žemas, skatina plokščią specifiškumą Nėra specifiškumo problemų, stiliai taikomi tiesiogiai
HTML Dydis Gali būti didesnis dėl išsamių klasių pavadinimų Gali būti didesnis dėl daugybės pagalbinių klasių
Mokymosi kreivė Vidutinė Nuo vidutinės iki aukštos, priklauso nuo karkaso
Pritaikymas Labai pritaikomas Ribotas karkaso, bet dažnai konfigūruojamas
Prototipų kūrimo greitis Vidutinis Greitas

Kada Naudoti BEM

BEM yra geras pasirinkimas:

Kada Naudoti Atominį CSS

Atominis CSS yra geras pasirinkimas:

Visuotiniai Aspektai ir Lokalizacija

Renkantis CSS architektūrą pasaulinei auditorijai, atsižvelkite į šiuos dalykus:

BEM ir Atominio CSS Derinimas

Taip pat įmanoma derinti BEM ir Atominį CSS. Pavyzdžiui, galite naudoti BEM bendrai savo komponentų struktūrai ir Atominį CSS smulkesniam stiliaus pritaikymui. Šis požiūris gali suteikti pusiausvyrą tarp BEM moduliškumo ir greito prototipų kūrimo galimybių, kurias siūlo Atominis CSS.

Išvada

BEM ir Atominis CSS yra vertingos CSS architektūros, turinčios skirtingų privalumų ir trūkumų. Geriausias pasirinkimas jūsų projektui priklauso nuo konkrečių reikalavimų, komandos pageidavimų ir bendro kūrimo aplinkos konteksto. Suprasdami kiekvieno požiūrio stipriąsias ir silpnąsias puses, galėsite priimti pagrįstą sprendimą, kuris padės sukurti labiau palaikomą, mastelį keičiančią ir sėkmingą interneto aplikaciją pasaulinei auditorijai. Eksperimentuokite su abiem metodologijomis mažesniuose projektuose, kad įgytumėte praktinį supratimą prieš pasirenkant vieną iš jų didesniam projektui. Nepamirškite atsižvelgti į visuotinius aspektus, tokius kaip RTL palaikymas ir kultūriniai jautrumai, projektavimo ir įgyvendinimo etapuose.