Zrozumieć klasy w CSS

Przykład z menu, oprócz poznania dwóch selektorów pseudoklas, pozwoli nam nauczyć się jeszcze jednej ważnej rzeczy. Zapewne zauważyłeś, że dotychczas każdy selektor w CSS składał się z nazw tagów HTML. Ma to jedną, poważną wadę – kiedykolwiek zmienimy coś w strukturze kodu HTML, musimy dostosować również nasze CSSy. Może się tak stać na przykład w sytuacji, kiedy dany tekst nie jest już nagłówkiem. Wtedy zamiast nagłówka

<h1>Justin Bober zgolił wąsy</h1>

Powstaje kolejny akapit <p>:

<p>Justin Bober zgolił wąsy</p>

Stosując selektory oparte o nazwy tagów, narazimy się w takim przypadku na błędy w wyświetlaniu strony. Aby użytkownicy nie zauważyli różnicy, należy zmienić kod CSS, by zwykły akapit wyświetlał się tak samo jak element <h1>. Aby zminimalizować to ryzyko, w CSSie używa się klas i identyfikatorów.

Zacznijmy od klas. To łatwe. Otóż każdy element HTML może mieć specjalny atrybut o nazwie "class", gdzie możemy podać jedną lub kilka nazw. Oto kilka przykładów, jak można dodać taki atrybut:

• <p class="news-item"> – klasa o nazwie "news-item"
• <li class="menu-item"> – klasa o nazwie "menu-item"
• <article class="news"> – klasa o nazwie "news"
• <q class="important-quote"> – klasa o nazwie "important-quote"

I tak dalej. Nazwy klas są dowolne, aczkolwiek przyjęło się, że są to pojedyncze wyrazy lub ich zbitka z wykorzystaniem myślników "-" np. "my-item" i podkreśleń "_" - np. "special_item".

Można również dodać ich kilka naraz dla jednego tagu:

• <p class="news-item special-info"> – klasy o nazwie "news-item" i "special-info"
• <li class="menu-item selected"> – klasa o nazwie "menu-item" i "selected"

Zapytasz zapewne, jakie to ma znaczenie i do czego się przydaje. Otóż załóżmy, że tworzymy stronę z informacjami ze świata sportu. Uznajmy, że mamy na niej jeden główny, wyróżniony news (pogrubiłem odpowiedni fragment) oraz kilka normalnych. Kod HTML mógłby wyglądać tak:

<article><p>zwykły news</p></article>
<article><p>Wyróżniony news</p></article>
<article><p>zwykły news</p></article>
<article><p>zwykły news</p></article>
<article><p>zwykły news</p></article>

Gdybyśmy chcieli napisać kod CSS, który wyróżniłby specjalnym tłem pierwszy główny news, mielibyśmy problem. Nasza wiedza pozwala nam "ostylować" wszystkie elementy <article> w postaci takiego selektora, który poszuka wszystkie elementy <article>:

article {}

Pomoc przychodzi, kiedy do gry włączymy klasy CSS. Spróbujmy opisać każdy z elementów <article> taką nazwą klasy, która odpowiadałaby jego znaczeniu na całej stronie. A więc dla głównego newsa niech będzie to "main-news", a dla normalnego - "normal-news".

<article class="normal-news"><p>zwykły news</p></article>
<article class="main-news"><p>Wyróżniony news</p></article>
<article class="normal-news"><p>zwykły news</p></article>
<article class="normal-news"><p>zwykły news</p></article>
<article class="normal-news"><p>zwykły news</p></article>

W CSS na szczęście możemy użyć poniższych selektorów:

.main-news {
  background-color: LightBlue;
}

.normal-news {
  background-color: yellow;
}

Każdy z nich, co ważne, zaczyna się kropką i składa się z nazwy klasy. A więc kiedykolwiek będziemy chcieli "wybrać" w selektorze elementy o danej klasie w HTML, używamy takiej konstrukcji. Uruchamiając powyższy kod, główny news będzie miał tło koloru jasno niebieskiego (LightBlue), a każdy normalny - żółtego.

W przeglądarce wygląda to tak:

Klasami CSS oznaczamy charakterystyczne dla strony elementy, pozbywając się zależności od nazw tagów. Być może w przyszłości zmienimy nasz kod i zamiast <article> pojawi się coś innego, na przykład będziemy nasze artykuły przetrzymywać w liście <ul>. Wtedy wystarczy tylko nanieść zmiany w HTML, nie ruszając kodu CSS, aby wygląd pozostał taki sam.

