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

15. Sprawdzaj poprawność kodu za pomocą walidatora W3C

https://jigsaw.w3.org/css-validator/

FacebookTwitterGoogle+LinkedIn