• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Metodologia BEM vs preprocesory css, struktura plików projektu

VPS Starter Arubacloud
0 głosów
428 wizyt
pytanie zadane 7 października 2018 w HTML i CSS przez Biay Początkujący (420 p.)
Cześć,

Mam kilka pytań odnośnie tej metodologi:

1.Czy używanie tej metodologii ma sens, gdy mamy preprocesory, które pozwalają nam organizować wszystkie elementy w kilku {} + oferują masę możliwości jak dodatkowe funkcje czy zmienne?

2.Tworząc projekt według struktury podanej na stronie BEM otrzymujemy masę plików css i js dla bloków, elementów i modyfikatorów. Czy te wszystkie pliki się podpina do html czy może pod koniec pracy grupuje się wszystkie pliki do np głównych bloków?

3. Zakładając że nie korzystamy z preprocesorów, czy obecnie jest nadal stosowana?

Byłbym bardzo wdzieczny, gdyby wypowiedziały się osoby tworzące strony na co dzień.

2 odpowiedzi

+2 głosów
odpowiedź 7 października 2018 przez Comandeer Guru (599,730 p.)

1. Preprocesor rozwiązuje całkiem inne problemy niż BEM. Preprocesor pozwala na szybszą pracę z CSS, a BEM dotyka każdego aspektu tworzenia strony. Dodatkowo BEM rozwiązuje problemy specyficzności stylów dzięki wymuszeniu korzystania z konwencji nazewniczej – coś, czego preprocesor (z samej swojej natury) zrobić nie może.

2. Wszystko zależy od build toola, który wykorzystujemy. Wszystkie te pliki powinny ostatecznie trafić do sensownie podzielonych bundle'i.

3. Tak. Te dwie rzeczy są całkowicie rozdzielne, bo dotyczą czegoś całkowicie innego.

komentarz 7 października 2018 przez Biay Początkujący (420 p.)
Dzięki za odpowiedź i za link bardzo mi pomogłeś.
+1 głos
odpowiedź 7 października 2018 przez imklau Nałogowiec (42,090 p.)

1. A dlaczego ma nie mieć sensu? Co dla Ciebie oznacza organizowanie wszystkich elementów w kilku {}? Chodzi Ci o zagnieżdżanie? Bez BEM, czy stosując inną metodologię chciałbyś mieć np w pliku SCSS coś takiego:
 

.navbar {
  ...
  
  .menu {
  ...
  }

  .button {
  ...
  }
}

?
Bo takie podejście nie jest zbyt mądre, a dość często to widzę u początkujących.
Dosłownie 3 - 5 plików różnych plików Sass i w nich są powrzucane przeróżne elementy, bloki itd i dość ciężko jest w takim kodzie się odnaleźć.
Ale można stworzyć sobie np plik button.scss, który według BEM byłby blokiem, a w środku coś w stylu:
 

.button {
  position: relative;
  display: inline-flex;
  vertical-align: middle;
  justify-content: space-between;
  align-items: center;
  padding: 1.1em 2.8em;
  border: 0;
  font-weight: 500;
  font-size: .95rem;
  line-height: inherit;
  cursor: pointer;
  transition: .3s;

  &__icon {
    display: flex;
    color: get-color(white);
  }

  &--wider {
    padding-left: 3.2em;
    padding-right: 3.2em;
  }

  &--expanded {
    width: 100%;
  }

  &--primary {
    background-color: get-color(primary);
    color: get-color(white);
  }
}

To jest po części skopiowane z mojego obecnego projektu.
Tu masz i elementy tego bloku (button__icon) i jego modyfikatory. Nic więcej to buttona nie wrzucasz.
Ja akurat stosuje w pracy coś takiego jak ITCSS i według tego podejścia tworzę strukturę plików Sass, a taki button ląduje w komponentach, gdzie często mam ich kilkanaście, albo i kilkadziesiąt. Wbrew pozorom to nie utrudnia pracy, a mocno ją ułatwia.
Później pamiętam, że mam taki komponent i nawet nie szukam tego między plikami, a w Atomie akurat daje cmd + p, zaczynam wpisywać "but...", co od razu daje mi plik (pod warunkiem, że tai istnieje oczywiście). To samo z innymi plikami.

2. Myślę, że podając wyżej ITCSS rozwiązałam Twój problem. Plików Sass możesz mieć nawet i 100 różnych - nawet będzie Ci się łatwiej w nich odnaleźć :) ale podpinasz sobie je wszystkie pod jeden plik, np main.scss i to on jest "zamieniany" w css i ten właśnie jeden plik .css jest podpinany pod HTML.

3. Tak :)

komentarz 7 października 2018 przez Biay Początkujący (420 p.)
Dzięki za odpowiedź, napewno zajrzę czym jest ITCSS jak już skończę z BEM.
komentarz 7 października 2018 przez imklau Nałogowiec (42,090 p.)
To nie jest coś mega dużego, nie musisz kończyć nauki BEM, żeby zacząć używać ITCSS. Na to wystarczy, że poświęcisz 10 min, bo to tylko jeden z wielu sposobów na ogarnięcie projektu.

Powodzenia :)

Podobne pytania

0 głosów
1 odpowiedź 163 wizyt
pytanie zadane 4 sierpnia 2017 w HTML i CSS przez Nicolaus Dyskutant (9,740 p.)
0 głosów
0 odpowiedzi 303 wizyt
pytanie zadane 26 października 2016 w HTML i CSS przez Nicolaus Dyskutant (9,740 p.)
0 głosów
1 odpowiedź 162 wizyt
pytanie zadane 6 lutego 2019 w JavaScript przez Stoprocent Użytkownik (930 p.)

92,453 zapytań

141,262 odpowiedzi

319,086 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...