Kurs HTML

Czym są komentarze w CSS?

Podobnie jak w HTML i JavaScript, komentarze w CSS to fragmenty tekstu, które są całkowicie ignorowane przez przeglądarkę podczas przetwarzania arkusza stylów. Służą one wyłącznie programistom do dodawania notatek, wyjaśnień lub tymczasowego wyłączania fragmentów kodu.

Używanie komentarzy jest dobrą praktyką, która znacząco poprawia **czytelność i łatwość utrzymania** kodu CSS, zwłaszcza w większych projektach lub podczas pracy zespołowej.

Składnia komentarzy w CSS

W CSS istnieje tylko jeden rodzaj komentarzy – **komentarze blokowe**, podobne do tych znanych z JavaScript czy C.

Komentarz zaczyna się od znaków /* i kończy na znakach */. Wszystko, co znajduje się pomiędzy tymi znacznikami, jest traktowane jako komentarz, niezależnie od tego, czy zajmuje jedną, czy wiele linii.

/* To jest komentarz jednoliniowy w CSS */

body {
  font-family: sans-serif;
  /* background-color: lightblue;  Ten styl jest tymczasowo wyłączony */
  background-color: white;
}

/*
  To jest komentarz,
  który obejmuje
  wiele linii.
  Można tu umieścić dłuższe wyjaśnienia.
*/

h1 {
  color: navy; /* Ustawienie koloru nagłówka */
  font-size: 2em;
}

/* Komentarze nie mogą być zagnieżdżane! */
/* To jest początek /* komentarza zagnieżdżonego */ - to spowoduje błąd lub nieoczekiwane zachowanie */Kopiuj

Ważna uwaga: W przeciwieństwie do JavaScript, CSS **nie obsługuje komentarzy jednoliniowych** rozpoczynających się od //. Użycie // w pliku CSS zostanie potraktowane jako błąd składni lub część selektora/wartości.

Również **komentarze CSS nie mogą być zagnieżdżane**. Pierwsze napotkane znaki */ zakończą cały blok komentarza, niezależnie od tego, ile razy /* pojawiło się w jego wnętrzu.

Zastosowania komentarzy w CSS

• Wyjaśnianie kodu: Dodawanie krótkich notatek wyjaśniających cel bardziej skomplikowanych reguł, nietypowych wartości (np. specyficznych kolorów HEX) lub obejść dla błędów przeglądarek.
• Organizacja kodu: Używanie komentarzy do dzielenia arkusza stylów na logiczne sekcje (np. style ogólne, style nagłówka, style stopki, style formularzy), co ułatwia nawigację.
• Dokumentacja: Dodawanie informacji o autorze, dacie modyfikacji, wersji lub licencji na początku pliku CSS.
• Tymczasowe wyłączanie stylów (debugowanie): Zakomentowanie fragmentów kodu CSS jest szybkim sposobem na sprawdzenie, jak strona wygląda bez określonych stylów, co jest pomocne podczas debugowania problemów z layoutem lub wyglądem.
• Notatki "TODO": Oznaczanie miejsc w kodzie, które wymagają dalszej pracy lub poprawy (np. /* TODO: Zoptymalizować selektor */).

Przykład organizacji kodu za pomocą komentarzy:

/* ==========================================================================
   Style Ogólne
   ========================================================================== */
body {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
}

a {
  color: blue;
  text-decoration: none;
}

/* ==========================================================================
   Nagłówek
   ========================================================================== */
.header {
  background-color: #333;
  color: white;
  padding: 10px 0;
}

.logo {
  font-size: 1.5em;
  font-weight: bold;
}

/* ==========================================================================
   Stopka
   ========================================================================== */
.footer {
  margin-top: 20px;
  padding: 10px;
  text-align: center;
  font-size: 0.8em;
  border-top: 1px solid #ccc;
}

/* TODO: Dodać style dla nawigacji */Kopiuj

Dobre praktyki pisania komentarzy CSS

• Bądź zwięzły i na temat: Komentarze powinny być krótkie i wyjaśniać tylko to, co konieczne.
• Utrzymuj komentarze aktualne: Podobnie jak w innych językach, jeśli zmieniasz kod CSS, zaktualizuj powiązane komentarze.
• Używaj do organizacji: Wykorzystaj komentarze do logicznego podziału dużych arkuszy stylów.
• Unikaj oczywistych komentarzy: Nie komentuj czegoś, co jest jasno wyrażone przez sam kod (np. /* Ustawienie koloru na czerwony */ color: red;).
• Spójność: Stosuj spójny styl formatowania komentarzy w całym projekcie (np. sposób tworzenia nagłówków sekcji).