Istota klas wyjaśniona została w poniższym schemacie:

Zwróć uwagę na kolory zaznaczenia - tym samym kolorem wyróżnione zostały elementy analogiczne.

Oprócz klas wymyślono również identyfikatory. Używamy wtedy atrybutu o nazwie "id" i dowolnej wartości, według takich samych zasad jak klasy (a więc preferowane są różne zbitki wyrazowe). Przykładowy identyfikator w HTML-u może wyglądać tak:

<p id="main-content"></p>

Kod CSS dla identyfikatorów wygląda z kolei tak:

#main-content {
  background-color: red;
}

W ten sposób dla elementu z identyfikatorem "main-content" ustawimy czerwone (red) tło. Inaczej niż ma to miejsce w klasach, tutaj, zamiast kropki, wstawiamy przed nazwę identyfikatora znak kratki - "#".

Bardzo ważne jest to, by pamiętać, że jak sama nazwa wskazuje, identyfikatory są unikalne, a więc dany identyfikator może być użyty tylko raz w dokumencie HTML. Stosowanie atrybutu "id" powinno być poprzedzone staranną analizą – zwykle wystarczają same klasy. Nie należy nadużywać identyfikatorów, ponieważ rzadko zdarza się, że strona składa się z kilkunastu unikatowych elementów.

Sposób działania identyfikatorów podsumowuje poniższy schemat:

Wykorzystując nową wiedzę, spróbujmy przerobić kod naszego menu, by stał się bardziej odporny na zmiany w HTML-u. Być może w przyszłości uznamy, że chcielibyśmy zrobić je używając innych tagów niż <ul> i <li>. Jeśli użyjemy odpowiednich klas, możemy wtedy spać spokojnie, bez konieczności równoległych zmian w kodzie CSS.

Wypada zacząć od HTML. Obecnie kod odpowiedzialny za reprezentację menu wygląda tak:

<nav>
  <ul>
    <li>
      <a href="index.html">Strona główna</a>
    </li>
    <li>
      <a href="szkolenia.html">Szkolenia</a>
    </li>
    <li>
      <a href="konferencje.html">Konferencje</a>
    </li>
    <li>
      <a href="onas.html">O nas</a>
    </li>
  </ul>
</nav>

Wprowadźmy teraz klasy Nadajmy je dla całego kontenera, przechowującego menu (tag <ul>) oraz odpowiednich elementów tego menu (tagi <li>):

<ul class="site-nav">
  <li class="site-nav-item">
    <a href="index.html">Strona główna</a>
  </li>
  <li class="site-nav-item">
    <a href="szkolenia.html">Szkolenia</a>
  </li>
  <li class="site-nav-item">
    <a href="konferencje.html">Konferencje</a>
  </li>
  <li class="site-nav-item">
    <a href="onas.html">O nas</a>
  </li>
</ul>

Dla całego menu użyłem klasy "site-nav", natomiast dla jego elementów wybrałem klasę "site-nav-item". Pora teraz dostosować kod CSS:

.site-nav {
  background-color: LightCyan;
  list-style: none;
  padding: 0;
  width: 200px;
  border: 1px solid LightBlue;
}

.site-nav .site-nav-item {
  border-bottom: 1px solid LightBlue;
  padding: 5px;
}

.site-nav .site-nav-item:last-child {
  border-bottom: 0;
}

.site-nav .site-nav-item a {
  color: black;
  text-decoration: none;
}

.site-nav .site-nav-item a:hover {
  text-decoration: underline;
}

Aby lepiej zrozumieć, co się zmieniło, spójrz na porównanie starego (z lewej) kodu CSS i nowego (z prawej):

Spróbuj porównać każdy selektor. Jak łatwo zauważyć, zamieniliśmy po prostu tagi na klasy, co daje nam znacznie większą elastyczność w pisaniu kodu. Przy okazji skróciliśmy każdy z nich, usuwając "nav".

Staraj się używać klas w selektorach i minimalizować użycie tagów, chyba że jest ono oczywiste - na przykład dla linków w <a>. Ich nie da się podmienić innym tagiem HTML. Identyfikatory stosuj tylko wtedy, kiedy dany element jest unikalny w skali strony. W powyższym przypadku, mogło to być właśnie menu, ale nie musiało - często menu występuje kilka razy - na przykład na dole i górze strony.

Działanie i definiowanie klas oraz identyfikatorów podsumowuje poniższy schemat: