Częścią życia programisty jest ciągłe podążanie za nowościami i trendami. Dlatego w dzisiejszym artykule przedstawię 10 najbardziej użytecznych protipów dotyczących kodu CSS, które powinieneś stosować. Triki te skierowane są głównie do początkujących i średniozaawansowanych programistów lecz mamy nadzieję, że każdy znajdzie trick o którym nie wiedział.

1. Używanie flexboxów.

Jest to stosunkowo nowa właściwość CSS, której wprowadzenie niesie ze sobą wiele możliwości. Dodatkowo używanie jej jest niezwykle proste i intuicyjne. Flexboxy zostały stworzone z myślą o programistach front-endowych dla ułatwienia ich pracy. Większość przeglądarek wdrożyła już tą funkcjonalność dzięki czemu możemy spokojnie wykorzystywać ją we własnych projektach. Tutaj więcej o Flexbox.

2. Zacznij od zera.

Dobrą praktyką jest ustawienie marginesu oraz paddingu wszystkich elementów które znajdą się na naszej stronie na 0. Wielu początkujących programistów nie wie jak tego dokonać. Jest to niezwykle proste:

[css]
*  {
margin:0;
padding:0;
box-sizing: border-box;
}

[/css]

Zdecydowanie ułatwi nam to pozycjonowanie naszych elementów. Już nigdy nie będziemy denerwować się nieprzylegającymi do siebie boxami.

3. Border-box.

Praktyka używania własciwości box-sizign o wartości border-box powstała stosunkowo niedawno. Natomiast jest godna uwagi ze względu na swoje możliwości. Daje ona możliwość ustawiania wysokości oraz szerokości elementu WŁĄCZNIE z paddingiem i marginesem. Sprawia tym samym, że pozycjonowanie i wymiarowanie elementów staje się łatwiejsze.

4. <img> vs Background image.

Jeżeli chcesz zachować responsywność swoich grafik powinieneś użyć właściwości background. Zdecydowanie ułatwia to stworzenie responsywnego obrazka. Koniec problemów z chowającymi lub powiększającymi się obrazkami! Połączenie właściwości background, background-position oraz background-size w pełni rozwiązuje problem.

5. Nazewnictwo klas.

Dobrą praktyką jest odpowiednie nazywanie klas. Szkół jest wiele, natomiast dobrze jest trzymać się zasad ustalonych z góry. Dobrą praktyką jest używanie tzw BEM’a, który definiuje jak powinniśmy nazywać klasy, czyniąc kod czytelniejszym. O samym BEMie jeszcze z pewnością napiszę a póki co odsyłam was do strony głównej https://en.bem.info/.

6. Nie używaj !important

Chyba najczęściej popełniany błąd laików… Coś nie działa? Użyje important, może pójdzie. Koniec z tą praktyką, jeżeli chcesz być DOBRYM programistą, który tworzy wartościowy kod zaprzestań jej.

7. Z dużej czy małej?

Jeżeli chcesz aby twój tekst był wyświetlany jako wielkie litery alfabetu, użyj do tego właściwości text-transform: uppercase. Pisanie drukowanymi literami w HTML nie jest dobrą praktyką i radzę jej unikać. Jedynym wyjątkiem jest kładzenie nacisku na pewien wyraz. Związane jest to m.in. z pozycjonowaniem twojej strony w wyszukiwarkach i innych.

8. Sprawdź swój kod.

Napisałeś stronę lub skrypt? Dobrą praktyką jest sprawdzenie jego semantyki w Validatorach dostępnych w internecie. Pomoże to w wychwyceniu popełnionych przez nas błędów lub zastosowania przez nas złych praktyk. Oto polecane Validatory: W3 oraz dodatek do Sublime oraz Atoma.

9. Kaskadowość!

Pamiętaj, że CSS to Kaskadowy arkusz stylu budowany na drzewie DOM. Co to oznacza? Mniej więcej tyle, że użyta właściwość w elemencie nadrzędnym zostaje zastosowana również we wszystkich „dzieciach”. Przykładowo użycie właściwości font w selektorze html zastosuje ją do wszystkich elementów.

10. Komentarze.

Przez wiele osób zapomniane, zdecydowanie niesłusznie. Grupa początkujących osób nie zdaje sobie sprawy jak bardzo komentarze wpływają na usprawnienie przeglądania pisanego kodu. Przy pracy w zespole są one niezbędne do właściwej współpracy między programistami. Komentarze powinny być czytelne i widoczne w „gąszczu” kodu, tak aby szybko można było zlokalizować odpowiedni fragment kodu.

Autor: Radosław Bogusławski

TEMATY:
Najświeższe artykuły