Den senaste sätt att ta itu med cascade, arv och specificitet

0
11

Cascade är en så naturlig del av CSS som de uttryckte det, just det namnet. Om du någonsin behövt att använda !viktigt att påverka specificitet i den kaskad, du vet att det kan vara en svår sak att hantera. I början av CSS, var det vanligt att se mycket specifika selektorer som denna:

#sidebar ul li {}

Vi är alla mycket bättre på att hantera specificitet nuförtiden. Det är en allmänt erkänd bästa praxis för att hålla specificiteten låg och platt—shun ID-selektorer, för att göra liberal användning av klasser, och för att undvika onödiga häckning. Men det finns fortfarande gott om situationer där en mer specifik väljare kommer att vara användbart. I och med införandet av en nyligen föreslagna pseudo-klass, mer stöd av skuggan DOM, och användning av all egendom, som vi snart kommer att kunna hantera arv och specificitet på nya och spännande sätt.

De :är Pseudo-Klass

Lea Verou nyligen föreslagit att denna nya pseudo-klass är specifikt utformade för att styra specificitet. Det är redan gjort sin väg till CSS Nivå 4 Omkopplare spec. Lea har en skriva upp varför det är nyttigt och det finns någon täckning för det i CSS-Tricks almanackan.

Låt oss ta :inte som ett exempel. Specificitet :inte är lika med den särskilda karaktären av dess argument. Detta gör att använda :inte ganska smärtsamt. Ta följande som exempel:

Se Pennan :inte och specificitet med CSS-Tricks (@css-tricks) på CodePen.

Vi kan förvänta oss att .red klass skulle ha högre specificitet eftersom det är lägre i kaskad. Men för alla stilar att åsidosätta div:inte(.foobar) de skulle behöva minst en match specificitet en kombination del väljare (div) och klass väljaren (.foobar). Ett annat tillvägagångssätt skulle vara div.rött, men det finns ett bättre sätt. Det är där :är kan hjälpa till.

div: (: inte(.foobar)) {
background-color: black;
}

Av :inte-väljare inte längre tillför något specificitet, så den totala specificitet av ovanstående väljare är helt enkelt att en del väljare (div). .red klass skulle nu kunna åsidosätta den i en kaskad. När de har genomförts, specificitet hack kommer att vara ett minne blott.

Shadow DOM

Idag, många människor är med hjälp av klasser i HTML så här:

<formen class=”site-sökning på site-sökning-full”>
<input type=”text” class=”site-sökning__field”>
<button type=”Submit” class=”site-sökning__knappen”>sök</button>
</form>

När du använder shadow DOM, snarare än att följa en detaljerad naming convention, vi kommer att kunna utelämna klasser helt och hållet. Stilar som definieras i skuggan DOM är begränsad till att gälla enbart inom komponenten. Styling kan uppnås med enkla element omkopplare utan att behöva oroa om huruvida väljare kommer att störa delar någon annanstans på sidan.

Se Pennan skugga dom med CSS GRID (@cssgrid) på CodePen.

Det är befriande att skriva en sådan enkel CSS. Ingen mer ansträngning går åt till att namnge saker. Shadow DOM ser ut som det gör äntligen sin väg till full webbläsare stöd. Det är sannolikt att göra det i nästa version av Firefox medan Edge har genomförandet som en hög prioritet.

Denna webbläsare har stöd för data är från Caniuse, som har mer i detalj. En rad anger att webbläsaren stöder den funktionen på denna version och upp.

Skrivbordet

ChromeOperaFirefoxIEEdgeSafari
53 40 Inga Inga Inga TP

Mobil / Surfplatta

iOS SafariOpera MobileOpera MiniAndroidAndroid ChromeAndroid Firefox
11.0-11.2 Inga Inga 62 62 Inga

All Egendom

All egendom är ett sätt att ställa alla CSS-egenskaper på en gång—allt från att anpassa innehållet till z-index. Vilka värden som godtar det? Jag kan inte tänka mig någon användning fallet när jag, vill du att alla egenskaper för att ärva, men det är ett alternativ. Då är det första som är mer som att tillämpa en CSS-reset där alla stilar är borta. Ingen utfyllnad. Ingen marginal. Det ursprungliga värdet per fastighet, oavsett vilken del det är som tillämpas. Det initiala värdet på display inline, även om man tillämpar det på en div. Font-style för ett tag em är normala, så är det font-vikten av en stark etikett. Länk text kommer att bli svart. Du får idén. (Du kan hitta det ursprungliga värdet av CSS-egenskaper på MDN.) Detta gör kanske begränsa dess användbarhet, och att gå längre än vi kanske vill genom att ta bort alla stilar, oavsett sammanhang.

Se Pennan alla: första av CSS-GRID (@cssgrid) på CodePen.

Tyvärr, den mest användbara värde för alla är också den minst omfattning: återgå. Det kan ta bort de stilar som du som utvecklare har tillämpats, samtidigt som default user-agent stilar intakt. Vi har alla sett en sida av HTML-utan en stylesheet—svart Times New Roman på en vit (genomskinlig) bakgrund med blå understrukna länkar. Om du verkligen vill undvika arv, då alla: återställ har du omfattas. Alla divs kommer att bli display: block och spänner kommer att vara inline. Alla em-taggar kommer att vara kursiv och stark taggar kommer att vara djärv. Länkar kommer att vara blå och understrukna.

Se Pennan alla: återgå med CSS GRID (@cssgrid) på CodePen.

Denna webbläsare har stöd för data är från Caniuse, som har mer i detalj. En rad anger att webbläsaren stöder den funktionen på denna version och upp.

Skrivbordet

ChromeOperaFirefoxIEEdgeSafari
Inga Inga Inga Inga Inga 9.1

Mobil / Surfplatta

iOS SafariOpera MobileOpera MiniAndroidAndroid ChromeAndroid Firefox
9.3 Inga Inga Inga Inga Inga

Framtiden?

CSS-i-JS är ett rop på hjälp. Vi på @csswg bör uppmärksamma detta och ta itu med de frågor innan det blir värre.https://t.co/lWQ4ct61ir

— Lea Verou (@LeaVerou) 24 Maj 2017

Den miscellany av rival ostandardiserade metoder för att skriva CSS-i-JS var ett försök att kringgå dessa samma frågor. Detta synsätt har vunnit popularitet under de senaste åren. Vissa av dess förespråkare anses som arv, cascade och specificitet som i grunden felaktig konstruktion beslut av språket. CSS Arbetsgrupp vid W3C svarar genom att öka kraften i CSS och de inbyggda web-plattform. Det ska bli intressant att se resultatet…