W ramach serii na temat metodyk CSS mamy już omówione OOCSS czyli Object Oriented CSS oraz BEM co jest skrótem od Block - Element - Modifier. Teraz czas na dalszy ciąg mojej serii - omówię dziś bowiem metodykę SMACSS!

Co to jest SMACSS?

Nazwa SMACSS (wymawia się “smaks”) pochodzi od angielskiego: “Scalable and Modular Architecture for CSS”. Sądząc więc po nazwie, metodyka stara się robić to samo co pozostałe dotychczas opisane: czyni CSS modularnym i skalowalnym

Jak można przeczytać na stronie smacss.com , która jest głównym źródłem wiedzy na temat tego podejścia, metodykę tę należy traktować jako “style guide”. Wprowadza ono podział stylów CSS na pięć grup (cztery + jedna opcjonalna) pozwalających lepiej kategoryzować style w zależności od tego, czego dotyczą. Ma to pozwolić na definiowanie lepszej struktury dokumentów CSS . Poniżej przedstawiam te grupy wraz z opisem, czego dotyczą.

Style bazowe

Ta grupa stylów odpowiada za wartości domyślne. Wpadają do niej wszystkie style odpowiedzialne za domyślny wygląd elementów h1 - h6, paragrafów (fonty, marginesy) itp. Oprócz tego, do grupy tej zaliczamy też style odpowiedzialne za różnego rodzaju “resety”. Ogólnie rzecz biorąc, style bazowe mówią: elementy te mają wyglądać właśnie tak, gdziekolwiek się nie pojawią na stronie.

Poniżej przedstawiam przykłady stylów bazowych:

html, body { margin: 0; paddin: 0; } /* reset */
p { font-family: sans-serif; font-size: 14px; }
h1,h2,h3,h4,h5,h6 { font-family: serif; font-weight: bold; }
h1 { font-size: 26px; }
h2 { font-size: 24px; }
h3 { font-size: 22px; }
h4 { font-size: 20px; }
h5 { font-size: 18px; }
h6 { font-size: 16px; }

Więcej na temat tej grupy stylów przeczytasz na tej stronie.

Style layoutu

Praktycznie w każdej stronie internetowej jesteśmy w stanie wyróżnić pewne kontenery, w których umieszczamy specyficzny rodzaj treści. Dla przykładu, kontenerami takimi mogą być: nagłówek strony, stopka, “sidebar” czy kontener na treść. Grupa stylów layoutu odpowiada właśnie za wygląd tego typu kontenerów. A właściwie to nie do końca za wygląd… Raczej za to w jaki sposób definiują układ strony - to w tej grupie definiuje się na przykład, wszelkiego rodzaju systemy “grid” itp.

Poniżej przykład grupy stylów layoutu:

.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
}

.content {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

Więcej o stylach layoutu przeczytasz na tej stronie.

Moduły

Moduły w SMACSS to niezależne, re-używalne bloki kodu HTML. Myślę, że można je porównać z blokami w BEM. Znajdują się one zwykle wewnątrz, wspomnianych przy stylach layoutu, kontenerach. Modułem może więc być na przykład menu znajdujące się w nagłówku lub “sidebarze”, artykuł w kontenerze “content” itd.

Każdy moduł powinien być kompletnie niezależny od pozostałych modułów. Powinien on też działać tak samo w każdym kontenerze, w którym się znalazł. Oznacza to, że nie należy tworzyć stylów uzależnionych od kontenera-rodzica. Moduły mogą też znajdować się wewnątrz innych modułów.

Poniżej przykład stylów dla modułu menu:

.menu {
  background: #fff;
}

.menu h1 {
  font-family: "Oswald", serif;
}

.menu .menu-item {
  border-bottom: 1px solid #000;
}

Tutaj jedna uwaga: o ile nadawanie stylów bezpośrednio dla elementów jest dozwolone (w powyższym przykładzie .menu h1) to zaleca się aby zamiast tego korzystać jednak z klas. Czyli dla powyższego przypadku, kod HTML musiałby wyglądać następująco:

<div class="menu">
  <h1 class="menu-header">Header</h1>
</div>

I wtedy oczywiście styl będzie wyglądać tak:

.menu .menu-header {
  font-family: "Oswald", serif;
}

Więcej na temat modułów przeczytasz na tej stronie.

Style stanu

Stan to taki styl, który w pewien sposób modyfikuje ogólny styl modułu lub layoutu w zależności od sytuacji. Dla przykładu, stylem stanu jest klasa is-active ale też pseudo-klasa :hover.

Style stanu nadawane są zwykle elementowi, który posiada już jakiś styl modułu lub layoutu (nie jest to jednak regułą):

<div class="menu is-expanded">
  ...
</div>

Poniżej kilka przykładów stylów stanu:

.is-active {
  color: #000;
}

.is-error {
  color: red;
  outline: 1px solid red;
}

.is-hidden {
  display: none;
}

Style te często powiązane są z kodem JavaScript, który dynamicznie nadaje te klasy w zależności od zdarzeń na stronie. Na stronie smacss.com, można przeczytać, że dla tego rodzaju stylów dozwolone jest, a wręcz zalecane użycie !important (sic!)…

Więcej na temat stylów stanu przeczytasz na tej stronie.

Style tematu (opcjonalne)

Jest to grupa opcjonalna ponieważ, nie zawsze jest potrzeba jej wykorzystania w naszych projektach… Generalnie można powiedzieć, że są to takie style, które nadpisują moduły zmieniając jedynie kolory i tło. Mogą one być przydatne jedynie na takich stronach, które wymagają możliwości wyboru tematu (schematu kolorów).

Myślę, że nie ma sensu się nad tą grupą bardziej rozwodzić… Jeśli chcesz, więcej na temat stylów tematu znajdziesz na tej stronie.

Nazewnictwo

Metodyka SMACSS nie wprowadza tak jak BEM jakiejś bardzo wyrafinowanej konwencji nazewniczej. Generalnie można to sprowadzić to tego, że zaleca się po prostu nadawać nazwy klasom modułów, bez żadnych prefiksów, sufiksów itp. Poza tym, klasy layoutu poprzedzamy prefiksem l-, a klasy stanu prefixem is-. Poniżej przykład:

.menu { ... } /* "menu" module */
.menu.is-active { ... } /* "active" state of "menu" */
.l-sidebar { ... } /* layout for sidebar */

Jak widzisz, nie ma tu raczej niczego wymyślnego… Zwróć jedynie uwagę na drugą linię. Jak wspomniałem, style stanu nadawane są często elementom posiadającym już jakąś klasę modułu lub layoutu. W takim przypadku styl taki definiujemy w przedstawiony sposób.

Podsumowanie

Moim skromnym zdaniem, w porównaniu do BEM, metodyka SMACSS jest nieco mniej precyzyjna. Przedstawiony podział jest niby jasny, jednak nie ma tutaj sztywnych zasad dotyczących selektorów-dzieci, a struktura CSS nie musi być płaska. Podejrzewam więc, że w większych projektach kończy się to mimo wszystko bałaganem… Osobiście nie mam z tą metodyką dużego doświadczenia. Chętnie więc przeczytam Twoją opinię w komentarzu, jeśli z nią pracowałeś i masz na jej temat wyrobione zdanie!


Wpis ten jest częścią serii na temat metodyk CSS - poniżej linki do wszystkich części serii: