abstrahując od BEM, to DIV.menu
nie jest dobrym selektorem, ponieważ uzależniamy się od tego, że coś będzie siedziało w elemencie div
. Czyli pewnego dnia zamienisz* div na jakikolwiek inny element i rozjedzie ci się całe stylowanie. Chyba, że faktycznie chcesz, żeby reguła się odnosiła tylko wtedy, kiedy coś jest tylko i wyłącznie w div
, ale to są rzadkie przypadki. W szczególności w tym przypadku to div
na początku jest po prostu niepotrzebne.
A już kod tego typu:
DIV.menu > DIV {}
zwykle jest po prostu bardzo ryzykowny - chodzi mi teraz o tę część > DIV
- czyli każde bezpośrednio dziecko, które jest divem. Strasznie to obniża elastyczność i może prowadzić do niespodziewanych efektów - bo wtedy każdy div, jaki dodajesz do pojemnika będzie miał dany styl, nawet jeśli nie powinien. Plus to, że nie możesz dodać niczego innego niż <div>
, żeby zachować stylowanie.
Ogólnie stylowanie po elementach jest słabe, chyba, że robisz własną bibliotekę typu Bootstrap (albo coś innego, generycznego) albo modyfikujesz istniejącą.
Np. takie reguły jeszcze bym zrozumiał:
div {
font-family: sans-serif;
}
button {
border-radius: 5px;
border: none;
background: orange
}
czyli takie ogólne stylowanie, "temat" przewodni.
*a zwykle tak jest. Kodu nie pisze się na wieczność, ale w realnych projektach ciągle się coś może zmienić... I coś co było divem, stanie się ul, li, span, article, section albo my-fancy-whatever czy dupa-dupa).