Een van de beste manieren om websites te leren coderen, is door te kijken naar de broncodes van andere sites. Deze praktijk is hoeveel webprofessionals hun vak hebben geleerd, vooral in de dagen voordat er zoveel opties waren voor webdesign cursussen, boeken en online trainingssites.
Als u deze oefening probeert en naar de trapsgewijze stijlbladen van een site kijkt, kunt u in die code een regel zien die zegt !belangrijk. Deze term verandert de prioriteit van verwerking binnen de stylesheet.
De Cascade van CSS
Cascading style sheets doen dat inderdaad cascade, wat betekent dat ze in een bepaalde volgorde worden geplaatst. Over het algemeen worden de stijlen toegepast in de volgorde waarin ze door de browser worden gelezen. De eerste stijl wordt toegepast en dan de tweede, enzovoort.
Als een stijl dus bovenaan een stijlblad verschijnt en vervolgens lager in het document wordt gewijzigd, is de tweede instantie van die stijl degene die in de volgende gevallen wordt toegepast, niet de eerste. Kortom, als twee stijlen hetzelfde zeggen (wat betekent dat ze dezelfde mate van specificiteit hebben), wordt de laatst genoemde gebruikt.
Laten we ons bijvoorbeeld voorstellen dat de volgende stijlen in een stylesheet waren opgenomen. De alineatekst wordt in zwart weergegeven, ook al is de eerste toegepaste stijleigenschap rood. Dit komt omdat de "zwarte" waarde als tweede wordt vermeld. Omdat CSS van boven naar beneden wordt gelezen, is de uiteindelijke stijl "zwart" en daarom wint die.
p { kleur: rood; }
p { kleur: zwart; }
Hoe !belangrijk de prioriteit verandert?
De !belangrijk richtlijn beïnvloedt de manier waarop uw CSS cascadeert terwijl u de regels volgt die volgens u het meest cruciaal zijn en moeten worden toegepast. Een regel met deze richtlijn wordt altijd toegepast, ongeacht waar die regel in het CSS-document staat.
Om de alineatekst altijd rood te maken uit het vorige voorbeeld, wijzigt u de stijl als volgt:
p { kleur: rood !belangrijk; }
p { kleur: zwart; }
Nu zal alle tekst in het rood verschijnen, ook al staat de "zwarte" waarde als tweede vermeld. De !important-richtlijn heft de normale regels van de cascade op en geeft die stijl een zeer hoge specificiteit.
Als je absoluut de alinea's rood wilt laten lijken, zou deze stijl het doen, maar dat betekent niet dat dit een goede gewoonte is.
Wanneer te gebruiken !belangrijk
De !important-richtlijn is handig wanneer u een website test en debugt. Als u niet zeker weet waarom een stijl niet wordt toegepast en denkt dat het een specificiteitsconflict is, voegt u de !important-verklaring toe aan uw stijl om te zien of dat het oplost - en als dat het geval is, verander dan de volgorde van de selectors en verwijder de !important-richtlijnen uit uw productie code.
Als u te zwaar leunt op de !belangrijk-verklaring om uw gewenste stijlen te bereiken, zult u uiteindelijk een stylesheet hebben die bezaaid is met !belangrijke stijlen. U verandert fundamenteel de manier waarop de CSS van die pagina wordt verwerkt. Het is een luie praktijk die niet goed is vanuit het oogpunt van beheer op de lange termijn.
Gebruik !important voor het testen of, in sommige gevallen, wanneer u absoluut een inline-stijl moet overschrijven die deel uitmaakt van een thema of sjabloonframework. Zelfs in die gevallen, gebruik deze benadering spaarzaam en schrijf in plaats daarvan schone stylesheets die de cascade.
Stijlbladen voor gebruikers
Deze richtlijn is ook ingevoerd om gebruikers van webpagina's te helpen omgaan met stylesheets die het voor hen moeilijk maken om pagina's te gebruiken of te lezen.
Wanneer iemand definieert een stylesheet om webpagina's te bekijken, wordt die stylesheet overschreven door de stylesheet van de auteur van de pagina. Als de gebruiker een stijl markeert als !belangrijk, overschrijft die stijl het opmaakmodel van de auteur van de webpagina, zelfs als de auteur een regel markeert als !belangrijk.
Deze hiërarchie is handig voor gebruikers die stijlen op een bepaalde manier moeten instellen. Een visueel gehandicapte lezer moet bijvoorbeeld mogelijk de standaardlettergrootte op alle webpagina's die ze gebruiken vergroten. Door uw !belangrijke richtlijn spaarzaam te gebruiken binnen de pagina's die u bouwt, komt u tegemoet aan de unieke behoeften van uw lezers.