Ostatnia aktualizacja 20 grudnia, 2023
BEM to popularna metodologia nazywania klas CSS, która ułatwia zarządzanie kodem CSS w dużych projektach. Jest to podejście, które pomaga w tworzeniu skalowalnych i łatwych do utrzymania arkuszy stylów. Chodzi w niej o nadanie konkretnych, zrozumiałych i jednoznacznych nazw klasom. Dzięki temu zarówno początkujący, jak i doświadczeni programiści mogą łatwiej poruszać się po projekcie, a także unikać konfliktów i nadmiarowego kodu CSS.
Co to jest BEM?
BEM (Block Element Modifier) to metodologia, która została opracowana przez zespół Yandex. Głównym celem BEM jest pomoc w organizacji kodu CSS poprzez wykorzystanie spójnej konwencji nazywania klas. Metodologia ta dzieli interfejs użytkownika na niezależne bloki, co ułatwia ponowne wykorzystanie kodu i jego utrzymanie.
Struktura BEM w CSS
Struktura BEM składa się z trzech głównych części:
- Block: Jest to najwyższy poziom abstrakcji w BEM i reprezentuje samodzielną funkcjonalność, która może być ponownie wykorzystana. Na przykład:
.button. - Element: Elementy są częściami bloku i nie mogą być używane oddzielnie od niego. Elementy tworzy się, dodając dwa podkreślenia po nazwie bloku, np.:
.button__text. - Modifier: Modyfikatory wskazują na różne stany lub wersje bloku lub elementu. Tworzy się je, dodając dwa myślniki po nazwie bloku lub elementu, na przykład:
.button--large.
Przykłady kodu BEM w CSS
Poniżej kilka przykładów, jak można stosować BEM w praktyce:
Prosty blok:
.button {
background-color: blue;
color: white;
padding: 10px 20px;
}Klasa .button reprezentuje samodzielny blok, który definiuje styl przycisku.
Element w bloku:
.button__text {
font-size: 16px;
}.button__text jest elementem bloku .button i określa styl tekstu w przycisku.
Modyfikator bloku:
.button--large {
padding: 15px 30px;
font-size: 18px;
}.button--large jest modyfikatorem bloku .button, który dostosowuje przycisk do większej wersji.
Korzyści z używania BEM
- Łatwość w utrzymaniu: BEM pomaga w utrzymaniu porządku w arkuszach stylów, szczególnie w dużych projektach.
- Ponowne wykorzystanie kodu: Bloki i elementy można łatwo używać w różnych częściach projektu.
- Unikanie konfliktów CSS: Dzięki unikalnym nazwom klas, ryzyko konfliktów znacznie się zmniejsza.
- Czytelność: Kod jest bardziej czytelny i zrozumiały, co ułatwia współpracę w zespole.
Metodologia BEM znacznie ułatwia zarządzanie arkuszami stylów CSS, czyniąc kod bardziej modularnym, czytelnym i łatwiejszym w utrzymaniu. Jest to szczególnie korzystne w dużych projektach, gdzie utrzymanie spójności i organizacji kodu może być wyzwaniem.
Czytaj także:
