7 błędów CSS, których należy unikać jako początkujący
Praca z kaskadowymi arkuszami stylów (CSS) może być trudna dla początkujących. Korzystając z CSS, możesz ustrukturyzować, zaktualizować i zachować wygląd swojej aplikacji. Ale język wymaga umiejętności manipulowania stronami HTML w celu uzyskania pożądanego układu.
Oto kilka błędów, których należy unikać podczas pracy z CSS. Zaoszczędzą Ci czas i ułatwią proces rozwoju.
1. Używanie px dla rozmiarów czcionek
Jednostka „px” reprezentuje piksele. Możesz go użyć do wyrażenia różnych długości na stronie internetowej, od szerokości i wysokości elementu do rozmiaru czcionki.
Jednak px blokuje twój projekt do stałego rozmiaru dla wszystkich ekranów. Obraz w pikselach może zajmować całą szerokość jednego ekranu i tylko niewielką część drugiego. Jeśli chcesz uzyskać bardziej proporcjonalny element, użyj miar względnych, takich jak rem lub procenty (%).
Najlepszym względnym pomiarem do wykorzystania jest rem. Ta jednostka odnosi się do rozmiaru czcionki elementu głównego, który czytelnik może często ustawić w ustawieniach swojej przeglądarki. Możesz zobaczyć wpływ px i rem na element w poniższym przykładzie:
<!DOCTYPE html>
<HTML>
<head></head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>
Możesz stylizować rozmiary czcionek w tym dokumencie, używając jednostek px z następującym CSS:
h1 {
font-size: 50px;
}
h2 {
font-size: 30px;
}
p {
font-size: 15px;
}
Wynikowa strona wygląda akceptowalnie, gdy wyświetla się ją na dużym ekranie:
Ale nie wygląda reprezentacyjnie na mniejszym ekranie, jak na telefonie:
Następnie zastosuj rem na tej samej treści. Określ podstawowy rozmiar czcionki w elemencie HTML i zmień rozmiar innych elementów za pomocą remów, jak pokazano poniżej:
html {
font-size: 16px;
}
h1 {
font-size: 3rem;
}
h2 {
font-size: 2rem;
}
p {
font-size: 1rem;
}
Zwróć uwagę na różnicę między dużymi i małymi ekranami. Dzięki rem zawartość skaluje się lepiej niezależnie od rozmiaru ekranu. Elementy nigdy nie przekroczą ustawionego rozmiaru ekranu. Dlatego lepiej jest używać długości względnych niż pikseli.
Na ekranie komputera:
Na małym ekranie tekst w jednostkach rem jest nadal czytelny:
2. Umieszczanie wszystkich stylów w jednym pliku
Używanie jednego pliku CSS dla dużego projektu może spowodować bałagan. Będziesz mieć plik z długimi liniami kodu, które będą mylące podczas aktualizacji. Spróbuj użyć różnych plików dla arkuszy stylów CSS dla różnych komponentów.
Na przykład możesz mieć różne pliki do nawigacji, nagłówka i stopki. I kolejny dla sekcji na ciele. Rozdzielenie plików CSS pomaga uporządkować aplikację i zwiększyć użyteczność kodu.
3. Niewłaściwe używanie wbudowanego CSS
W Vanilla CSS możesz pisać style na stronach HTML, tak jak we frameworkach CSS, takich jak Bootstrap i TailwindCSS. Inline CSS pozwala na zastosowanie unikalnego stylu do elementu HTML. Używa atrybutu stylu elementu HTML.
Poniższy kod jest przykładem wbudowanego CSS.
<h2 style="color:green;">This is a Green Heading</h2>
<p style="color:red;">This is a red paragraph.</p>
Tekst będzie wyglądał tak:
Jednak HTML tylko z wbudowanym CSS może być bałagan. Ponieważ nie ma innej lokalizacji dla CSS, wszystkie CSS znajdują się w tym samym pliku co HTML. Będzie wyglądał na zatłoczony. Edycja takiego pliku jest trudna, zwłaszcza jeśli nie jest to twój kod.
Ponadto w przypadku wbudowanego CSS musisz napisać kod dla każdego elementu. Zwiększa to liczbę powtórzeń i ogranicza ponowne użycie kodu. Zawsze używaj kombinacji zewnętrznych arkuszy stylów i wbudowanego kodu CSS do stylizowania stron internetowych.
4. Nadużywanie! ważny
W CSS reguła !important zwiększa znaczenie właściwości/wartości. Zastępuje inne zasady stylizacji dla tej właściwości w tym elemencie.
Powinieneś mieć tylko kilka ! ważne reguły w twoim kodzie. Używaj go tylko wtedy, gdy jest to konieczne. Nie ma sensu pisać kodu, a potem go nadpisywać. Twój kod będzie wyglądał niechlujnie i spowoduje problemy podczas uruchamiania na niektórych urządzeniach.
<!DOCTYPE html>
<html>
<head></head>
<body>
<p> I am orange </p>
<p class="my-class"> I am green </p>
<p id="my-id"> I am blue. </p>
</body>
</html>
CSS:
#my-id {
background-color: blue;
}
.my-class {
background-color: green;
}
p {
background-color: orange! important;
}
Wynik jest taki:
5. Nieprzestrzeganie konwencji nazewnictwa
CSS ma konwencje nazewnictwa, które pomagają programistom w pisaniu standardowego kodu. Jest to niezbędne, jeśli w przyszłości będziesz debugować plik CSS.
Jeden z tych standardów obejmuje używanie łączników do oddzielania zgrupowanych słów. Innym jest nazywanie selektora zgodnie z tym, co robi. Więc każdy, kto na to spojrzy, nie będzie musiał zgadywać. Ułatwia również czytanie, konserwację i udostępnianie kodu. Na przykład:
Zamiast tego:
.image1 { margin-left: 3%; }
Napisz to tak:
.boy-image { margin-left: 3%; }
Patrząc na arkusz stylów, będziesz dokładnie wiedział, dla którego obrazu jest kod. Przewodnik po stylach HTML/CSS Google zawiera wiele innych konwencji, które powinien znać każdy programista.
6. Pozostawienie kodu bez komentarza
Pisanie komentarzy to najbardziej niedoceniana umiejętność w programowaniu. Wiele osób zapomina pisać komentarze wyjaśniające ich kod. Ale oszczędza czas. Komentarze są niezbędne do czytania i obsługi kodu.
Ponieważ CSS ma luźną strukturę i każdy może opracować własne konwencje, komentarze są niezbędne. Dobrą praktyką jest używanie dobrze ustrukturyzowanych komentarzy do wyjaśniania arkusza stylów. Możesz pisać komentarze wyjaśniające sekcje kodu i ich działanie.
/* video elements need space to breathe */
.video {
margin-top: 2em;
}
/* styling the hero section */
.salutation {
margin-top: 1em;
}
7. Brak wcześniejszego zaprojektowania
Wiele osób to robi, ale zaczynanie kodowania bez planu jest poważnym błędem. CSS określa, jak wygląda struktura twojego front-endu. Projekt mówi wiele o twoich umiejętnościach programistycznych.
Projekt Twojej witryny wyjaśnia Twoją wizję i zasoby potrzebne, aby się tam dostać. Miej mentalny obraz swojego projektu. Następnie zaprojektuj go na papierze lub użyj zestawu narzędzi do projektowania, takiego jak Canva, aby zwizualizować to, co chcesz.
Gdy masz już pełny obraz projektu, zbierz wszystkie zasoby i rozpocznij kodowanie. Pozwoli to zaoszczędzić czas i nadmiarowość.
Dlaczego warto rozważyć te zalecenia
Jeśli tworzysz aplikacje internetowe, użyjesz CSS. Dobra praca z CSS wymaga praktyki i przestrzegania standardowych konwencji. Konwencje nie tylko sprawiają, że kod jest czytelny, ale także łatwy w utrzymaniu.
Pisanie znormalizowanego kodu pozwoli Ci zaoszczędzić czas i wysiłek. Czas, który poświęciłbyś na formatowanie front-endu, możesz poświęcić na bardziej złożone funkcje. Zapewnia również możliwość ponownego użycia kodu i udostępniania go innym. Pisz lepszy kod, przestrzegając ustalonych konwencji i stań się lepszym programistą.
Dodaj komentarz