Dobre praktyki Frontendowca
..czyli jakich błędów nie powinien popełniać w swojej codziennej pracy.
1. Nie używaj atrybutu style="..." oraz wewnętrznego arkusza stylów <style type="text/css">...</style>
<span style="font-weight: 400;"> powoduje to nie tylko dłuższe ładowanie strony, ale i problemy z wprowadzaniem zmian. Wszystkie style powinny być umieszczane w osobnym pliku .css
<link rel="Stylesheet" type="text/css" href="style.css" />
2. Unikaj używania deklaracji !important
Zauważyłam, że jest to nieuniknione jeśli stosujemy media queries z regułami od … do, np.:
@media (min-width: 500px) and (max-width: 1000px)
dlatego też staram się tego unikać i responsywność strony ustawiać tylko do jakiejś szerokości, dzięki temu nie ma potrzeby używania deklaracji !important, np.:
@media (max-width: 1200px)
3. Im mniej plików tym lepiej
W projektach często używamy języka arkuszy stylów .less i nie ograniczamy się tylko do jednego pliku. Dzięki temu przy dużych projektach łatwiej wyszukać daną regułę. Wszystkie pliki są konwertowane do jednego pliku .css
4. Skracaj zapis w regułach stylów
ŹLE
margin-top: 10px; margin-bottom: 10px; margin-left: 10px; margin-right: 10px;
DOBRZE
margin: 10px;
ŹLE
margin-top: 0px;
DOBRZE
margin-top: 0;
ŹLE
div.klasa
DOBRZE
.klasa;
5. Minimalizuj liczbę identyfikatorów i klas CSS
ŹLE
a.przyklad, b.przyklad, em.przyklad, i.przyklad, small.przyklad, span.przyklad, strong.przyklad {
DOBRZE
.przyklad p {
.przyklad p em {
6. Ustal w jednym miejscu globalne style formatowania tekstu
Najlepiej użyć do tego selektora body, dzięki dziedziczeniu styl przeniesie się na pozostałe elementy dokumentu.
body {
font-size: 12px;
color: #000;
font-family: Arial,Helvetica,sans-serif;
background-color: #fff;
}
7. Jednostka rozmiaru tekstu
Na ekranie najkorzystniej jest używać jednostki px, na wydruku pt
8. Rodzaj czcionki
Rodzaj czcionki zawsze kończ podając nazwę rodziny ogólnej, np.:
font-family: Arial, Helvetica, Verdana, sans-serif;
Kolor czcionki powinien kontrastować z tłem, a jej wielkość powinna być odpowiednia, aby test był czytelny.
9. Odnośniki
Linki umieszczone w treści artykułu powinny być wyróżnione ze zmienionym kursorem myszki.
10. Optymalizacja obrazów
CSS Sprites jest techniką łączenia wielu obrazków w jeden, których wyświetlanie następuje poprzez odpowiednie wypozycjonowanie obrazu tła. Wbrew temu co mogłaby wskazywać nazwa, nie są to małe obrazki, lecz jeden duży złożony wielu mniejszych.
11. Używaj spójnych nazw klas i identyfikatorów
ŹLE
div.czerwony_tekst {
DOBRZE
div.container {
12. Używaj jednolitego sposobu formatowania reguł
SPOSÓB I
html, body {
color: black;
background-color: white;
}
SPOSÓB II
html, body
{
color: black;
background-color: white;
}
SPOSÓB III
html, body { color: black; background-color: white; }
13. Sprawdzaj poprawność wyświetlania się strony w popularnych przeglądarkach
Do sprawdzenia zawsze:
- Chrome,
- Opera Firefox,
- Edge,
- Internet Explorer 10
- Safari
14. Sprawdzaj poprawność wyświetlania się strony na różnych rozdzielczościach ekranu
Polecam w tym celu wykorzystać dodatki do przeglądarki np. dla Chrome Viewport Resizer