W programowaniu od samego początku warto dbać o dobre praktyki. Jednak czasami w trakcie nauki można przeoczyć lub zbagatelizować pewne kwestie. Stąd u początkujących Frontend Developerów pojawiają się błędy w kodzie. Razem z Mariuszem Bugajskim, autorem bloga blog.bugajsky.pl i zwycięzcą konkursu Daj się Poznać 2017, zdecydowaliśmy się napisać serię postów o tej tematyce, aby pomóc w eliminacji takich błędów.
Pamiętaj:
- Unikaj nadużywania id
- Unikaj nadawania stylów elementom w HTML
- Nie ładuj wszystkich skryptów w sekcji head dokumentu
- Nadawaj nazwy w języku angielskim
- Zmieniaj nazwy klasy/id/funkcji we wszystkich miejscach gdzie są używane
- Uważaj na ścieżki do plików
- Pamiętaj o semantyce
- Strzeż się literówek
- Pamiętaj o initial-scale=1 w meta tagu viewport
- Unikaj niepotrzebnego zagnieżdżania i nadużywania tagów div
- Bonus 😉
Poniżej znajdziesz wyjaśnienie do każdego z tych podpunktów.
1. Unikaj nadużywania id
Nie wszystkie elementy w Twoim kodzie HTML muszą mieć id. Nadanie id powinno być przemyślane i mieć swój konkretny cel. Jeśli nie zamierzasz stylować danego elementu używając id, bądź manipulować nim poprzez użycie JavaScript, nie jest ono potrzebne. Pamiętaj również, że id jest unikatowe – tylko jeden element na stronie może mieć dane id.
Można np. używać pseudoselektorów (tj. first-child), które umożliwiają wybieranie elementów bez nadawania im klasy czy id.
See the Pen Good example of naming by SowaProgramuje (@sowaProgramuje) on CodePen.
Tutaj stylujemy bezpośrednie dzieci elementu o klasie .menu oraz korzystamy z pseudoselektora, dzięki któremu nie musimy stylować elementu przez id.
2. Unikaj nadawania stylów elementom w HTML
Pamiętaj, że HTML jest językiem do opisywania struktury, dlatego unikaj dodawania stylów na poszczególnych elementach za pomocą atrybutu <style> (style inline). Najlepiej zapisywać style w jednej regule w CSS.
Dlaczego należy tak robić?
Ponieważ jest to antypattern, czyli łamanie podstawowych założeń. W razie jakiś problemów z kodem będzie Ci dużo łatwiej go debugować, jeśli style będą tylko w CSSie. Nie będziesz musieć przeszukiwać dwóch różnych plików lub co gorsza nadpisywać kodu. To prowadzi do bałaganu, a tego każdy Frotend Developer powinien unikać jak ognia.
Czasami bywa tak, że manipulujemy kodem używając do tego JavaScript. Na przykład po kliknięciu na button zmieni on kolor z czerwonego na niebieski. W tym przypadku najlepiej jest nadać elementowi klasę, która będzie nadawała mu dane styl.
Używając jQuery i metody .css() nadajemy atrybut w HTML
See the Pen Change button color jQuery by SowaProgramuje (@sowaProgramuje) on CodePen.
Używając metody .addClass() nie dodajemy stylów inline tylko klasę
See the Pen NgYeXR by SowaProgramuje (@sowaProgramuje) on CodePen.
3. Nie ładuj wszystkich skryptów w sekcji head dokumentu
Jeśli nie potrzebujesz, aby kod JavaScript był ładowany w sekcji head, należy umieścić go przed tagiem zamykającym body. Wynika to z tego, że skrypty ładują się synchronicznie, czyli jeśli masz przykładowo 5 różnych skryptów które ładujesz w sekcji head to muszą się one w całości pobrać zanim w ogóle dojdzie do budowania DOM, co znacznie opóźni ładowanie strony internetowej. Dlatego jeśli nie potrzebujesz, aby skrypt odpalił się przed załadowaniem DOM umieszczaj go przed </body>.
4. Nadawaj nazwy w języku angielskim
W programowaniu bardzo duży nacisk stawia się na uniwersalność kodu. Stąd nadawanie nazw klas, funkcji itd. w innym języku niż angielski może przysporzyć problemy. Wyobraź sobie co by było, gdybyś trafił / trafiła do projektu, w którym nazwy pisane są w języku Swahili. Mogłoby być dość ciężko ze zrozumieniem co w danym kodzie się dzieje. Dlatego pamiętaj, używaj języka angielskiego, obecnie jest to standard w tej branży i tego się trzymajmy. 😉 Więcej o nadawaniu nazw pisałam tutaj.
5. Zmieniaj nazwy klasy/id/funkcji we wszystkich miejscach gdzie są używane
Twój kod nie działa, a chwilę wcześniej zmieniłeś / zmieniłaś klasę bądź id jakiegoś elementu lub nazwę funkcji? Istnieje spore prawdopodobieństwo, że nazwa nie została uaktualniona wszystkich miejscach, w których jest używana. Jeśli chcesz zmienić nazwę – użyj wyszukiwania we wszystkich plikach i zastąp konkretną nazwę.
6. Uważaj na ścieżki do plików
Nie wyświetla się jakaś grafika w Twoim projekcie? A może nie ładują Ci się style? Pierwsza rzecz jaką należy sprawdzić w takiej sytuacji to ścieżka do pliku, którą podałeś/podałaś. Sprawdź też czy nie zrobiłeś literówki w nazwie pliku lub folderu, oraz czy rozszerzenie pliku się zgadza np.: pułapką jest .jpg oraz .jpeg.
<img src=”heroimage.jpg”> – w przypadku, gdy plik heroimage.jpg znajduje się w tym samym folderze co dany plik HTML
<img src=”folderName/heroimage.jpg”> – w przypadku, gdy heroimage.jpg w podfolderze folderu, w którym jest plik HTML
<img src=”/folderName/heroimage.jpg”> – w przypadku, gdy heroimage.jpg jest w rootcie
<img src=”../heroimage.jpg”> – w przypadku, gdy heroimage.jpg poziom wyżej (gdy musisz się cofnąć)
7. Pamiętaj o semantyce
Semantyka to dostosowanie tagów w htmlu do tego czym są dane elementy na stronie tj. jeśli chcesz zrobić listę używaj tagu <ul> bądź <ol> a nie <p>.
To nie jest semantyczny kod:
See the Pen Non semantic code by SowaProgramuje (@sowaProgramuje) on CodePen.
To jest semantyczny kod:
See the Pen Example of semantic code by SowaProgramuje (@sowaProgramuje) on CodePen.
To nie zawsze jest takie oczywiste np.: jeśli tworzymy menu to również używajmy listy, a nie divów i paragrafów. Tak samo jeśli chcemy opisać input to używaj tagu <label> a nie <p>, ponieważ <label> jest stworzony właśnie do tego.
Nie nadużywaj tagu <h1>, jest zarezerwowany dla najważniejszych treści na stronie np. : tytuł artykułu.
8. Strzeż się literówek
Literówki to kolejny powód dla którego Twój kod może nie działać. Zanim poprosisz o pomoc starszego programistę upewnij się, że dobrze przepisałeś nazwę klasy, funkcji czy jakiegoś atrybutu. Mi osobiście kilka razy zdarzyło się zamiast src=” ” napisać scr=” ” i potem się bardzo dziwiłam, że zdjęcie się nie ładowało.
Jak uniknąć literówek?
- Korzystaj z wtyczek do edytorów, które automatycznie podpowiadają konkretne własności, wartości, nazwy metod i funkcji.
- Kopiuj nazwy klas, id – w ten sposób unikniesz niepożądanych problemów
9. Pamiętaj o initial-scale=1 w meta tagu viewport
Twoja strona nie jest responsywna pomimo, że dodałeś media queries? Upewnij się, że w sekcji head dokumentu masz meta tag:
<meta name=”viewport”, content=”initial-scale=1.0”, content=”width=device-width” >
Dlaczego jest to potrzebne?
To powoduje, że strona skaluję się do takiej szerokości jakiej jest dane urządzenie, na którym wyświetlana jest strona.
Na portalu CSS-tricks jest artykuł na ten temat.
10. Unikaj niepotrzebnego zagnieżdżania, a także nadużywania tagów div
Struktura w HTML powinna być wykonana jak najmniejszą ilością elementów. Jeśli potrzeby dwie kolumny i w każdej paragraf to nie zagnieżdżaj ich w divy tylko nadaj im szerokość po 50%. Tak samo jeśli chcesz aby np. span zajmował całą szerokość rodzica, to nie wrappuj go w diva tylko nadaj mu display block.
Przykład zbyt dużego i niepotrzebnego zagnieżdżenia:
See the Pen Divitis by SowaProgramuje (@sowaProgramuje) on CodePen.
Poprawny sposób:
See the Pen Paragraf by SowaProgramuje (@sowaProgramuje) on CodePen.
Rezultat jest ten sam, ale w przykładzie drugim mamy bardziej przejrzystą strukturę. Trzymajmy się zasady KISS (Keep it simple Stupid)
Bonus! 🙂
11. Usuwaj martwy kod
Martwy kod (ang. dead code) to fragment kodu, który nic nie wnosi do naszego projektu: tj. kod który jest zakomentowany bądź np. funkcja, która nigdzie nie jest i nigdy nie zostanie wykorzystana. Jeśli jakiś fragment kodu nie jest potrzebny należy go usunąć. Najlepiej jest to zrobić podczas refactoringu.
Podsumowanie
Postaraj się aby dbanie o dobrą jakość kodu stało się Twoim nawykiem. To naprawdę nie kosztuje wiele, a robi ogromną różnicę.
Spodobał Ci się ten artykuł i chcesz dowiedzieć się więcej? Koniecznie odwiedź bloga Mariusza Bugajskiego, tam niebawem znajdziesz nasz kolejny wartościowy post z tej serii.
Masz jakieś pytania? Daj znać w komentarzu