Mindegyiknél webalkalmazások fejlesztése, amelyen a csapat dolgozik, vagy ha több fejlesztő felváltva dolgozik, függetlenül attól, hogy fenntartják-e az alkalmazásokat vagy az új projekteket, ezek a fejlesztők mindegyike hagyja benne az írási stílusát HTML a CSS kód. A kis weboldalak esetében a kód karbantartása nem olyan nagy probléma. Ha azonban nagyobb alkalmazásokat vizsgálunk, akkor nagyon fontos a szervezés, a stílus egységesítése, valamint a HTML és CSS kód optimalizálása.
Számos olyan elnevezési megállapodás létezik, amely megpróbál szabályokat kialakítani a programozók számára, amikor bármilyen alkalmazáshoz kódot írnak. Függetlenül attól, hogy melyik módszert választja a projektjéhez, a létrehozása és karbantartása során használni fogja. a strukturáltabb CSS és UI előnyei. Egyes konvenciók rugalmasabbak, mások nagyon szigorúak, mások könnyebben érthetők és alkalmazkodók, mások összetettek.
De mi a válaszom erre, melyiket válasszuk? BEM.
Blokk elem módosító módszertan (rövidítve: BEM) nagyon népszerű, a HTML-ben és a CSS-ben használt elnevezési szokás. Ezen egyezmény fő célja az teremt is CSS osztályok, amelyek félreérthetetlen és a fejlesztői társ számára leginformatívabb. Meg tudja csinálni jobban és gyorsabban megérteni a HTML és a CSS kapcsolatát egy adott projektben (gyakran első pillantásra).
Különböző módon írt CSS osztály összehasonlítása:
Az első esetben nem lehet azonnal meghatározni a következő szó végét és kezdetét. A másik kettőben a szavakat olvashatóan elválasztják kötőjelek. Azonban egyikük sem kínál részletesebb információkat arról, hogy mit jelent ez a meghatározás. Ez utóbbi esetben ismét lehet tévedésből használni egy ilyen osztályt, ezért kétértelműen definiált.
De hogy néz ki a BEM-ben?
Blokk egy új komponens, például egy menü legmagasabb absztrakciója:
. Ezt a blokkot szülőnek kell tekinteni. "Gyermekei", ill az elemeket a blokk neve után helyezzük el, és két aláhúzás választja el egymástól
. És a végén módosítók, manipuláljon egy blokkot vagy elemet hogy megváltoztathassunk egy adott témaosztályt vagy stílust anélkül, hogy változtatásokat okoznánk egy teljesen független modulban. Kész két kötőjel hozzáadásával a blokk vagy elem nevéhez, így
A mi meghatározás ennek nyilvántartása CSS osztályok minket akkor biztosítja első pillantásra információ a blokkban lévő elemekkel való munkáról "menü" amelyet úgy hívnak "Tétel" és megvan a módosítója "Látható".
A BEM-ben történő írás alapvető szabályai pontokban:
- Az osztályokat kis latin betűkkel írják. Tartalmazhatnak kötőjelet (szóelválasztás) vagy számot.
- A blokknevek névtereket határoznak meg az elemei és módosítói számára
- Az elemek nevei el vannak választva a blokktól két aláhúzás __
- A módosítók külön vannak egy blokktól vagy elemtől két kötőjel ––
Ha ezt a kódot egy másik fejlesztő írta, és nem ismerjük a projektet, akkor is jól kell gondolnunk, hogy mely osztályok felelősek miben és hogyan függnek egymástól. A fejlesztők akkor hozzon létre saját összetevőket és módosítsa a meglévő blokkokat vagy elemeket önmaga szerint más elem megváltoztatása nélkül a weboldalon, az osztályok egyértelműségének köszönhetően.
Valódi, összetettebb példa (bár talán nem a BEM miatt!) Jquery plugin photoSwipe: