5 złych praktyk w CSS, których powinien unikać każdy Web Developer

Niektórzy myślą, że ciężko jest się nauczyć CSS. Jest tam dużo rzeczy, przez które łatwo sobie strzelić w stopę. Pokażę tutaj 5 praktyk, których należy tam unikać i ułatwić sobie pracę jako Web Developer.  

1. Resetowanie margin i padding po uprzednim ich ustawieniu

Często widzę, jak inni ustawiają margin i padding dla wszystkich elementów, a potem resetują je dla pierwszego i ostatniego. Nie wiem, po co im te dwie reguły, skoro spokojnie poradzą sobie z jedną — o wiele łatwiej jest ustawić margin i padding dla wszystkich wymaganych elementów na raz. 

Wykorzystaj jedną z tych rzeczy dla prostszego i bardziej zwięzłego CSS: selektory nth-child lub nth-of-type, pseudoklasa :not(), lub kombinator +.  

Nie rób czegoś takiego:

.item {
  margin-right: 1.6rem;
}

.item:last-child {
  margin-right: 0;
}

Możesz użyć tego:

.item:not(:last-child) {
  margin-right: 1.6rem;
}

Albo tego:

.item:nth-child(n+2) {
  margin-left: 1.6rem;
}

Albo tego: 

.item + .item {
  margin-left: 1.6rem;
}

2. Dodawanie display: block dla elementów z position: absolute lub position: fixed

Czy wiesz, że nie musisz dodawać display: block dla elementów z position: absolute lub position: fixed, ponieważ jest to dodawane domyślnie? 

Co więcej, jeśli użyjesz wartości inline-*, to zmienią się one w następujący sposób: inline lub inline-block zmieni się na block, inline-flex na flex, inline-grid na grid, a inline-table na table. Napisz więc po prostu position: absolute albo position: fixed i dodaj display tylko, jeśli potrzebujesz wartości flex albo grid. 

Nie rób czegoś takiego: 

.button::before {
  content: "";
  position: absolute;
  display: block;
}

Albo takiego: 

.button::before {
  content: "";
  position: fixed;
  display: block;
}

Możesz zrobić coś takiego: 

.button::before {
  content: "";
  position: absolute;
}

Albo takiego: 

.button::before {
  content: "";
  position: fixed;
}

3. Używanie transform: translate (-50%, -50%) do wyśrodkowywania 

W CSS był pewien zgrzyt, który powodował wiele problemów. Taki stan rzeczy utrzymywał się do 2015, a wszystkie jego rozwiązania prowadziły do pewnych trudności — mówię tutaj o wyśrodkowywaniu elementu o arbitralnej wysokości wzdłuż dwóch osi. 

Skupimy się tutaj na następujących rozwiązaniach — użyciu absolute positioning oraz właściwości transform. Techniki te powodowały, że pojawiały się problemy z rozmazanym tekstem w przeglądarkach opartych o Chromium. 

Od czasu wprowadzenia Flexbox takie podejście nie ma już większego sensu. Możemy skrócić kod z 5 wierszy do dwóch. Zrobimy to wykorzystując margin: auto.

Chciałbym się tutaj podzielić sztuczką, która redukuje kod do dwóch właściwości. Możemy wykorzystać margin: auto wewnątrz kontenera flex, a przeglądarka dany element wycentruje sama. Tylko dwie właściwości i mamy wszystko z głowy. 

Nie rób czegoś takiego: 

.parent {
  position: relative;
}

.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Zamiast tego wykorzystaj: 

.parent {
  display: flex;
}

.child {
  margin: auto;
}

4. Wykorzystanie width: 100% dla elementów blokowych

Często używamy Flexbox do tworzenia wielokolumnowej siatki, która stopniowo redukuje się do pojedynczej kolumny. 

Aby przekonwertować siatkę na kolumnę, developerzy korzystają z width: 100%, i szczerze to nie rozumiem, dlaczego. Elementy siatki to elementy blokowe, które dokonują tego w sposób domyślny bez konieczności wykorzystywania dodatkowych właściwości. 

Nie musisz zatem korzystać z width: 100%. Zamiast tego trzeba napisać media query, aby Flexbox był używany tylko przy wielokolumnowym rozmieszczeniu elementów. 

Nie rób czegoś takiego: 

<div class="parent">
  <div class="child">Item 1</div>
  <div class="child">Item 2</div>
  <div class="child">Item 3</div>
  <div class="child">Item 4</div>
</div>

.parent {
  display: flex;
  flex-wrap: wrap;
}

.child {
  width: 100%;
}

@media (min-width: 1024px) {
  .child {
    width: 25%;
  }
}

Zamiast tego zrób to: 

<div class="parent">
  <div class="child">Item 1</div>
  <div class="child">Item 2</div>
  <div class="child">Item 3</div>
  <div class="child">Item 4</div>
</div>

@media (min-width: 1024px) {
  .parent {
    display: flex;
    flex-wrap: wrap;
  }

  .child {
    width: 25%;
  }
}

5. Ustawianie display: block dla elementów Flex 

Podczas korzystania z flexbox, ważne jest, aby pamiętać, że kiedy tworzymy kontener flex (dodaj display: flex), wszystkie elementy pochodne (elementy flex) stają się blokowe. Oznacza to, że wszystkie elementy będą mieć wartości blokowe. Z tego właśnie powodu ustawianie inline albo inline-block powoduje zmianę na block, inline-flex na flex, inline-grid na grid, a inline-table na table. 

Nie dodawaj zatem display: block do elementów flex, bo przeglądarka zrobi to za Ciebie. 

Zamiast tego:

.parent {
  display: flex;
}

.child {
  display: block;
}

Zrób to: 

.parent {
  display: flex;
}

Podsumowanie

Mam nadzieję, że wiesz już, jak skutecznie uniknąć prostych błędów w CSS. Dziękuję za uwagę!

Oryginał tekstu w języku angielskim możesz przeczytać tutaj.