Wskazówki dotyczące pracy z arkuszami stylów CSS3

Po zdefiniowaniu struktury naszej witryny i opracowaniu pliku DOM W precyzyjny sposób ważne jest zdefiniowanie jego stylów, jest to również najbardziej kreatywny obszar, w którym można z najwyższą precyzją dostosować się do ostatniego zakątka witryny. Kaskadowe arkusze stylów są najbardziej odpowiednim rozwiązaniem, ale dla wszystkich, którzy po raz pierwszy wkraczają w świat tworzenia stron internetowych, istnieje kilka wskazówek, które należy wziąć pod uwagę, aby osiągnąć najlepsze wyniki.

Aby uzyskać profesjonalny efekt typowy dla konsekrowanego frontendu, konieczne jest uwzględnienie pewnych aspektów, takich jak porządek, czytelność i korekta najczęstszych błędów w tego typu praktyce. Podzielę się poniżej pięć wskazówek bardzo podstawowe, ale jednocześnie bardzo ważne dla obróbki i optymalnej konfiguracji naszych arkuszy stylów CSS.

Upewnij się, że w swoich arkuszach stylów CSS3 ustalasz efektywną kolejność i strukturę

Moje arkusze stylów zawsze dzielę w porządku hierarchicznym. W pierwszej kolejności zazwyczaj stosuję selektory ogólne, a następnie dodaję deklaracje selektorów html i na koniec przechodzę do pracy wewnątrz identyfikatorów kontenerów i drobnych elementów. Zasadniczo mielony postępuj zgodnie z logiką DOM począwszy od rodziców, a skończywszy na dzieciach. Możemy jednak zastosować inną formułę lub kolejność, na przykład możemy pogrupować nasze selektory i deklaracje uwzględniając ich funkcję. Wszystko będzie zależało od naszych preferencji i tego, jak będziemy czuć się bardziej komfortowo w pracy.

Wybierz jasne i zwięzłe nazwy dla każdego ze swoich selektorów

Jest coś bardzo ważnego, co musisz wziąć pod uwagę, a mianowicie to, że CSS3 różni się używaniem wielkich i małych liter, więc pisanie słowa z dużej litery może oznaczać coś innego i powodować błędy. Najłatwiej jest zawsze używać małych liter, aby uniknąć tego typu problemów. Spróbuj też wybierz nazwy zajęć i identyfikatory, które są łatwo rozpoznawalne i że nie prowadzą nas do wątpliwości lub błędów.

Nie zapomnij dodać komentarzy wyjaśniających

Z pewnością musisz udostępniać swoje pliki innym osobom, na przykład klientowi lub współpracownikom z zespołu roboczego, takim jak projektanci układu, inni projektanci lub programiści. Z tego powodu bardzo ważne jest zwrócenie uwagi na konstrukcję oraz zapewnienie czystego i uporządkowanego wykończenia. Wyjaśniające komentarze pomogą każdemu, kto ma dostęp do naszego arkusza stylów, w szybkim odnalezieniu się na pierwszy rzut oka. Każdy rodzaj obserwacji, które należy wziąć pod uwagę musi pojawić się jako treść. Pamiętaj, że możesz zawrzeć treść zarówno w swoim pliku HTML, jak i w pliku CSS i że w obu przypadkach są to komentarze, które nie zostaną logicznie odzwierciedlone w ostatecznym wyniku i będą widoczne tylko wtedy, gdy uzyskasz dostęp do ich kodu źródłowego, więc może być bardzo pomocna.

Zawsze stosuj reset w swoich arkuszach stylów

Każda przeglądarka ma swój domyślny arkusz stylów, dlatego aby uniknąć błędów lub zmian w zależności od przeglądarki, w której przeglądana jest nasza strona, jest to bardzo przydatne i zalecane zresetuj swoje arkusze stylów. Jest kilka alternatyw. Resetowanie arkusza stylów Erica Meyera może być bardzo dobrą opcją.

Wybierz najbardziej efektywne narzędzie

Istnieje wiele narzędzi, których możesz użyć, aby uzyskać jak największą wydajność podczas pracy nad projektem witryny. Od tworzenia Wireframe'ów po opracowywanie struktury witryny, a także wszelkiego rodzaju aplikacji, w tym Adobe Photoshop, Illustrator lub Fireworks. Masz również wielu profesjonalnych edytorów, które są jednymi z najbardziej polecanych (przynajmniej ten, którego używam) Sublime Text lub, w przypadku jego braku, Adobe Dreamweaver ponieważ zapewniają bardzo proste interfejsy o wysokim stopniu osobowości, a także możliwość pracy z naszymi kodami poprzez system skrótów i system autouzupełniania, który pozwoli nam zaoszczędzić ponad 70% czasu, który wykorzystalibyśmy z edytorem tradycyjnego zwykłego tekstu.