CSS !Ważne: co to jest i kiedy go używać

Opublikowany: 2020-06-27

Jednym z najbardziej użytecznych i kontrowersyjnych elementów CSS jest właściwość !important . Każdy projektant w pewnym momencie natknie się na tag w kodzie CSS. Prawdziwym pytaniem i dylematem, który pojawia się, gdy tak się dzieje, jest „czy użyto go prawidłowo?” Ponieważ CSS !important jest tak potężnym narzędziem, programiści i projektanci muszą być świadomi najlepszych praktyk podczas korzystania z niego. CSS !ważne może prowadzić do wszelkiego rodzaju kodu spaghetti, a to nie jest dobre dla nikogo.

Co to jest CSS ważne?

Właściwość !important w CSS wskazuje, że każda reguła, do której jest dołączona, ma pierwszeństwo przed innymi regułami. Jest to najwyższy priorytet dla elementu i selektora, z którym jest używany, dlatego pozwala programistom i projektantom mieć określoną kontrolę nad stylizacją poszczególnych części witryny. W większości przypadków oznacza to zastąpienie domyślnego stylu witryny zawartego w styles.css lub custom.css .

Każde wystąpienie !important dotyczy tylko określonego wiersza, w którym się pojawia . Możesz więc użyć tej właściwości w niektórych, ale nie we wszystkich częściach fragmentu. Kod CSS dla !important wygląda tak:

.example-class {
	color:#fff!important;
}

Najważniejszą rzeczą do zapamiętania z !important jest dwojaka:

  1. słowo ważne musi być zawsze poprzedzone wykrzyknikiem (!)
  2. średnik musi zawsze znajdować się na końcu wiersza, po !ważna deklaracja

!important może być nawet używany na zasadzie strona po stronie lub moduł po module (w przypadku kreatorów stron, takich jak Divi), jeśli chcesz — chociaż w ten sposób dostajesz się do kodu spaghetti tego, co nadpisuje który element na na której stronie iw jakiej kolejności?

Każdy projektant w pewnym momencie natknie się na ważny tag CSS i będzie musiał podjąć decyzję. Czy warto zastąpić domyślną stylizację witryny?

Czasami odpowiedź brzmi: tak. Innym razem jest to twarde i szybkie nie. Przyjrzyjmy się kilku najlepszym praktykom z CSS, które są ważne, aby wiedzieć, kiedy prawdopodobnie niczego nie zepsuje, ani teraz, ani w przyszłości.

Kiedy używać CSS Ważne

Podstawowym (i najczęściej akceptowanym) zastosowaniem !ważne jest to, gdy chcesz, aby klasa, która współdziała z selektorem podstawowym, miała inny styl. Być może chcesz, aby nagłówek tytułu i metainformacje na Twoich blogach miały inną czcionkę i kolor niż reszta witryny. Domyślna stylizacja tych elementów jest dziedziczona z selektorów h1 i p w plikach CSS. Niezależnie od ustawień domyślnych witryny w plikach .css lub w dostosowywaniu motywu WordPress zostaną wyświetlone.

p {
	font-weight: 400;
	font-size: 1.1rem;
	line-height: 1.7;
	color: #111;
	font-family:'Roboto';
}

h1 {
	margin-top: 30px;
	margin-bottom: 15px;
	color: #000;
	font-family:'Lato';
}

Możesz zmienić poszczególne elementy, które chcesz (tytuł posta na blogu i metainformacje) za pomocą klas . tytuł-wpisu i .post-meta. A ponieważ chcesz, aby nadal dziedziczyły niektóre style z rodzica h1 i p , użyjesz h1.entry-title i p.post-meta, aby je wywołać.

h1.entry-title, p.post-meta {
	color: white!important;
	font-family:'Poppins'!important;
}

Umieszczenie tych fragmentów w tym samym arkuszu stylów spowoduje, że górny kod zacznie obowiązywać we wszystkich przypadkach, z wyjątkiem sytuacji, gdy wyświetlane są tytuły postów i meta postów. Ważna właściwość CSS zastępuje wartość domyślną i pozwala ci mieć nad nią dokładną kontrolę.

Ten rodzaj indywidualnego dostosowywania jest głównym zastosowaniem !important . Ale nie jedyny.

Używaj CSS ważnego do ochrony klas, identyfikatorów i elementów

