Nasza strona używa cookies. Korzystając ze strony, wyrażasz zgodę na używanie cookies, zgodnie z aktualnymi ustawieniami przeglądarki. Rozumiem

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

Alexey Shepelev Senior Ruby on Rails Developer / Altoros
Sprawdź, czego należy unikać w CSS, tak aby nie utrudniać sobie swojej pracy.
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

Rozpocznij dyskusję

Lubisz dzielić się wiedzą i chcesz zostać autorem?

Podziel się wiedzą z 160 tysiącami naszych czytelników

Dowiedz się więcej