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.