Każda strona internetowa składa się z elementów konstrukcyjnych, funkcjonalnych i stylistycznych. Kaskadowe arkusze stylów dyktować wygląd („wygląd i styl”) witryny. Te style są oddzielone od struktury HTML, aby ułatwić aktualizowanie i przestrzeganie standardów internetowych.
Problem z arkuszami stylów
Ze względu na rozmiar i złożoność wielu dzisiejszych witryn, arkusze stylów mogą stać się dość długie i nieporęczne. Ten problem stał się bardziej złożony teraz, gdy zapytania medialne dla responsywne style stron internetowych są nieodzowną częścią projektu, dzięki czemu strona internetowa wygląda tak, jak powinna, niezależnie od urządzenia. Same zapytania o media mogą dodać znaczną liczbę nowych stylów do dokumentu CSS, co jeszcze bardziej utrudnia pracę. Zarządzanie tą złożonością polega na tym, że komentarze CSS mogą stać się nieocenioną pomocą dla projektantów i programistów stron internetowych.
Komentarze Dodaj strukturę i przejrzystość
Dodawanie komentarzy do plików CSS witryny internetowej organizuje sekcje tego kodu dla czytelnika, który przegląda dokument. Zapewnia również spójność, gdy jeden profesjonalista internetowy rozpoczyna pracę w miejscu, w którym inny się kończy, lub gdy zespoły ludzi pracują nad witryną.
Dobrze sformatowane komentarze przekazują ważne aspekty arkusza stylów członkom zespołu, którzy mogą nie znać kodu. Te komentarze są również przydatne dla osób, które pracowały już na stronie, ale nie ostatnio; projektanci stron internetowych zazwyczaj pracują w wielu witrynach, a zapamiętywanie strategii projektowania od jednej do drugiej jest trudne.
Tylko dla oczu profesjonalistów
Komentarze CSS nie są wyświetlane, gdy strona renderuje się w przeglądarki internetowe. Te komentarze mają jedynie charakter informacyjny, tak jak Komentarze HTML są (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ść proste. Zarezerwuj swój komentarz z poprawnymi tagami otwierającymi i zamykającymi komentarza:
Rozpocznij swój komentarz, dodając /* i zamknij to */.
Wszystko, co pojawia się między tymi dwoma tagami, to treść komentarza, widoczna tylko w kodzie i nie renderowana przez przeglądarkę.
Komentarz CSS może zajmować dowolną liczbę wierszy. Oto dwa przykłady:
/* przykład czerwonej ramki */
div#border_red {
obwódka: cienka jednolita czerwona;
}
/***************************
****************************
Styl tekstu kodu
****************************
***************************/
Wyłamywanie sekcji
Wielu projektantów organizuje arkusze stylów w małe, łatwo przyswajalne fragmenty, które można łatwo zeskanować podczas czytania. Zazwyczaj zobaczysz komentarze poprzedzone i zakończone serią łączników, które tworzą duże, oczywiste przerwy na stronie, które są łatwe do zauważenia. Oto przykład:
/* Style nagłówków */
Te komentarze wskazują początek nowej sekcji kodowania.
Kod komentowania
Ponieważ znaczniki komentarzy informują przeglądarkę, aby ignorowała wszystko między nimi, możesz ich użyć do tymczasowego wyłączenia niektórych części kodu CSS. Ta sztuczka może być przydatna podczas debugowania lub dostosowywania formatowania strony internetowej. 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.
Dodaj otwierający tag komentarza przed kodem, który chcesz skomentować (wyłącz); umieść tag zamykający w miejscu, w którym ma się kończyć wyłączona część. Nic między tymi tagami nie wpłynie na wizualne wyświetlanie witryny, pomagając w debugowaniu CSS, aby zobaczyć, gdzie występuje problem. Następnie możesz wejść i naprawić tylko tę usterkę, a następnie usunąć komentarze z kodu.
Wskazówki dotyczące komentowania CSS
Wielu programistów umieszcza w górnej części każdego nowego pliku z kodem bloki komentarzy. Naśladuj tę strategię, dołączając blok komentarza z Twoim imieniem i nazwiskiem, odpowiednimi datami i powiązanymi informacjami, aby pomóc ludzie rozumieją kontekst projektu, a nie tylko decyzje dotyczące tego, co dzieje się w odniesieniu do konkretnego kodu blok.