Bootstrap, dobre praktyki i własne style

pytanie zadane 27 września 2019 w HTML i CSS przez michh123 Bywalec (2,790 p.)

Witajcie!

Mam parę pytań dotyczących Bootstrap'a, którego obecnie się uczę.

Generalnie podoba mi się ten framework jeśli mam zrobić na szybko ładny szablon jakiejś strony/aplikacji z gotowych elementów, ale jeśli mam swój własny layout (gdzie większość styli elementów różni się zasadniczo od Bootstrapa) i muszę stylizować apkę/stronę z "pomocą" Bootstrapa to jest to dla mnie istny koszmar (i kusi mnie żeby zrobić to w CSS/SASS).

Mimo wszystko chciałbym się nauczyć Bootstrapa, ponieważ może mi się przydać w przyszłej pracy, a poza tym warto znać chociaż jeden framework CSS (moim skromnym zdaniem). Zacząłem więc stylizować aplikację o zasadniczo różnym od Bootstrapa wyglądzie i po paru dniach pracy mam kilka pytań odnośnie dobrych praktyk w Bootstrapie i własnych styli.

Czy jest sens korzystać ze wszystkich, potrzebnych do stylizacji elementu, klas Bootstrapa jeśli kod robi się bardzo długi? Np. klasy dodające margines, padding, manipulujące tekstem itp. Czy nie lepiej jest uwzględnić te style we własnym arkuszu, a w HTML dodać tylko najważniejsze klasy (np. row, col, d-flex, etc...)? Jeśli tak, to których klas powinniśmy używać, a które zastępować własnymi stylami (ogólnikowo)?
Bootstrap ma w swoim kodzie mnóstwo importantów i nie raz własne style przez to nie działają. Trzeba wtedy jeszcze bardziej wydłużyć kod HTML dodając kolejną klasę Bootstrapa, albo dodać important u siebie w stylach. Czy lepiej jest użyć important, mimo że jest to zła praktyka?
Czy prawdą jest, że dobrą praktyką jest umieszczanie (w kodzie HTML) własnych klas na początku albo na końcu? Np.:
```
<div class="wlasna-klasa col-sm-6 p-0 m-0 "></div>



<div class="col-sm-6 p-0 m-0 wlasna-klasa"></div>
```
Znacie może jakiś artykuł/książkę/stronę poświęconą dobrym praktykom i poruszającą kwestię czytelności kodu w Bootstrap?

Z góry dziękuję za odpowiedź!
Pozdrawiam.

1 odpowiedź

odpowiedź 27 września 2019 przez Comandeer Guru (601,590 p.)

Mimo wszystko chciałbym się nauczyć Bootstrapa

Tak szczerze, to bardziej przydatna byłaby umiejętność szybkiego wyszukiwania potrzebnych rzeczy w jego (i innych) dokumentacji. Nie ma za bardzo sensu uczyć się tego na pamięć.

Czy jest sens korzystać ze wszystkich, potrzebnych do stylizacji elementu, klas Bootstrapa jeśli kod robi się bardzo długi?

Rzeknę tak: ja bym używał wyłącznie swoich klas, opartych na konwencji nazewniczej z BEM, a style dostarczane przez Bootstrapa traktował jako mixiny do budowania własnych stylów. Ale to brzmi już raczej dość radykalnie.

Czy lepiej jest użyć important, mimo że jest to zła praktyka?

Tutaj nie ma dobrego rozwiązania. Osobiście prawdopodobnie użyłbym !important, ale to jest tak samo złe, jak stosowanie długich selektorów.

komentarz 27 września 2019 przez HaKIM Szeryf (87,590 p.)

Rzeknę tak: ja bym używał wyłącznie swoich klas, opartych na konwencji nazewniczej z BEM, a style dostarczane przez Bootstrapa traktował jako mixiny do budowania własnych stylów. Ale to brzmi już raczej dość radykalnie.

Ja tak zrobiłem w kilku pierdu-projektach. Problem jaki prędzej czy później mam z konwencją BEM to moje nazwy klas w pewnym momencie rozrastają się do nieakceptowalnych długości.

class="foobar__foo_bar__baz__auto-bus__frus__gruz__bruz__braz__gaz"

a nie daj może jeszcze specjalny modyfikator

