Kaskadowe arkusze stylów stały się standardowym sposobem stylizowania i układania stron internetowych. Projektanci używają arkusze stylów aby poinformować przeglądarkę, jak witryna powinna być wyświetlana pod względem wyglądu i stylu, obejmując takie czynniki, jak kolor, odstępy, czcionki i wiele innych.
Style CSS można wdrażać na dwa sposoby:
- Inline — w obrębie kodu samej strony internetowej, indywidualnie, element po elemencie
- W samodzielnym dokumencie CSS, do którego podłączona jest strona internetowa
Najlepsze praktyki dotyczące CSS
„Najlepsze praktyki” to metody projektowania i budowania stron internetowych, które okazały się najskuteczniejsze i dają największy zwrot z włożonej pracy. Podążając za nimi w CSS w projektowaniu stron internetowych pomaga jak najlepiej wyglądać i funkcjonować strony internetowe. Z biegiem lat ewoluowały wraz z innymi językami i technologiami internetowymi, a samodzielny arkusz stylów CSS stał się preferowaną metodą użycia.
Przestrzeganie sprawdzonych metod dotyczących CSS może ulepszyć witrynę na kilka sposobów:
- Oddziela treść od projektu: Jednym z głównych celów CSS jest usunięcie elementów projektu z HTML i umieszczenie ich w innym miejscu, aby projektant mógł je utrzymać. Ta praktyka służy również oddzieleniu projektantów od programistów, aby każdy z nich mógł skoncentrować się na swoich obszarach wiedzy. Projektant nie musi być programistą, aby zachować wygląd strony internetowej.
- Ułatwia konserwację: Jednym z najczęściej pomijanych elementów projektowania stron internetowych jest utrzymanie. W przeciwieństwie do materiałów drukowanych, strona internetowa nigdy nie jest „gotowa”. Treść, projekt i funkcja mogą i powinny ewoluować w czasie. Posiadanie CSS w centralnym miejscu, a nie rozrzucanie po całej witrynie, znacznie ułatwia utrzymanie.
- Utrzymuje dostęp do Twojej witryny: Używanie stylów CSS pomaga wyszukiwarkom i osobom niepełnosprawnym w interakcji z Twoją witryną.
- Dłużej utrzymuje aktualność witryny: Używając najlepszych praktyk z CSS, trzymasz się standardów, które okazały się stabilne, ale wystarczająco elastyczne, aby dostosować się do zmian w środowisku projektowania stron internetowych.
Style wbudowane nie są najlepszą praktyką
Style wbudowane, chociaż mają cel, na ogół nie są najlepszym sposobem na utrzymanie witryny. Są sprzeczne z każdą z najlepszych praktyk:
- Style wbudowane nie oddzielają treści od projektu: Style wbudowane są dokładnie takie same, jak osadzone czcionki i inne niezgrabne znaczniki projektowe, z którymi borykają się współcześni programiści. Style wpływają tylko na poszczególne, indywidualne elementy, do których są stosowane; chociaż takie podejście może zapewnić bardziej szczegółową kontrolę, utrudnia również inne aspekty projektowania i rozwoju, takie jak spójność.
- Style wbudowane powodują bóle głowy związane z konserwacją: Kiedy pracujesz z arkuszami stylów, ustalenie, gdzie jest ustawiany styl, może być trudne. Kiedy masz do czynienia z mieszanką style wbudowane, osadzone i zewnętrzne, masz wiele lokalizacji do sprawdzenia. Jeśli pracujesz w zespole zajmującym się projektowaniem stron internetowych lub musisz przeprojektować lub utrzymać witrynę zbudowaną przez kogoś innego, będziesz mieć jeszcze więcej problemów. Gdy znajdziesz styl i go zmienisz, musisz to zrobić na każdym elemencie na każdej stronie, na której został umieszczony. To astronomicznie zwiększa czas i budżet pracy.
- Style wbudowane nie są tak dostępne: nowoczesny czytnik ekranu lub inne urządzenie pomocnicze może obsługiwać atrybuty wbudowane i tagi skutecznie, niektóre starsze urządzenia nie potrafią, co może skutkować dziwnie wyświetlaną siecią stron. Dodatkowe znaki i tekst mogą również wpływać na to, jak Twoja strona jest wyświetlana przez robota wyszukiwarki, więc Twoja strona nie radzi sobie tak dobrze pod względem optymalizacji pod kątem wyszukiwarek.
- Style wbudowane sprawiają, że Twoje strony są większe: Jeśli chcesz, aby każdy akapit w Twojej witrynie wyglądał w określony sposób, możesz to zrobić raz za pomocą sześciu lub więcej wierszy kodu w zewnętrznym arkuszu stylów. Jeśli jednak robisz to za pomocą stylów wbudowanych, musisz dodać te style do każdego akapitu swojej witryny. Jeśli masz pięć wierszy CSS, jest to pięć wierszy pomnożonych przez każdy akapit w Twojej witrynie. Ta przepustowość i czas ładowania mogą się spieszyć.
Alternatywą dla stylów wbudowanych są zewnętrzne arkusze stylów
Zamiast używać stylów wbudowanych, użyj zewnętrznych arkuszy stylów. Zapewniają wszystkie zalety najlepszych praktyk CSS i są łatwe w użyciu. Zastosowane w ten sposób wszystkie style używane w witrynie znajdują się w osobnym dokumencie, który jest następnie połączony z dokumentem internetowym za pomocą jednego wiersza kodu. Zewnętrzne arkusze stylów wpływają na każdy dokument, do którego są dołączone. Jeśli masz 20-stronicową witrynę, w której każda strona korzysta z tego samego arkusza stylów — zazwyczaj tak jest gotowe — możesz wprowadzić zmiany na każdej z tych stron, po prostu edytując te style raz w jednym miejsce. Zmiana stylów w jednym miejscu jest wygodniejsza niż wyszukiwanie tego kodu na każdej stronie witryny. Ta elastyczność znacznie ułatwia długoterminowe zarządzanie witryną.