wtorek
29
Sierpień
2017
Developers

Dobre praktyki Frontendowca..

..czyli jakich błędów nie powinien popełniać.

1. Nie używaj atrybutu style=”…” oraz wewnętrznego arkusza stylów <style type=”text/css”>…</style>

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

Chrome, Opera Firefox, Edge, Internet Explorer 10

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