Wiedza o tym, że kolejność deklaracji ma znaczenie może zaoszczędzić dużo czasu osobom, które są na początkowym etapie poznawania CSS3. Jednak nie dotyczy to tylko osób początkujących w CSS3, podobny problem może pojawić się również używając framework Bootstrap. Osoba używająca framework oraz dodająca własne style CSS np. w osobnym pliku STYLE.CSS, może być niezwykle zdziwiona kiedy okaże się że jej strona ostylowana jest według domyślnych ustawień Bootstrap zamiast indywidualnie przygotowanego kodu.

Przykładowo dla stylu:

<STYLE>
.klasa1 {color: red;}
.klasa2 {color: blue;}
.klasa3 {color: yellow;}
</STYLE>
<div  class="klasa1 klasa2 klasa3">TEST</div>

Otrzymamy napis TEST w kolorze żółtym.

Istnieje tu jednak pułapka bo kolejność jest ważna, ale w miejscu, w którym pojawiła się deklaracja. Dlatego w kolejnym przykładzie pomimo, że część HTML nie zmieniła się i kolejność deklaracji klas jest taka jaka była jako rezultat otrzymamy napis TEST, ale w kolorze niebieskim.

Przyjrzyj się szczegółowo grafice:

BOOTSTRAP i CSS# kolejność deklaracji

HIERARCHIA:

  1. Style bezpośrednio w HTML
  2. Wewnętrzne i zewnętrzne style (wskazane w sekcji HEAD)
    1. ID – Identyfikator
    2. CLASS – Klasa
    3. <TAG> – tag
  3. Style przeglądarki

 

Żeby uniknąć tego problemy należy przestrzegać kilku zasad:

  • Deklaruj swój plik CSS3 poniżej deklaracji Bootstrapa, np.:
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<link rel="stylesheet" href="css/style.css" type="text/css"/>
  • Używaj identyfikatorów. Identyfikator jest ważniejszy od klasy i gdy zachodzi potrzeba ostylowanie części witryny w specyficzny sposób lepiej unikać mnożenia klas, które mogą kolidować z klasami Bootstrapa
  • Styl wpisany bezpośrednio w HTML ma największą wagę.

 

Na poniższym przykładzie widać, że pomimo 3 klas oraz użytego identyfikatora, to styl użyty bezpośrednio w DIV ostylował tekst (czyli otrzymał kolor: grey).

 

BOOTSTRAP i CSS# kolejność deklaracji