Jeśli zamierzasz używać CSS regularnie, musisz zrozumieć, jaka jest specyfikacja i jak jest stosowana.
Poza spławikami i pozycjami, specyfika może być jedną z najtrudniejszych rzeczy do przyzwyczajenia się, nie mówiąc już o opanowaniu. Selektory używane w CSS mają różne wagi i są kontrolowane przez specyfikę. Dlatego czasami, gdy stosujesz regułę do elementu, nie ma to odzwierciedlenia w twoim projekcie.
Jeśli kiedykolwiek korzystałeś z ważnego słowa kluczowego, aby zhackować swój CSS, ten artykuł jest dla Ciebie.
Aby uzyskać solidne podstawy, musisz wiedzieć, jak przeglądarka faktycznie odczytuje CSS i w jaki sposób reguły są nadpisywane.
Po pierwsze, przeglądarka odczyta arkusz stylów od góry do dołu, co oznacza, że za pomocą tego kodu:
/*Line 10*/ul li a {color: red;}/*Line 90*/ul li a {color: blue;}Reguła podana w linii 10 zostanie nadpisana, a znacznik zakotwiczenia będzie niebieski, ponieważ przeglądarka będzie uwzględniać reguły w dalszej kolejności w CSS, aby zachować wyższy priorytet.
Działa to również w przypadku faktycznego porządku importowania plików css, na przykład:
Ponieważ umieściłeś plik custom.css po pliku style.css wszystko, co napiszesz w pliku style.css (obecnie dyskontowanie, waga selektorów) zostanie zastąpione i zastąpione tym, co jest w custom.css, technika ta jest często używana według twórców motywów, aby dać użytkownikowi trochę miejsca na dodawanie własnych stylów bez zmiany głównego pliku. (Należy jednak pamiętać, że plik custom.css nie zastępuje w całości style.css, tylko te reguły, które zostały specjalnie zastąpione, zostaną zastąpione).
Wszystko powyżej ma zastosowanie tylko wtedy, gdy używasz tej samej wagi na każdym selektorze. Jeśli określasz identyfikatory, klasy lub elementy stosów, to nadajesz im wagę, a to jest specyfika.
Istnieją cztery kategorie definiujące poziom specyficzności selektora: style śródliniowe (te są czasem używane przez javascript), identyfikatory, klasy i elementy. Jak zmierzyć specyfikę? Swoistość jest mierzona w punktach, przy czym stosowana jest najwyższa wartość punktów.
Wiedząc to, jeśli używasz selektora takiego jak to:
#content .sidebar .module li aJego całkowita waga wynosi 122 punkty (100 + 10 + 10 + 1 +1), co jest identyfikatorem, dwiema klasami i dwoma elementami.
ul li a {color: red;}Ten selektor będzie miał wagę 3, co oznacza, że wystarczy dodać klasę gdzie indziej, możesz ją przesłonić.
.content #sidebar {width: 30%;}Ten selektor ma wagę 110 punktów, głównie ze względu na identyfikator, który dodaje 100 punktów w sumie 110.
.post p:first-letter {font-size: 16px;}Ten selektor ma wagę 12 punktów, ponieważ pseudoelement: pierwsza litera waży tylko 1 punkt, podobnie jak znacznik p.
p {font-family: Helvetica, arial, sans-serif;}Ten selektor waży tylko 1 punkt, ten typ selektora powinien być używany u góry strony podczas zaznaczania podstawowych stylów, które później mogą zostać nadpisane dla określonych obszarów.
Zawsze pamiętaj, że aby zastąpić selektor ID, musisz napisać 256 klas dla tego samego elementu, jak na przykład:
#title {font-weight: bold;}.home .page .content .main .posts .post .post-content .headline-area .wrapper /* ... etc. ... */ .title {font-weight: normal;}Tylko w ten sposób drugi selektor pobije ten, używając identyfikatora.
Swoistość nie jest błyskotliwym aspektem CSS, ale moim zdaniem jest to obszar, który jest najczęściej pomijany. Prawidłowa specyfika nie tylko pomaga uniknąć błędów, ale także przyspieszy rozwój i ostateczną witrynę.
Czy nadużywasz identyfikatorów podczas pisania CSS? Czy kiedykolwiek wróciłeś! Ważne? Daj nam znać w komentarzach.
Wyróżniony obraz / miniatura, precyzyjny obraz przez Shutterstock.