post_ico2

Priorytety w CSS, czyli id, class i !important

Wpis ten dedykowany jest osobom dopiero uczącym się HTMLa i CSS. Na początku swojej przygody z tworzeniem stron miałem problemy ze zrozumieniem sensu istnienia obok siebie id oraz class. Po latach doświadczeń postaram się to wyjaśnić „dla potomnych” :).

Na początek stworzę szkielet strony HTML.

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
<section id="category-info">
    <h1>Nazwa kategorii</h1>
    <p>Lorem ipsum Lorem ipsum....</p>
</section>
<section class="posts">
    <article id="post-1" class="post">
        <h2>Artykuł 1</h2>
        <p>Lorem ipsum Lorem ipsum....</p>
    </article>
    <article id="post-2" class="post">
        <h2>Artykuł 2</h2>
        <p>Lorem ipsum Lorem ipsum....</p>
    </article>
    <article id="post-3" class="post">
        <h2>Artykuł 3</h2>
        <p>Lorem ipsum Lorem ipsum....</p>
    </article>
</section>
</body>
</html>

Kod ten pokazuje strukturę podstrony kategorii z lista postów na blogu. Kod zawiera selektory class i id. Dla każdego postu ustawiam sobie czerwone tło:

.post{
    background: #ff0000;
}

Chciałbym jednak wyróżnić pierwszy post i ustawić dla niego niebieskie tło. Mogę do tego wykorzystać id:

#post-1{
    background: #0000ff;
}

Wykorzystuję w tym momencie fakt, że w CSS id ma wyższy priorytet niż class. Jeżeli w obu selektorach jest reguła opisująca to samo, CSS weźmie pod uwagę tą z id. Proste, prawda? :)

Przeanalizujmy kolejny przykład:

p{
    font-size: 14px;
}
#category-info p{
    font-size: 16px;
}

Dla akapitu ustawiłem wielkość czcionki na 14px, ale chcę mieć większą czcionkę dla opisu kategorii. Do tego celu podaję bardziej szczegółową ścieżkę. Dzięki temu dla wszystkich akapitów wewnątrz diva category-info ustawiana jest wielkość na 16px. A co w przypadku poniższego kodu?

body #category-info p{
    font-size: 18px;
}

Jako że podaję jeszcze bardziej szczegółową ścieżkę (znacznik body -> div category-info znacznik p) zostanie ustalona wielkość czcionki na 18px.

Wykorzystując taką własność CSS nie musiałem dodawać klasy ani id dla akapitu z opisem kategorii. Dzięki temu kod mi się nie rozrósł (ważne ze względu optymalizacji SEO), a i kod jest moim zdaniem bardziej czytelny.

Atrybut style

Wykorzystując atrybut style można dodać reguły CSS wewnątrz kodu HTML (raczej odradzam tego, sam stosuję w rzadkich sytuacjach). W moim przykładzie wygląda to tak:

<p style="font-size: 20px;">Lorem ipsum Lorem ipsum....</p>

Kod ten nadpisuje wszystkie reguły, które wypisałem powyżej, a więc opis będzie miał czcionkę o 20px wielkości.

!important

Żeby nie było za prosto istnieje jeszcze jeden sposób określenia priorytetów w CSS :). Służy do tego !mportant. Jeżeli jakaś reguła zawiera takie coś będzie ona bezwzględnie pierwsza. Niezależnie czy jest coś z id albo w style. Jeżeli chcę, by każdy akapit miał jednakową wielkość czcionki napiszę coś takiego:

p{
    font-size: 14px !important;
}

Podsumowanie

Przy wykorzystaniu id trzeba pamiętać, że zgodnie ze standardami jednakowe id może wystąpić tylko raz w dokumencie, czyli w moim przykładzie nie może już wystąpić post-1, post-2 itd. Id stosuję dla ważnych struktur strony, takich jak: nagłówek, stopka, menu, bloki z treścią itp.

Z kolei class wykorzystuję wszędzie tam, gdzie klasa może się powielić, np. lista artykułów.

Z !important korzystam w specyficznych sytuacjach. Jedną z takich jest nadpisanie reguł zawartych w style – np. podczas edycji cudzego kodu.

Co sądzisz o wpisie?
BeżnadziejnySłabyŚredniDobryBardzo dobry (2 głosów, średnia ocen: 4,00 z 5)
Loading...