• 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

0 głosów
172 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 Mentor (457,620 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 Noemi Nałogowiec (41,300 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 Noemi Nałogowiec (41,300 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ź 91 wizyt
pytanie zadane 4 sierpnia 2017 w HTML i CSS przez Nicolaus Dyskutant (9,780 p.)
0 głosów
1 odpowiedź 72 wizyt
pytanie zadane 6 lutego w JavaScript, jQuery, AJAX przez Stoprocent Użytkownik (660 p.)
0 głosów
0 odpowiedzi 185 wizyt
pytanie zadane 26 października 2016 w HTML i CSS przez Nicolaus Dyskutant (9,780 p.)
Porady nie od parady
Pytania na temat serwisu SPOJ należy zadawać z odpowiednią kategorią dotyczącą tej strony.SPOJ

64,791 zapytań

111,250 odpowiedzi

233,951 komentarzy

46,683 pasjonatów

Przeglądających: 115
Pasjonatów: 0 Gości: 115

Motyw:

Akcja Pajacyk

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

Oto dwie polecane książki warte uwagi. Pełną listę znajdziesz tutaj.

...