Co je to důležité v CSS?

Důležitá síla změní kaskádu

Jedním z nejlepších způsobů, jak se naučit kódovat webové stránky, je podívat se na zdrojové kódy jiných webů. Tato praxe je, kolik webových profesionálů se naučilo své řemeslo, a to zejména ve dnech předtím, než bylo k dispozici mnoho možností pro kurzy , knihy a internetové vzdělávací weby.

Pokud se pokusíte tuto praxi a podíváte se na kaskádové styly (CSS) stránek, jedna věc, kterou můžete vidět v tomto kódu, je řádek, který říká! Důležitý.

Co to znamená, a stejně tak důležitě, jak správně používáte toto prohlášení ve vašem stylu?

Kaskáda CSS

Především je důležité si uvědomit, že kaskádové styly mají skutečně kaskádu , což znamená, že jsou umístěny v určitém pořadí. Obecně platí, že tyto styly se používají v pořadí, v jakém prohlížeč přečte. První styl je aplikován a pak druhý a tak dále.

Výsledkem je, že pokud se v horní části listu stylů objeví styl a v dokumentu se změní dolní down, druhou instancí tohoto stylu je druhá, která se použije v následujících instancích, nikoliv první. V podstatě platí, že jestliže dva styly říkají totéž (což znamená, že mají stejnou úroveň specifičnosti), použije se poslední.

Představme si například, že tyto styly byly obsaženy v listu stylů. Text odstavce by byl vykreslen v černé barvě, i když první použitá vlastnost stylu je červená.

Je to proto, že "černá" hodnota je druhá. Vzhledem k tomu, že CSS je čteno shora dolů, konečný styl je "černý" a proto vyhrává.

p {barva: červená; }}
p {barva: černá; }}

Jak důležité! Změní prioritu

Nyní, když pochopíte, jak tyto CSS prakticky zpracovávají téměř totožná pravidla, můžeme se podívat na to, jak důležitá směrnice mění věci trochu.

Důležitá směrnice ovlivňuje způsob, jakým váš CSS kaskádový systém sleduje pravidla, která považujete za nejdůležitější a která by měla být použita. Pravidlo, které má důležitou směrnici, se vždy použije bez ohledu na to, kde se pravidlo objeví v dokumentu CSS.

Chcete-li text odstavce vždy červeně, z výše uvedeného příkladu použijete:

p {barva: červená! důležitá; }}
p {barva: černá; }}

Nyní se celý text zobrazí červeně, přestože hodnota "černá" je uvedena na druhé. Důležitá směrnice převyšuje normální pravidla kaskády a dává tomuto stylu velmi vysokou specifičnost.

Pokud naprosto potřebujete, aby odstavce vypadaly červeně, tento styl by to udělal, ale to neznamená, že je to dobrý postup. Podívejme se dále na to, kdy budete chtít použít! Důležité a když to není vhodné.

Kdy je důležité!

Důležitá směrnice je velmi užitečná při testování a ladění webových stránek. Pokud si nejste jisti, proč není použit styl a myslíte si, že to může být problém s určitostí, můžete přidat do vašeho stylu důležitou deklaraci, abyste zjistili, zda to opravuje.

Pokud je přidání důležitého opravdu opravit problém stylu, právě jste zjistili, že jde o problém specifické povahy. Nicméně nechcete opustit ten důležitý kód, který byl umístěn pouze pro testovací účely.

Vzhledem k tomu, že testování je provedeno, měli byste nyní tuto směrnici odstranit a přizpůsobit volič, abyste dosáhli specifičnosti, které potřebujete k tomu, aby váš styl fungoval. Důležité by se nemělo dostat do svých výrobních míst, částečně kvůli tomu, jak změní normální kaskádu.

Pokud se příliš nakloníte na důležitou deklaraci, abyste dosáhli požadovaných stylů, nakonec budete mít stylový list plný důležitých stylů. Budete zásadně měnit způsob zpracování stránky CSS. Je to líná praxe, která není z dlouhodobého hlediska správná.

Použijte! Důležité pro testování, nebo v některých případech, když absolutně musíte přepsat inline styl, který je součástí tematického rámce nebo šablony.

Dokonce i v těch případech použijte tento přístup co nejmenší a namísto toho se snažte psát čisté listy stylů, které pochopí kaskádu.

Uživatelské styly

Existuje jedna poslední poznámka o důležité směrnici, která je nezbytná k pochopení. Tato směrnice byla také zavedena tak, aby pomohla uživatelům webových stránek vyrovnat se se stylovými listy, díky nimž je obtížné používat stránky nebo číst.

Typicky, pokud uživatel definuje stránku stylů pro prohlížení webových stránek, tento stylový styl je převzato ze seznamu stylů autorů webových stránek. Pokud uživatel označuje styl jako důležitý, tento styl převrací list stylu autora webové stránky, i když autor označuje pravidlo za důležité!

To je užitečné pro uživatele, kteří potřebují nastavit styly určitým způsobem. Někdo například může potřebovat zvýšit výchozí velikost písma na všech webových stránkách, které používají. Použitím důležitých směrnic v rámci stránek, které sestavujete, se můžete přizpůsobit všem speciálním potřebám vašich uživatelů.

Upravil Jeremy Girard