Jednym z najlepszych sposobów nauczenia się kodowania stron internetowych jest spojrzenie na kody źródłowe innych witryn. Praktyka ta polega na tym, jak wielu profesjonalistów internetowych nauczyło się ich rzemiosła, zwłaszcza w czasach, gdy było tak wiele opcji na kursy projektowania stron internetowych, książek i witryn szkoleniowych online.
Jeśli wypróbujesz tę praktykę i spojrzysz na kaskadowe arkusze stylu (CSS) witryny, jedna rzecz, którą możesz zobaczyć w tym kodzie, to linia, która mówi: ważne. Co to oznacza i, co równie ważne, w jaki sposób poprawnie używasz tej deklaracji w swoich arkuszach stylów?
Kaskada CSS
Przede wszystkim ważne jest, aby zrozumieć, że kaskadowe arkusze stylów rzeczywiście kaskada , co oznacza, że są umieszczone w określonej kolejności. Ogólnie oznacza to, że style są stosowane w kolejności, w jakiej są odczytywane przez przeglądarkę. Pierwszy styl jest stosowany, a następnie drugi i tak dalej.
W wyniku tego, jeśli styl pojawi się u góry arkusza stylów, a następnie zostanie zmieniony niżej w dokumencie, druga instancja tego stylu będzie stosowana w kolejnych instancjach, a nie w pierwszym. Zasadniczo, jeśli dwa style mówią to samo (co oznacza, że mają ten sam poziom specyficzności), zostanie użyty ostatni z nich.
Na przykład, wyobraźmy sobie, że następujące style zostały zawarte w arkuszu stylów. Tekst akapitu będzie renderowany na czarno, mimo że pierwsza zastosowana właściwość stylu ma kolor czerwony. Jest tak dlatego, że "czarna" wartość jest wymieniona na drugim miejscu. Ponieważ CSS jest czytany od góry do dołu, ostateczny styl jest "czarny" i dlatego ten wygrywa.
p {kolor: czerwony; }p {kolor: czarny; }
Jak ważne Zmienia priorytet
Teraz, gdy rozumiesz, jak te prawie identyczne reguły są przetwarzane przez CSS, możemy spojrzeć na to, jak ważna dyrektywa zmienia nieco sytuację.
Ważna dyrektywa ma wpływ na sposób, w jaki kaskady CSS kolidują z regułami, które uważasz za najważniejsze i powinny być stosowane. Reguła, która ma ważną dyrektywę jest zawsze stosowana bez względu na to, gdzie ta reguła pojawia się w dokumencie CSS.
Aby tekst akapitu zawsze był czerwony, z powyższego przykładu użyjesz:
p {color: red! important; important; }p {kolor: czarny; }
Teraz cały tekst pojawi się na czerwono, chociaż "czarna" wartość jest na drugim miejscu. Ważna dyrektywa unieważnia normalne zasady kaskady i nadaje temu stylowi bardzo wysoką specyfikę.
Jeśli absolutnie potrzebujesz, aby akapity wyglądały na czerwone, ten styl by to zrobił, ale to nie znaczy, że jest to dobra praktyka. Przyjrzyjmy się teraz, kiedy zechcesz użyć !, a kiedy nie jest to właściwe.
Kiedy używać! Ważne
Ważna dyrektywa jest bardzo pomocna podczas testowania i debugowania strony internetowej. Jeśli nie masz pewności, dlaczego styl nie jest stosowany i uważasz, że może to być problem specyficzności, możesz dodać ważną deklarację do swojego stylu, aby sprawdzić, czy to rozwiązuje.
Jeśli dodawanie! Ważne rzeczywiście naprawia problem z stylem, właśnie ustaliłeś, że jest to problem specyficzności. Nie chcesz jednak zostawiać tego ważnego kodu w miejscu, który został tam umieszczony tylko w celach testowych.
Ponieważ testowanie jest zakończone, powinieneś teraz usunąć tę dyrektywę i dostosować swój selektor, aby osiągnąć specyfikę, która jest niezbędna, aby Twój styl działał. ! important nie powinien wchodzić do twoich zakładów produkcyjnych, częściowo z powodu zmiany normalnej kaskady.
Jeśli pochylisz się zbytnio nad ważną deklaracją, aby osiągnąć pożądane style, w końcu będziesz miał arkusz stylowy zaśmiecony ważnymi stylami. Zasadniczo zmienisz sposób przetwarzania CSS strony. Jest to leniwa praktyka, która nie jest dobra z długoterminowego punktu widzenia zarządzania.
Użyj! Important do testowania lub, w niektórych przypadkach, kiedy absolutnie musisz nadpisać styl wbudowany, który jest częścią struktury kompozycji lub szablonu. Nawet w tych przypadkach używaj tego podejścia tak oszczędnie, jak to możliwe, a zamiast tego staraj się pisać czyste arkusze stylów, które rozumieją kaskadę.
Arkusze stylów użytkownika
Istnieje jedna uwaga końcowa na temat ważnej dyrektywy, która jest niezbędna do zrozumienia. Wprowadzono tę dyrektywę, aby pomóc użytkownikom stron internetowych radzić sobie z arkuszami stylów, które utrudniają ich używanie lub czytanie.
Zwykle, jeśli użytkownik definiuje arkusz stylów do przeglądania stron internetowych, ten arkusz stylów jest unieważniany przez arkusz stylów autora strony internetowej. Jeśli użytkownik oznaczy styl jako! Ważny, ten styl unieważnia arkusz stylów autora strony internetowej, nawet jeśli autor oznaczył regułę jako! Important.
Jest to przydatne dla użytkowników, którzy muszą ustawić style w określony sposób. Na przykład ktoś może potrzebować zwiększyć domyślne rozmiary czcionek na wszystkich stronach internetowych, z których korzystają. Korzystając z Twojej ważnej dyrektywy oszczędnie w tworzonych stronach, dostosowujesz się do specjalnych potrzeb, które mogą mieć twoi użytkownicy.
