css_guide.md

Bardzo krótki poradnik pisania dobrego kodu HTML/CSS

Założenia

Kod HTML/CSS napisany w poprawny sposób powinnien być:

• semantyczny
• zorientowany na komponenty
• łatwy w modyfikacji

Przykłady

Pomimo, że powyższe reguły brzmią jasno i prosto, ich wykorzystanie w stosunku do kodu HTML/CSS nie jest oczywiste, dlatego też zamieszczam kilka przykładów ich zastosowania. W poniższych przykładach będziemy tworzyć prostą stronę płatności.

I. Wygląd strony powinien być zdefiniowany tylko w plikach CSS, a nie w HTML. Powinniśmy unikać klas określających wygląd bezpośrednio w kodzie HTML.

Zamiast:

<div class="row">
  <div class="col-8"></div>
  <div class="col-4"></div>
</div>

powinno być:

<div class="payment">
  <div class="payment__form"></div>
  <div class="payment__summary"></div>
</div>

Z wykorzystania tej prostej techniki płynie kilka istotnych zalet:

• od razu z kodu HTML widać z jaką stroną mamy do czynienia,
• jeżeli będziemy chcieli zmienić wygląd (np. szerokość kolumn, lub zrezygnować w ogóle z grid'a w tym miejsu) będziemy musieli zedytować plik CSS, a nie HTML - tak jak wspomniałęm, cały "wygląd" strony powinien być w pliku CSS

II. Powinniśmy unikać przypisywania styli do elementów html'a oraz ID, a korzystać zawsze z klas.

Zamiast:

.payments div table tr strong {
   color: red;
 }

powinno być:

.payments__summary--alert {
  color: red;
}

Zalety takiego rozwiązania:

• znowu od razu widać czego dotyczy dana klasa
• jesteśmy odporni na zmianę struktury HTML
• nie modyfikujemy niechcący innych elementów
• utrzymujemy CSS specificity na niskim poziomie i stałym poziomie

Jeżli jednak naprawdę dany styl aplikuje się do wszystkich elementów (np do linków), dopuszczalne jest nadpisanie styli dla elementu <a>.

III. Powinniśmy unikać elementów HTML które nie wnoszą nic do struktury

Zamiast:

<div class="payment">
</div>
<div class="clearfix">

powinno być:

.payment:after {
  content:"";
  display:table;
  clear:both;
}

<div class="payment">
</div>

Technikalia

Powyższe założenia i przykłady wykluczają użycie czystego CSS w rozsądny sposób. Musimy skorzystać z preprocesora styli, np Sass czy Less.

Zamiast kopiować za każdym razem style, np. definijące kolumnę:

.payment__summary {
  width: 40%;
  float: left;
  margin-left: 10px;
  (...)
}

powinniśmy użyć np. preprocesora Sass z frameworkiem Foundation:

.payment__summary {
  @include grid-column(4);
}

Dla czytelności polecam użycie składni BEM.

Podsumowanie

Wszystkie wspomniane techniki mają ułatwić pracę z kodem CSS/HTML. Zarówno jeżeli chodzi o dodawanie nowych elementów, jak i edycję już istniejących. Warto pamiętać jednak, że zasady są po to aby je łamać. Jeżeli w danym projekcie złamanie jednej z reguł ułatwi nam pracę lub poprawi czytelność kodu, nie powinniśmy się długo zastanawiać.

Linki

Sugerowane narzędzia i metodologie:

• BEM
• Foundation
• Sass

Tutaj kilka linków do innych metodologi, niektóe są "dość" skomplikowane, ale prawie wszystkie mają wspólny mianownik:

• OOCSS
• SMACSS
• DoCSSa