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 pomiarów względnych takie 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:
HTML>
<HTML>
<głowa>głowa>
<ciało>
<h1>To jest pozycja 1h1>
<h2>To jest pozycja 2h2>
<P>To jest akapit.P>
<P>To jest kolejny akapit.P>
ciało>
HTML>Możesz stylizować rozmiary czcionek w tym dokumencie, używając jednostek px z następującym CSS:
h1 {
rozmiar czcionki: 50piks;
}h2 {
rozmiar czcionki: 30piks;
}
P {
rozmiar czcionki: 15piks;
}
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 {
rozmiar czcionki: 16piks;
}h1 {
rozmiar czcionki: 3Rem;
}h2 {
rozmiar czcionki: 2Rem;
}
P {
rozmiar czcionki: 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 na Frameworki CSS, takie 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.
<h2styl="Zielony kolor;">To jest zielony nagłówekh2>
<Pstyl="kolor czerwony;">To jest czerwony akapit.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żne
W CSS tzw !ważny reguła dodaje większą wagę do 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żny zasady w swoim 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.
HTML>
<HTML>
<głowa>głowa>
<ciało>
<P> Jestem pomarańczowy P>
<Pklasa="moja klasa"> jestem zielony P>
<PID="mój dokument tożsamości"> Jestem niebieski. P>
ciało>
HTML>CSS:
#mój dokument tożsamości {
kolor tła: niebieski;
}.moja klasa {
kolor tła: zielony;
}
P {
kolor tła: Pomarańczowy !ważny;
}
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 skończysz debugowanie pliku CSS w przyszłości.
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:
.obraz1 { lewy margines: 3%; }Napisz to tak:
obraz chłopca { lewy margines: 3%; }Patrząc na arkusz stylów, będziesz dokładnie wiedział, dla którego obrazu jest kod. Przewodnik po stylach HTML/CSS Google wymienia wiele innych konwencji, które powinien znać każdy programista.
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.
/* elementy wideo potrzebują przestrzeni, aby oddychać */
.wideo {
górny margines: 2oni;
}
/* stylizacja sekcji bohatera */
.pozdrowienie {
górny margines: 1oni;
}
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 zestaw narzędzi do projektowania, taki jak Canva wizualizować 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ą.
