Każda strona internetowa składa się z elementów strukturalnych (które są podyktowane przez HTML), funkcjonalnych i stylistycznych. Kaskadowe arkusze stylów (CSS) służą do dyktowania wyglądu ("wyglądu i stylu") strony internetowej. Te style są oddzielone od struktury HTML, aby umożliwić łatwą aktualizację i dostosowanie do standardów internetowych.
Problem z arkuszami stylów
Dzięki rozmiarom i złożoności wielu stron internetowych, arkusze stylów mogą stać się dość długie i kłopotliwe. Jest to szczególnie ważne teraz, gdy zapytania o media dotyczące responsywnych stylów witryn są istotną częścią projektu, zapewniając, że witryna wygląda tak, jak powinna, niezależnie od urządzenia. Same zapytania o media mogą dodać znaczną liczbę nowych stylów do dokumentu CSS, przez co jeszcze trudniej z nim pracować. To tutaj komentarze CSS mogą stać się nieocenioną pomocą dla projektantów stron i deweloperów.
Komentarze Dodaj strukturę i przejrzystość
Dodawanie komentarzy do plików CSS witryny to świetny sposób na uporządkowanie sekcji tego kodu dla ludzkiego czytelnika, który przegląda dokument. Zapewnia to także spójność, gdy jeden z web-profesjonalistów wybiera miejsce, w którym kończy się inny, lub gdy zespoły ludzi pracują na stronie.
Dobrze sformatowane komentarze mogą przekazywać ważne aspekty arkusza stylów członkom zespołu, którzy mogą już nie znać kodu. Komentarze te są również bardzo pomocne dla osób, które pracowały wcześniej w witrynie, ale nie niedawno; projektanci stron internetowych zwykle pracują na wielu stronach, a pamiętanie strategii projektowania z jednego do drugiego jest trudne.
Tylko dla oczu profesjonalistów
Komentarze CSS nie są wyświetlane, gdy strona jest renderowana w przeglądarkach internetowych. Komentarze te mają jedynie charakter informacyjny, podobnie jak komentarze HTML (chociaż składnia jest inna). Te komentarze CSS w żaden sposób nie wpływają na wizualne wyświetlanie witryny.
Dodawanie komentarzy CSS
Dodanie komentarza CSS jest dość łatwe. Po prostu rezerwujesz swój komentarz za pomocą poprawnych tagów otwierających i zamykających:
- Rozpocznij swój komentarz, dodając
/*
- Zamknij swój komentarz, dodając
*/
Wszystko, co pojawia się między tymi dwoma tagami, to treść komentarza widoczna tylko w kodzie i nie jest renderowana przez przeglądarkę.
Komentarz CSS może zajmować dowolną liczbę linii. Oto dwa przykłady:
/ * przykład czerwonej granicy * / div # border_red { obramowanie: cienka stała czerwień; }/*******************************************************Styl tekstu kodu*******************************************************/ Wielu projektantów organizuje arkusze stylów w małych, lekkostrawnych kawałkach, które są łatwe do skanowania podczas czytania. Zwykle zobaczysz komentarze poprzedzone serią łączników, które tworzą duże, oczywiste przerwy na stronie, które są łatwe do zobaczenia. Oto przykład: / * ----------------------- Style nagłówków ----------------------- ------- * /
Te komentarze wskazują początek nowej sekcji kodowania. Ponieważ tagi komentarza informują przeglądarkę, aby ignorowała wszystko między nimi, możesz ich użyć do tymczasowego wyłączenia pewnych części kodu CSS. Może to być przydatne podczas debugowania lub podczas dostosowywania formatowania strony. W rzeczywistości projektanci często używają ich do "komentowania" lub "wyłączania" obszarów kodu, aby zobaczyć, co się stanie, jeśli ta sekcja nie jest częścią strony. Aby to zrobić, po prostu dodaj otwierający tag komentarza przed kodem, który chcesz skomentować (wyłącz); umieść znacznik zamykający w miejscu, w którym ma się zakończyć część wyłączona. Nic między tymi tagami nie wpłynie na wizualne wyświetlanie strony, pozwalając na debugowanie CSS, aby zobaczyć, gdzie pojawia się problem. Możesz wtedy wejść i naprawić tylko ten problem i usunąć komentarze z kodu. Podsumowując, oto kilka wskazówek, na które warto pamiętać przy użyciu komentarzy w swoim CSS: Dodanie zbyt wielu komentarzy może mieć wpływ na prędkość pobierania i wydajność witryny, ale nie wahaj się z nich skorzystać. Wymagałoby to wielu linii komentarzy, aby wywrzeć znaczący negatywny wpływ. Podobnie jak wiele aspektów projektowania stron internetowych, wszystko sprowadza się do równowagi. Przekraczanie sekcji
Kod "Komentowanie"
Wskazówki do komentowania CSS
Wydajność
