Teoria dobrego HTML'a i CSS'a

Zanim zaczniesz działać z Fronthackiem, zapoznaj się z kilkoma regułami, na których został zbudowany. Te koncepty są ogólne i mogą być wykorzystywane gdzie indziej, Fronthack łączy je wszystkie w całość.

Sass

Sass jest najbardziej minimalistyczną składnią pisania CSS. Jest tak zwanym preprocessorem, czyli bardziej przyjaznym dla człowieka językiem wejściowym, który potem jest kompilowany do prawdziwego CSS’a. Preprocessory zapewniają między innymi zmienne, mixiny i funkcje, zbliżające pisanie CSS’ów do programowania.

BEM & SMACSS

Fronthack polega na BEM‘ie. Jest to podejście w w pisaniu styli CSS, a przede wszystkim konwencja nazywania klas. Upewni się, że BEM jest dla Ciebie zrozumiały zanim będziesz kontynuować. Jest świetnie opisany w tym artykule.

Fronthack również inspiruje się podejściem SMACSS (skrót on Simple, Modular Architecture for CSS). Ogólnie rzecz biorąc chodzi o podział interfejsu na komponenty. Małe moduły, będące jak klocki Lego, z których buduje się całość. Dodatkowo, klocki te rozróżnia się na 3 grupy - czyste tagi HTML, komponenty właściwe i komponenty poziomu layoutu. Taki podział znajdziesz właśnie w folderze Sass.

4 rodzaje klas i nie więcej

Rozszerzając powyższe, każda klasa CSS’owa należy do jednego z poniższych zbiorów:

  • Klasy komponentowe - a dokładnie nazwa, element, modyfikator lub zmiana stanu komponentu. Na przykład .dropdown, .vertical-nav__link, .list-item--condensed.
  • Klasy layoutowe - wszystkie elementy będące bardziej sekcją, które są zbyt ogólne, żeby być komponentem. Zawierają zazwyczaj stylowanie tła, marginesów, paddingów, flexboxowego layoutu. Wszystkie zaczynają się od przedrostka layout. Na przykład .layout-header, .layout-dark-section, .layout-footer.
  • Klasy pomocnicze - czasami pewne elementy wymagają tak mało stylowania, że nie opłaca się specjalnie tworzyć nowego komponentu. Jeżeli nie masz pewności, do czego kwalifikują się pewne style, stwórz sobie helper klasę. Na przykład .text-center, _.hidden-xs, _.clearfix.
  • Klasy kontenera - jedna klasa pomocnicza, a mianowicie .container, jest na tyle istotna, że zasługuje na wyróżnienie jej z powyższego zbioru. Jej zadaniem jest centrowanie zawartości w poziomie na szerszych rozdzielczościach, oraz zapewnianie bocznych marginesów na rozdzielczościach mobilnych. Czasami zachodzi potrzeba stworzenia dodatkowych kontenerów o innych szerokościach. Na przykład .container-wide, .container-narrow.

Nie dla grida!

HTML’owego grida możesz znać z Bootstrap’a. Pozwala zbudować responsywny layout za pomocą klas kolumnowych (.col-xs-12, .col.sm-6, .col-md-12). Nie rób tego! Definiuj layout za pomocą klas layoutowych. HTML odpowiada za warstwę struktury i treść. To CSS’a odpowiedzialnością jest wygląd, sposób wyświetlania. Po drugie, od kiedy mamy Flexbox’a i CSS’owego Grid’a_ _definiowanie layoutu w CSSie daje o wiele więcej możliwości. Nie wspominając już, że web designerzy rzadko kiedy swoimi projektami wstrzeliwują się w 12-kolumnowy grid. Poniżej przykład grida zdefiniowanego za pomocą flexboxa. Weźmy standardowy przykład głównej zawartości strony z paskiem bocznym o szerokości 300px:

HTML

<div class="layout-content">
  <div class="layout-content__sidebar"></div>
  <div class="layout-content__main"></div>
</div>

Sass

.layout-content
  display: flex

.layout-content__sidebar
  flex: 0 0 300px
  margin-right: 60px
  
.layout-content__main
  flex: 1

Flexbox to bardzo potężny sprzymierzeniec i warto się z nim zaprzyjaźnić.

Stylowanie mobile first

Czyli tak, aby domyślne własności styli obowiązywały dla smartfonów, a następne dla tabletów, desktopu itd. Rozwińmy powyższy przykład o responsywność, którą możemy uzyskać używając mixin’a +breakpoint, również znanego z Bootstrap’a. Domyślnie elementy będą wyświetlane jeden pod drugim. Na tabletach sidebar pojawi się z boku, a na desktopie będzie szerszy i z większym marginesem.

Sass

.layout-content
  +breakpoint(tablet)
    display: flex

.layout-content__sidebar
  +breakpoint(tablet)
    flex: 0 0 200px
    margin-right: 30px
  +breakpoint(desktop)
    flex: 0 0 300px
    margin-right: 60px

.layout-content__main
  +breakpoint(tablet)
    flex: 1


Improve this page