class="foobar__foo_bar__baz__auto-bus__frus__gruz__bruz__braz__gaz foobar__foo_bar__baz__auto-bus__frus__gruz__bruz__braz__gaz--hollymolly"

komentarz 27 września 2019 przez Tomek Sochacki Ekspert (227,510 p.)

@Comandeer,

Rzeknę tak: ja bym używał wyłącznie swoich klas, opartych na konwencji nazewniczej z BEM, a style dostarczane przez Bootstrapa traktował jako mixiny do budowania własnych stylów.

dyskutowałbym z takim podejściem... Generalnie w apkach typowo dla użytkowników to nie korzystam z praktycznie żadnych zewnętrznych frameworków jak bootek, material itp. bo po prostu nie ma to sensu - zbyt dużo zmian trzeba by wprowadzać w stosunku do makiet przygotowanych przez UX'ów.

Jednakże robiłem już parę narzędzi wewnętrznych lub dla wybranej, wąskiej grupy userów gdzie mamy właśnie takie libki typu bootstrap (nawet w 2 czy 3 jest dokładnie ta libka). I tutaj raczej dobrze sprawdzało się to, że korzystaliśmy po prostu z tego wszystkiego co nam daje narzędzie, nawet jak UX wleciał z jakimś customowym rozwiązaniem to i tak po rozmowach praktycznie zawsze konczyło się na gotowcu. Jest to spoko, bo takie narzędzia często trzeba zrobić na szybko, gdzie i czas UX jest ograniczony, a wszelkie mieszanie narzędzi i robienie ich bardziej customowych w perspektywie czasu tylko utrudnia development.

Także ja raczej jestem zwolennikiem podejścia 0-1, czyli albo korzystasz tylko (lub prawie tylko) z gotowców frameworka css, albo robisz layout customowy i wtedy już dostosowujesz się do makiet od UXa. Jest to też lepsze o tyle, że nie ma potem zabawy i kombinowania z nadpisywaniem połowy klas bootstrapowych jak UX wjedzie z makietą całkowicie odmienną o stylu frameworka.

komentarz 27 września 2019 przez Comandeer Guru (601,590 p.)

@HaKIM,

W BEM jest ograniczenie do jednego poziomu zagłębienia. Jeśli potrzebujesz większej ich liczby, to znak, że masz za duże bloki i powinieneś stosować miksy.

@Tomek Sochacki, jeśli chodzi o Bootstrap, to fakt, jest on dość nieprzyjemny przy takim podejściu i tutaj rzeczywiście lepsze rezultaty można otrzymać idąc 100% w niego. Ale już przy Atomic CSS (np. TACHYONS) to wręcz aż się prosi o takie podejście. Inna rzecz, że BS ma dużo mixinów wbudowanych, które można wykorzystać bez potrzeby użerania się z pełnym stylowaniem BS-a.

komentarz 27 września 2019 przez HaKIM Szeryf (87,590 p.)
edycja 27 września 2019 przez HaKIM

<header class="header">
    <img class="logo">
    <form class="search-form">
        <input class="input">
        <button class="button"></button>
    </form>
    <ul class="lang-switcher">
        <li class="lang-switcher__item">
            <a class="lang-switcher__link" href="url">en</a>
        </li>
        <li class="lang-switcher__item">
            <a class="lang-switcher__link" href="url">ru</a>
        </li>
    </ul>
</header>

Z moim gówno podejściem to ten a w li wyglądąłby tak:

header__lang-switcher__item_link. To dość krótka nazwa jak sobie przypomnę że musiałem scrollować w prawo i lewo w IDE. :D

Strasznie się obawiałem, że mi się klasa powtórzy i będę szukał co się dzieje pół dnia, stąd wszystko takie zagnieżdżone.

komentarz 27 września 2019 przez michh123 Bywalec (2,790 p.)

Dziękuję za wszystkie odpowiedzi!

@Comandeer,

Rzeknę tak: ja bym używał wyłącznie swoich klas, opartych na konwencji nazewniczej z BEM, a style dostarczane przez Bootstrapa traktował jako mixiny do budowania własnych stylów. Ale to brzmi już raczej dość radykalnie

Fajne rozwiązanie (tym bardziej, że uczę się BEM)! Tylko co uwzględniłbyś w customowych stylach, a które klasy Bootstrapa były by mixami? :) Jakbyś to widział?