Avklare for å imponere; Sjekk nettsteder uten CSS

HTML er kjernen i nettet. Noen ganger, i jakten på å gjøre ting ser vakkert ut med CSS, glemmer vi det. Hvis du noen gang har brukt Sass (eller en CSS-kompilator generelt), har du sikkert sett nettstedets stiler pause på grunn av en kompileringsfeil. Men før du haster for å fikse feilen du nettopp har introdusert, ta dette som en mulighet til å analysere og forbedre kjerne på nettstedet ditt: HTML.

"Feil er rett og slett muligheten til å begynne igjen, denne gangen mer intelligent." - Henry Ford

Normalt er jeg ikke en for motiverende clichés. Imidlertid kan snufeil til en mulighet for suksess holde fast når du arbeider med Sass (eller en CSS-kompilator). Bær med meg, og jeg skal forklare.

La oss begynne med en feil

Hvis du har skrevet CSS ved hjelp av Sass, har du utvilsomt sett en kompileringsfeil. I kommandolinjen ser det slik ut:

Syntaksfeil: Ugyldig CSS etter ".module": forventet "", var ""

Noen ganger kan du ikke fange den feilen på kommandolinjen. Men du vil uten tvil fange feilen når du bytter til nettleseren fordi alt ser ut til å være ødelagt!

Din første reaksjon kan være å øyeblikkelig bytte tilbake til teksteditoren, fikse syntaksfeilen du nettopp har innført, og se alt gå tilbake til det normale. Men hold igjen! Dette kan være en av disse "slå feil i en mulighet" øyeblikk.

Sassbryting kan være en flott mulighet til å se nettstedet ditt i nakken, helt avklart. Ingen styling, bare ren, untainted HTML, essensen av nettet på det kjernen. Du ser, når nettleseren gjør en forespørsel, blir det vanligvis en enkelt .html fil-ren hyptertext-og det er det. Alt annet (dvs. CSS og Javascript) er en forbedring. Som Jeremy Keith sier,  

"Hver linje CSS du skriver er et forslag. Du dikterer ikke hvordan HTML-en skal gjengis. Du foreslår hvordan HTML-en skal gjengis. Jeg finner det for å være en svært frigjørende og empowerende ide. " 

CSS-stilregler er noen av de første forbedringene du bruker på et HTML-dokument og fungerer som forslag, ikke kommandoer, for hvordan siden skal se ut. Å se disse stiler pause kan være en mulighet til å stoppe og analysere kjernen din webside-HTML-og forbedre det hvis det er nødvendig. HTML er et langsiktig format som har eksistert i en stund. Ikke bare fungerer det første nettstedet fortsatt, det er også effektivt! 

Som Ian Yates sa, 

"Alle nettsteder er responsive som standard, til vi begynner å legge til stiler og bryte dem."

Når du ser på den rene HTML på siden din, kan du stille spørsmål som: 

  1. Er nettstedet mitt HTML-struktur fornuftig, det vil si det er lesbart og forståelig på egen hånd, uten noen CSS (eller JavaScript)? 
  2. Merker jeg ordentlig innholdet mitt, dvs..
      for uordnede lister over varer, men a
      når du definerer forhold mellom elementer? 
    • Betegner jeg semantisk rike variasjoner i teksten ved hjelp av tagger som og hvor det er hensiktsmessig, snarere enn generiske tagger som ?

Jeg har en ide: hva med å teste dette ut på din egen eksisterende nettside akkurat nå? Gå til nettstedet ditt, åpne utviklerverktøyene, finn .css fil bruker nettstedet ditt, og fjern alle stilregler.

Tips: Alternativt kan utvidelser som for eksempel Web Developer-plugin-modulen for Chrome gjøre det enkelt å bytte CSS-stiler.

Se på det! På mitt eget nettsted har jeg funnet rom for forbedring. Det er noen HTML-elementer som ikke er viktige uten JavaScript. Jeg bør fjerne dem slik at de ikke er til stede i DOM, og legg dem senere med JavaScript som forbedringer. I tillegg kan noen av listekomponentene være tweaked og enhetlig i semantikk. Men dette handler ikke om meg, la oss komme tilbake til å snakke om din nettsted.

Din nettside

Bla ned gjennom din "nakne" side og prøv å lese innholdet. Gir det mening? Er ting som skal være overskrifter merket opp som overskrifter? Er ting som skal være lister? Hvis ikke, vurder vurderingen din på nytt. HTML er hva som utgjør ditt nettsted på sitt mest grunnleggende nivå. Justin Jackson har et godt eksempel på dette. Når du har noen solid, semantisk HTML til å begynne med, kan du være trygg på at selv om ingenting annet på siden din lastes, men HTML, kan brukerne fortsatt lese og forstå meldingen din (søkemotorer også). 

a11y

Universelt tilgjengelig innhold er en kjerneherre på nettet og er alltid et flott sted å starte. Tale i 2004 om denne tilgjengelige, semantiske tilnærmingen til webdesign, uttalte Jeffery Veen, 

"[Jeg leverer] løsninger til klientene mine som er langt mindre komplekse å implementere, er mye enklere å vedlikeholde, kostnader eksponentielt mindre å tjene, jobber på flere nettlesere og enheter, gjør det bedre i søkemotor lotteriet, og - selvfølgelig - er tilgjengelig for alle ... alle ... bruker nettet i dag. Og prøv å argumentere med forretningsmessige verdier av det. Og det er derfor jeg bryr meg ikke om tilgjengelighet. Fordi når webdesign praktiseres som et håndverk, og ikke en trøst, kommer tilgjengeligheten gratis. "

Konklusjon

Så neste gang du tilpasser nettstedets CSS med Sass og du treffer en kompileringsfeil, tar du det som en mulighet til å undersøke det virkelige innholdet og strukturen til nettstedet ditt: HTML. Det kan være en av de øyeblikkene hvor en fiasko ender opp, utlåner seg til en ekte mulighet for anrikning som ellers ville vært savnet.