czy zawsze warto trzymać się zasad BEM ?

Question

Witam!

mam taką sytuację

.rodzic-blok__dziecko-element-1 {

// dużo stylów takich samych jak w elemencie 2

// jeden inny styl
}

.rodzic-blok__dziecko-element-2 {

// dużo stylów takich samych jak w elemencie 1

//jeden inny styl
}

czy warto w tej sytuacji trzymać się zasad BEM, czy może lepiej zrobić krótszy kod :

.rodzic-blok > div {
// wspólne style
}

.rodzic-blok__dziecko-element-1 {
// 1 inny styl
}

.rodzic-blok__dziecko-element-2 {
// 1 inny styl
}

??

 

w krótszym kodzie dostrzegam problem, że chcąc nadpisać któryś ze wspólnych stylów muszę użyć important ponieważ

.klasa {}

jest mniej specyficzny niż 

.klasa > div {}

 

Answer 1

Czy warto trzymać się zasad. TAK.
Czy warto używać zasad BEM? To zależy.

Jeżeli obie klasy mają takie same style to zakładam, że są prawie tym samym (np. section) ale odróżniają się czymś (np. jeden z nich ma mieć zielone tło) . Wtedy możesz użyć modyfikatora.

Co ty na takie coś:

.rodzic-blok__dziecko-element-1,
.rodzic-blok__dziecko-element-2 {
    // wspolne style
}
 
.rodzic-blok__dziecko-element-1 {
    // osobne style
}

.rodzic-blok__dziecko-element-2 {
    // osobne style
}

 

Comments

wbrew temu co napisałeś, to w kodzie nie użyłeś modyfikatora...

Acz IMO to świetny pomysł, aż dziwne, że sam na to nie wpadłem. Użyję modyfikatora i zrobię to tak: 

.rodzic-blok__dziecko-element {
    // wspolne style
}
  
.rodzic-blok__dziecko-element_1 {
    // osobne style
}
 
.rodzic-blok__dziecko-element_2 {
    // osobne style
}

<div class="rodzic-blok">
<div class="rodzic-blok__dziecko-element rodzic-blok__dziecko-element_1">

</div>
<div class="rodzic-blok__dziecko-element rodzic-blok__dziecko-element_2">

</div>
</div>

 

---

Nie użyłem modyfikatora w kodzie, ponieważ myślałem, że oczywiste jest jak go użyć.
Kod służył do przedstawienia innego sposobu (drugiego) jak można ominąć problem.

---

Rozumiem. dowolny twój sposób jest lepszy od dowolnego mojego !