!important - správne použitie

Tomáš123:
Vlastní styly » Skládání stylů

Bežne by sa important nemalo používať... ak vieš, ako robíš CSS, tak ti important vôbec netreba. Ja osobne som nútený ho použiť čas od času iba v iestyle.css, čo je CSS pre IE 8. Tam niekedy treba important, lebo to zavše neprebije vlastnosť definovanú v normálnom style.css

jefitto44:
„Ja osobne som nútený ho použiť čas od času iba v iestyle.css, čo je CSS pre IE 8.“
Já osobně bych viděl chybu v autorovi iestyle.css.

nj... možno

Ešte jedna vec... keď stiahnem tému pre WordPress napr... a CSSko má cez 5000 riadkov. Rovnaké veci zvyknú byť definované vo viacerých pravidlách... je to neprehľadné a vtedy sa mi s tým nechce onačiť, preto tam dám !important a ide všetko ako chcem :D

jefitto44:
„vtedy sa mi s tým nechce onačiť, preto tam dám !important a ide všetko ako chcem :D“
Takže abys nemusel ve vývojářském nástroji hledat vítězný zápis, přidáš 5001. řádek, který nepůjde přebít. Zvlášť nepříjemné to bude, až po čase zjistíš, že si těmi „silnými“ pravidly jinde něco rozbíjíš.

Nie, lenže niektoré témy sú proste metal... Máš tam napr. položku menu charakterizovanú na štyroch rôznych miestach a je tam charakterizované presne to isté... neviem, prečo to tak robia...
No tak vtedy použijem important

Na to celkem funguje chromí nástroje, ty napráskají všechny místa kde ten styl je definovaný. Mě se taky občas stane, že u větších projektů napíšu stylování 2x. Jakmile pak mrknu do nástrojů, tak vím, že už to jednou v default.css na řádku 86 mám.

jefitto44:
Nejspíš to tak je, aby ty stylopisy mohly fungovat i nezávisle na sobě.
Přišlo by mi praktičtější ověřit, jak velká pasáž se opakuje, a smazat ji, než přidávat další zápis, kterým si případné další úpravy komplikuješ. Musíš si totiž uvědomit, že !important přemlátí nejen inline zápisy, ale taky konkrétnější selektory (mám na mysli to, čemu Yuhů říká podrobnější selektor). Pokud na práci se styly nepoužíváš specializovaný nástroj, který by ti duplicity hledal, stejně musíš projít celý stylopis, abys zjistil, zda se v něm takové konkrétnější selektory nevyskytují.

Používam F12 v chrome a nejaké doplnky k tomu

jefitto44:
„Máš tam napr. položku menu charakterizovanú na štyroch rôznych miestach a je tam charakterizované presne to isté“
Vždy se ale použije právě jeden nejdůležitější styl, který se vybírá jasně daným postupem.

Mohou nastat dva problémy:
1. Můj selektor sice zaměří všechny požadované prvky, ale má moc nízkou váhu a přebíjejí ho jiné styly.
Řešení může být konkretizovat ten selektor (například li.polozka má větší váhu než .polozka, jestliže tu třídu stejně používám jen na prvky <li>; Nebo se například může ukázat, že tytéž prvky, které zaměřuji přes div p a, můžu vybrat selektorem a.jedna, a.dva), nebo konkrétnější selektor přidat do seznamu (když třeba styl .polozka je přebíjen stylem #idecko li, můžu napsat .polozka, #idecko .polozka).

2. Můj styl se použije i na prvky, kde ho nechci.
Pak můžu jít na ty jiné styly a tam řešit problém 1. Nebo můj styl konkretizovat tak, aby ty prvky nezahrnul. Nebo (někdy) můj styl naopak zobecnit a snížit jeho váhu natolik, že ho ty jiné styly přebijí.

Použití !important má sice výhodu, že vyřeší první problém aniž by člověk musel přemýšlet, zato ale vytváří druhý problém a později u dalších stylů znovu první problém, který se obtížně řeší (typický příznak je otázka „Neexistuje nějaké !!important, které by přebilo !important?“).

Já občas používám !important ve spolupráci s naskriptovanými věcmi.

Pokud skriptem měním třeba nějaké souřadnice left a top (tzn. měním vlastně přímo atribut style, který mívá běžně nejvyšší prioritu) a tyto hodnoty se mají v nějakém stavu ignorovat, přebíjím je tím, že jim přes nějakou třídu společného rodiče nastavím výchozí hodnoty s !importantem (není-li možné jim dát position: static).

Nebo jiný případ — server mi generuje do HTML style="background-image: url(obrázek.jpg)" (jelikož jen on zná URL obrázku) a já zatím nechci, aby se obrázek načítal, tak dám co nejdříve skriptem rodičovi třídu, která nastaví dotyčným elementům background-image: none !important.

A ještě třetí možnost využití, v contenteditable mívá uživatel velkou volnost v tom, co vloží. Může běžně vložit formátovaný kus DOMu ze schránky či přetažením. Pokud se mu nechci plést pod prsty, ale jen jemně naznačit, že velké růžové písmo nebude velké, ani růžové, že element s obrázkem na pozadí nemůže mít pozadí, že <input> či <iframe> ve výsledku neuvidí a že vloženým obrázkům nemůže změnit velikost, také k tomu používám supersilné CSS předpisy s !importantem.

Nepotřebuji-li přebíjet atribut style, nemám pro !important rozumné využití.