Możesz również użyć !ważne, aby zabezpieczyć różne elementy swojej strony w przyszłości, aby dalszy rozwój witryny mógł zostać poprawiony w nieoczekiwany sposób. Możesz na przykład opracować określony styl dla pól subskrypcji lub opcji zgody na e-mail lub osadzania na YouTube. Każdy z nich może dziedziczyć różne style z twoich arkuszy stylów w różnych miejscach. Użycie tagu !important może sprawić, że zmiana stylu formularzy lub przycisków wymaga przemyślanej ręki.

Po prostu nazwij element klasą lub identyfikatorem, a następnie umieść !important w każdym wierszu.

.youtube-embed {
	font-family:'Exo'!important;
	font-weight: 700!important;
	line-height:1.4rem!important;
	margin-top:25px!important;
	margin-left:auto!important;
	margin-right:auto!important
	color:#449928!important;
	padding:11px!important;
	background:#998899;
}

Voila! Zabezpieczony na przyszłość dzięki regularnym zmianom w Twoich arkuszach stylów.

Korzystanie ze stylów wbudowanych

Jest to jeden z tych przypadków użycia, które mogą, ale nie muszą, pojawić się u wielu osób. Kiedyś było to bardzo powszechne, ale stało się mniej, ponieważ odeszliśmy od ręcznego kodowania naszych postów i stron. Jeśli jednak kiedykolwiek zagłębisz się w kod HTML bloku Gutenberga lub widok tekstu klasycznego edytora WordPress, możesz absolutnie użyć !ważne z wbudowanymi stylami CSS.

<div class="special-paragraph" style="color:#blue!important;">
	<p>This text will show up blue now!</p>
</div>

Jest to ważne z kilku powodów. Po pierwsze, możesz kontrolować dowolny wiersz kodu na swojej stronie, używając style=”x:y!important;” a po drugie, możesz zastąpić dowolny CSS już zastosowany do tej strony. Nawet jeśli ta wartość ma również !ważne . Na przykład:

<style> 
	p { 
	    color:#313373!important;
	    font-size:2rem; 
	} 

    </style> 

<div class="special-paragraph" style="color:#blue!important;">
	<p>This text will show up blue now, even though there's another !important tag
		applied to the paragraph selector on this page!</p>
</div>

Nawet jeśli istnieje osadzony styl HTML przy użyciu <style></style>, który używa !ważny na tym samym selektorze, wbudowany CSS, który jest skierowany do określonego akapitu, będzie tym, który jest renderowany.

Uważaj na układanie ważnych tagów

Weźmy te ostatnie kilka przykładów i ostrzeżmy. Tego typu zastosowania są dobre w małych dawkach. Możesz wykorzystać je w jednorazowych sytuacjach i prawdopodobnie nikt nigdy nie będzie miał z tym problemu. Ponieważ, jako jednorazowy, specjalnie użyłeś !ważne do stylizacji pojedynczego elementu. Do czego jest przeznaczony .

Jednakże, jeśli zaczniesz używać !ważne jako podpory, jako sposobu na uniknięcie częstego edytowania arkuszy stylów lub jako szybkiego rozwiązania wielu problemów w tej samej witrynie, to jest początek kodu spaghetti. Zwłaszcza dla przyszłych twórców, którzy nie są tobą. Chociaż możesz mieć trudności z ustaleniem kolejności renderowania !ważnych , przyszły programista może uznać to za niemożliwe.

To, co się ostatecznie dzieje, to to, że w witrynie jest tak wiele ułożonych !ważnych elementów, które wchodzą w interakcję z wieloma arkuszami stylów, stronami i modułami, że normalny CSS rzadko renderuje. A czasami nawet coś oznaczonego jako !ważne nie jest renderowane. Albo co gorsza, każda późniejsza zmiana musi być oznaczona !ważne tylko po to, aby się pojawiła, chyba że chcesz zburzyć stylizację witryny i zbudować ją od nowa.

Zawijanie

CSS ważne jest szczerze jednym z najpotężniejszych narzędzi w zestawie narzędzi projektanta. Możesz łatwo dostosować dowolny element na swojej stronie, nie martwiąc się o wpływ na podwładnych lub kolegów. Ale jeśli go nadużywasz, efekty mogą spływać kaskadą do koszmaru stron i elementów próbujących się wzajemnie zastępować, a to, co kiedyś było ważne, stało się domyślne, ale nie można go ustawić jako domyślnego. Staraj się więc używać !ważne oszczędnie, aby gdy potrzebujesz czegoś, co się wyróżnia lub jest zabezpieczony na przyszłość, robisz to we właściwy sposób.

Co myślisz o używaniu CSS !ważne w Twoich projektach?

Artykuł wyróżniony obrazem autorstwa wan wei / shutterstock.com