Kod HTML/CSS napisany w poprawny sposób powinnien być:
- semantyczny
- zorientowany na komponenty
- łatwy w modyfikacji
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>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.
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ć.
Sugerowane narzędzia i metodologie:
Tutaj kilka linków do innych metodologi, niektóe są "dość" skomplikowane, ale prawie wszystkie mają wspólny mianownik: