1. Nie używaj zapisu: !important.
Nie używaj zapisu !important do nadpisania stylów. To jest bardzo zła praktyka, która bardzo utrudnia rozwój projektu i przede wszystkim niszczy kaskadować w CSS. Używaj tego zapisu tylko w ostateczności. Zdecydowanie nie nadużywaj.
2. Optymalizuj zdjęcia.
Szybkość ładowania strony możesz poprawić na różne sposoby, ale wydaje mi się, że przede wszystkim warto zoptymalizować obrazki na stronie. Tym bardziej jeżeli tych obrazków masz dużo, jeżeli nie są one odpowiednio dostosowane i zoptymalizowane, to znacząco zwiększy to szybkość ładowania strony. Pamiętaj o odpowiednim formacie zdjęcia, rozmiarze, wadze, kompresji, wyświetlania różnych obrazków na różnych urządzeniach i wszystkich dobrych technikach umieszczania zdjęć na Twojej stronie internetowej. Wszystko to sprawi, że strona będzie szybciej się wczytywać.
3. Pamiętaj o semantyce HTML.
Nie bez powodu w HTML mamy mnóstwo znaczników. Każdy z nich może być odpowiedni w innej sytuacji i przede wszystkim każdy z nich ma jakieś swoje przeznaczenie. Pamiętaj, żeby zawsze używać znaczników zgodnie z ich celem. Jeżeli masz na stronie nagłówek, to zastosuj znacznik header, jeżeli footer, to użyć znacznika footer, jeżeli sekcja to znacznik section, jeżeli navbar to nav itd. Jeżeli chcesz tworzyć dobry kod zgodny z najlepszymi standardami i praktykami, to musisz o tym pamiętać.
4. W CSS nie odnoś się do elementów poprzez id.
Odnoszenie się do elementów w CSS poprzez ich id jest złą praktyką, która później rodzi sporo problemów. Przez id bardzo zwiększa się specyficzność selektora. Oprócz tego id zawsze powinno być unikalne i użyte na danej podstronie tylko 1 raz. Głównie powinno być używane przez kod w JavaScript, a tutaj w CSS tego unikamy.
5. Nie używaj długich selektorów.
Złą praktykę jest używanie długich selektorów w CSS. Przez co zwiększa to również specyficzność i nasz kod staje się ciężki w utrzymaniu. Poza tym zmniejsza to czytelność CSS. Wystarczy nadać konkretną klasę w HTMLu i przez tą klasę odnosić się do elementu w CSS.
6. Pamiętaj o metodologii BEM (Block__Element—Modifier).
Metodologia BEM sporo nam ułatwia i przede wszystkim pomaga w odpowiednim nazewnictwie naszych elementów. Dzięki BEM nasz kod będzie bardziej czytelny i łatwiej rozszerzalny w przyszłości i po prostu lepiej będzie się z nim pracowało. Warto nauczyć się konwencji nazewniczej Block Element Modifier.
7. Twórz modularny kod.
To dalej nawiązanie do BEM, jeżeli będziesz tworzył modularny kod, podzielony na takie moduły to również będzie Ci dużo łatwiej nim zarządzać. Musisz sobie zdać sprawę, że projekty, strony internetowe, które będzie tworzył mogą być bardzo rozbudowane i taka modularność pomoże Ci nad tym wszystkim panować.
8. Pamiętaj o reużywalności kodu.
Kolejna dobra praktyka to tworzenie reużywalnego kodu. Chodzi mi tutaj o reuzywalność w ramach jednej strony internetowej, ale również nic nie stoi na przeszkodzie by używać jakichś gotowych komponentów na Twoich innych stronach. Jeżeli chcesz tworzyć reużywalny kod, to pamiętaj by nie dodawać jakichś dużych marginesów, zbuduj komponent bazowy, a jakieś konkretne kolory umieszczaj w klasie modyfikatora. Pamiętaj też o nazewnictwie, które ma być zgodne z funkcją a nie wyglądem. To znaczy lepszą nazwa będzie np. primary niż blue, danger niż red oraz success niż green.
9. Ustawiaj style dla jednej klasy/selektora w jednym miejscu.
Nie popełniaj też takiego błędu, że daną klasę stylujesz w kilku miejscach w pliku CSS. Na przykład jakieś style masz na górze pliku, a z czasem przypomniało Ci się, że brakuje Ci stylowania właściwości i dodajesz style w zupełnie innym miejscu. To wprowadza duży bałagan do całego kodu. Wszystkie klasy z danego modułu powinny być obok siebie. Tym bardziej stylowanie tej samej klasy.
10. Nie zakładaj, że wszyscy użytkownicy pracują na takim samym ekranie jak Ty.
Kluczowa rzecz, czyli dostosowywanie strony internetowej do różnych urządzeń. Pamiętaj, że każdy użytkownik może łączyć się z Twoją stroną internetową z różnych urządzeń, mogą to być mniejsze telefony, tablety, komputery czy duże telewizory. Zawsze musisz mieć dostosowaną stronę pod te wszystkie ekrany. Także musisz zawsze to testować i sprawdzać czy na każdym ekranie wszystko ładnie wygląda. Sama implementacja nie jest trudna, wystarczy odpowiednie właściwości dostosować na różne urządzenia za pomocą media queries. Pamiętaj, żeby tworzyć responsywne strony internetowe, które na każdym ekranie będą ładnie wyglądały.
11. Używaj zmiennych.
Zmienne bardzo ułatwiają zarządzanie wartościami ustawianymi w CSS. Mają mnóstwo zalet. Dzięki nim możesz w łatwy sposób ustawiać wartości, które opisują dokładnie jako wartości przechowują, także możesz nadać nazwy różnym wartością. Jeżeli będziesz chciał zmienić samą wartość, to również dzięki zmiennym będzie to ułatwione. Zmiana będzie tylko w 1 miejscu, natomiast bez używania zmiennych taka zmiana musiałaby być wprowadzona przynajmniej w kilku miejscach, do nawet kilkuset miejsc w zależności od rozmiaru strony.
12. Każda etykieta powinna mieć wypełniony atrybut "for".
Do każdej etykiety koniecznie dodaj atrybut for, dzięki temu już po kliknięciu w samą labelkę, czyli etykietę zostanie ustawiony focus na konkretnym polu.
13. Nie zakładaj, że wszyscy użytkownicy mają szybki internet.
To, że Twoja strona na lokalnym komputerze działa szybko, nie oznacza, że wszędzie tak działa. Pamiętaj, że użytkownicy korzystają z różnych urządzeń i mają różną szybkość internetu. Użytkownik, który łączy się do Twojej strony z telefonu prawdopodobnie będzie miał wolniejszy internet i warto dostosować pod niego naszą stronę internetową. Bez tego możesz właściciel strony może tracić potencjalnych klientów i pieniądze. W tym zakresie bardzo pomagają nam również narzędzia programistyczne. Możemy tam zweryfikować, jak nasza strona będzie się wczytywała na wolniejszym internecie. Dodatkowo możemy tutaj również wychwycić różne ewentualne problemy z wydajnością. Pamiętaj też, że pierwsze połączenie zawsze będzie wolniejsze, także warto to uwzględnić i zablokować do testów pamięć podręczną cache.
To wszystkie na dzisiaj. Jeżeli taki artykuł Ci się spodobał, to koniecznie dołącz do mojej społeczności – darmowe zapisy, gdzie będziesz również miał dostęp do dodatkowych materiałów i przede wszystkim bonusów. Do zobaczenia w kolejnym artykule.
Poprzedni artykuł - 14 Popularnych Błędów Poczatkujacych w HTML i CSS
![[E-Book] Jak Zostać Programistą Od Zera Do Eksperta (PDF)](/content/images/jak-zostac-programista-od-zera-male.png)
![[E-Book] Rekrutacja Programisty C#/.NET (PDF)](/content/images/rekrutacja-programisty-csharp-dotnet.png)