Forklarer hvorfor styling ikke skal gjøres direkte i HTML

ItamarG3 08/15/2017. 12 answers, 2.942 views
lesson-ideas web-development html css

Jeg har nylig lagt merke til at er blitt avskrevet fra html i henhold til dette nettstedet . Fra dette svaret på Stack Overflow , er teltutskiftet laget av CSS. Forklaringen gitt til endringen er at html handler om dokumentstruktur, og at layout og animasjon og styling etc. skal gjøres fra CSS.

Dette fikk meg til å tenke:

Vil du eksplisitt lære forskjellen mellom å sette stilattributtet til en html tag, og gjøre det gjennom CSS som er nyttig for å øke studentenes forståelse for sammenføyning av CSS og HTML?

For å begrense det, ser jeg etter eksempler eller forklaringer på hvordan undervisning eksplisitt kan gjøre det lettere for elevene å stilte sine nettsider . Fortrinnsvis en forklaring.

Ved "eksplisitt undervisning" betyr det egentlig en lesning med tittelen "Styling through .CSS", eller noe lignende.

Noen sammenheng, hvis det trengs:

Studentene lærer grunnleggende webdesign: HTML, JavaScript (veldig grunnleggende), JSP og SQL. De lærer disse i 1 år og i slutten av året bør de ha et nettsted (som de får karakterer for). Jeg lurer på om en leksjon helt om CSS kan føre til bedre utseende nettsteder.

5 Comments
3 Puppy 07/30/2017
Kjerneproblemet her er at du antar at styling ikke skal gjøres direkte i HTML, og at bruk av CSS er bedre. Ingen av disse tingene er sant.
ItamarG3 07/31/2017
@Puppy bra, en del av spørsmålet er om jeg skal lære det separat. Hvis jeg ikke gjør det, vil de ikke bruke stilark. Men tror du noen nettside hvor som helst hardcodes, alt er det css i html? Every div har et fjell med kode i sin stilattributt?
1 David Spence 07/31/2017
Dette nettstedet viser kraften til å holde css separat. csszengarden.com - Samme struktur, annerledes css stilark.
ItamarG3 07/31/2017
@DavidSpence fint. Jeg vil definitivt bruke det
1 no comprende 07/31/2017
Uansett hva du gjør, må du ikke vise dem dette så innlegget om å analysere HTML med Regex . Kan gi dem mareritt!

12 Answers


richard 07/30/2017.

Jeg liker ideen om å produsere noen stilark, og at elevene bruker dem til deres HTML. De kan da se kraften i å ha separate stilark.

De kan da begynne å redigere stilarkene, og se kraften til en liten forandring kan endre hver overskrift, eller hvert avsnitt etc.

Jeg har også tidligere skrevet en HTML-fil som hadde et sett med knapper nederst. Disse knappene vil utløse en annen CSS-fil som skal lastes inn. Det var noen veldig enkle JavaScript.

For å svare bør de holdes skilt

Å holde stil og innhold skilt, anbefales av W3 og mange andre. Det implementerer separasjon av bekymringer og enkeltansvar. Begge veldig viktige mønstre i programvare design.

For å svare bør du bruke en leksjon for å skille CSS-filer.

Ja. Hvis det er viktig å holde disse separate, som det er, bør du lære elevene å holde dem skilt. Spar tid ved å ikke lære dem å blande den inn med HTML-en (dette sparer tid to ganger, siden du ikke trenger å undervise det).


Jeg har bare gjort dette med en eller to personer (ikke en klasse).

5 comments
ItamarG3 07/30/2017
Det andre avsnittet lyder spesielt nyttig. Men det svarer ikke om jeg egentlig burde bruke en leksjon for å lære hvordan og hvorfor man skal skrive et css-stilark, i stedet for inline-html-stilattributter.
richard 07/30/2017
Lagt til et delvis svar til If og hvorfor å tilegne seg en leksjon til den.
1 Buffy 07/30/2017
Jeg er enig i at un-undervisning er en spesielt sløsende bruk av alles tid. Det er best å fange misforståelser før dårlige vaner er bygget og forsterket.
1 richard 07/30/2017
@ tim, dette er bare en lastoptimalisering. Konseptualitet skal det fortsatt være separat. Men Google sier å sette det i samme fil. De sier ikke at du bør stile hver bit separat. De sier ta hva som kan være i en css-fil og legg den til i delen <style> i html.
1 Darren 07/31/2017
I stedet for å gi studentene en rekke stilark som påvirker koden, ville jeg prøve den motsatte tilnærmingen. Etter å ha lært dem inline-stiler i HTML, gi dem en side som bygger på et CSS-dokument for sin stil og be dem om å lage sitt eget stilark for det (ved hjelp av de samme teknikkene de lærte av å bruke inline HTML - bare et spørsmål om å merke stilene og sette dem sammen på ett sted). Da kan alle i klassen sammenligne stilarkene sine på et felles testemne (den du oppgav) og se mulighetene.

Buffy 07/30/2017.

Hvis du bare vil bygge en side som er enkel og ad hoc og aldri vil endre seg i fremtiden, og vil bare bli sett på en type enhet, så må du bygge stilen direkte inn i html. Det er det samme når du skriver et program som bare vil bli kjørt en gang på en enhet for å få svar, hvoretter programmet blir foreldet. Det er da ingen grunn til å kode nøye. "Rask og skitten" fungerer for slike ting.

However ting endres, og nettsider vises på enheter med varierende skjermstørrelser, til og med fargemodeller. Og de kan bli vist i fremtiden på enheter som ikke eksisterer ennå.

Så hvis du vil bygge områder som er viktige og varige, og det må opprettholdes i fremtiden, bruk CSS. Du vil sannsynligvis ikke skrive et viktig C-program alt i main , men vil i det minste, faktorere ut de tingene som må være de samme, men gjenbrukes. I enkel C programmering faktoriserer vi ut funksjonene for dette. I html vi faktor ut styling. På et dypere nivå tjener server siden også mye av dataene, etc. Dette lar ting som skal være det samme, forblir det samme, og lar oss endre et designnivå uavhengig av andre nivåer.

Dette er ikke akkurat det samme, men se på den underliggende koden til Googles forside. Jeg vet ikke hva de bruker til å sette det sammen og vedlikeholde det, men jeg tviler på at det bare er en tekstredigerer. Legg merke til at deres forside , selv om det er utrolig enkelt i layout, endres ofte.

Note to the Instructor Når du er klar til å rangere studentens arbeid, kan du se det på ulike enheter, med forskjellige skjermoppløsninger. Jeg foreslår imidlertid ikke at du også får dem til å gi per-enhet css.

For øvrig, se noen av StackExchange-sidene på et skrivebord mot en telefon. Og for en shocker, se på både kilden og stilarkene til noen av sidene.

2 comments
1 Luke Sawczak 07/31/2017
Sammenligningen med funksjoner er god. Jeg antar at den aktuelle synden direkte leverer stilattributter i kilde HTML. I så fall kan det sammenlignes med å ta kroppen til en metode og bare stikke det der du skulle kalle metoden. Motproduktiv i det ytre.
no comprende 08/01/2017
For en ekte shocker, se kilden og stilarkene til Microsoft-sider og Moodle! De kan være hundrevis av linjer lange. Det opprinnelige konseptet med HTML var at det ville fungere på enheter som "ikke eksisterer" ennå. Og det er for øyeblikket så mange skjermstørrelser at det bare kan være en variabel.

AnoE 07/30/2017.

For å få dem til å forstå hva du kan gjøre med CSS alene - only erstatte en annen CSS-fil - ta dem til CSS Zen Garden . Med akkurat samme HTML for hver side, og only .css-filen erstattet, blir du absurd villede sider. Fra rolig liten ingenting til 3D-rullende kuber ...

Forklar deretter for dem at ferdighetene som trengs for å lage HTML, versus ferdighetene for (spesielt ekstreme som de) CSS er svært forskjellige, og at HTML-funksjonen bare fungerer som informasjonsbærer.

En annen godbit ville være å installere en skjermleser (for blinde) - det er de med begrenset fri bruk - for å vise dem hvordan den samme HTML "ser ut" når det blir sagt høyt.

Påpek også at disse verktøyene for synshemmede er i stand til for eksempel å trekke ut koblingstekster og så videre fra HTML hvis den er godt strukturert, og dette gjør det også mulig å navigere på en side med tastatur bare - noe som kan være nyttig hvis en er så tilbøyelig, selv om synet er bra.

Til slutt påpeke at en side med god adskillelse av innhold og styling har større sjanse til å jobbe med bærbare enheter - nøkkelordet er responsivt design, hvor innholdet fritt kan flyte inn i en hvilken som helst oppløsning etter behov.


thehayro 07/30/2017.

For å begrense det, ser jeg etter eksempler eller forklaringer på hvordan undervisning eksplisitt kan gjøre det lettere for elevene å stilte sine nettsider. Fortrinnsvis en forklaring.

Som Richard sier, kan elevene se hvordan en enkel redigering av stilen kan endre hvert element.

Som et eksempel kan du la elevene dine føle fordelene ved å adskille stilen fra html. Hvilket betyr, gi dem en øvelse, der de trenger å style noen elementer (f. Eks. Elementets bakgrunn) i deres html. La dem da forandre hvert element til en annen farge. Leksjonen ville være å la dem forstå at denne oppgaven kan være mye mindre tidkrevende hvis du skiller stilen fra html. Du kan da vise hvordan du endrer en linje i css, som endrer alle elementene bakgrunnsfarge.

4 comments
thesecretmaster♦ 07/30/2017
HI thehayro! Velkommen til Computer Science Educators !
Puppy 07/30/2017
Alternativt kan de generere sin HTML-kode som en sane person, i så fall er det trivielt å endre fargen på hvert element uten separate stilark.
1 thehayro 07/30/2017
Sikker. Det er opp til kravene der nettsiden skal vises (mobil / desktop). Men spørsmålet så langt jeg forsto det, var hvordan man forklarte hvorfor og hvordan det er behov for en separasjon av HTML og CSS.
no comprende 08/01/2017
Da jeg lærte CSS, ga jeg meg selv oppgavene for å skape et re-sizable sjakkbrett, og en kanonisk tre-kolonne sidelayout med topptekst og bunntekst.

SpiritBH 07/31/2017.

Spør deg selv: Hvorfor skiller vi noe i noen form for kode?

I nesten alle programmerings- / skriptspråk er det separasjon og delegering. Vi gjør dette for å sikre at vi lettere kan holde oversikt over all koden og lettere identifisere problemer (det vil uunngåelig spire fordi ingen programmerer er ufeilbarlig)

Så jeg tror at en dedikert leksjon på CSS er en god ide, fordi det hjelper dem å forstå hva som er ansvarlig for det. Det hjelper dem med å forstå at hvis all HTML er riktig når man ser på kilden, men all sminke er fortsatt jumbled, må de se etter CSS.

Dessuten er CSS stor, fleksibel og kan gjøre mye mer enn bare å sette en fin ramme rundt ting. For å vise klassen hva den kan gjøre, og hvor komplisert det kan få, kjører punktet videre hjemme, hvordan det er uklokt å blande HTML og CSS for dypt.

Til slutt er adskillelse av CSS fra HTML (eller en hvilken som helst kode for den saks skyld) en utviklingsattest; Det handler ikke om etableringen som fungerer (bedre), det handler om at utvikleren har mer og lettere kontroll over deres opprettelse.

Kanskje på det notatet du vil prøve å få klassen til å sjekke hverandres arbeid, vil det hjelpe dem å se hvordan det er viktig å ha ren delegert kode når du jobber i et lag.

1 comments
ItamarG3 07/31/2017
du reiser noen veldig interessante poeng. Takk! og velkommen til datateknikklærere

gabe3886 07/31/2017.

En litt annen måte å se på, kan være å introdusere DRY kode (Gjenta ikke selv).

Ved å bruke CSS til å gjøre stylingen, vet du at ved å bare legge til en klasse i et HTML-element, bør stylingen ta tak i. Hvis du måtte legge til alt manuelt, så når du må endre en del, må du endre mange, mange flere.

For å stjele en ide om illustrasjon fra W3-skoler , kan du gjøre det på denne måten hvis du vil si at avsnittene har forskjellige bakgrunnsfarger.

Paragraph 1

Paragraph 2

Paragraph 3

Paragraph 4

Men hvis jeg vil endre rekkefølgen, så er den 2,4,3,1, men fortsett å fargelegge, da må jeg endre alle stilene som er bygget inn i hver tag. Hvis det er over flere sider, kan arbeidsbelastningen bli stor.

Hvis jeg gjorde det i CSS, kan jeg gjøre følgende:

p:nth-child(odd) {
    background: red;
}

p:nth-child(even) {
    background: blue;
} 

Nå bryr det seg ikke lenger hva innholdet er, jeg kan bestille dem slik jeg liker og stylingen fortsatt fungerer. Masse innsats endret seg. Ignorerer bestillingen, hvis jeg vil endre dem til mer fornuftige farger, slik at de er lettlestbare, endrer jeg verdien i CSS en gang, og den blir brukt på hver matchende DOM-element.

Utover det (som CSS kan være innebygd i HTML i hodetiketten), deles det ut i en fil, og det betyr at jeg ikke trenger å gjenta min (nå mer fornuftige) CSS i forskjellige filer, ned i mappestrukturer for hver siden jeg har. Jeg inkluderer CSS-filen i overskriften og stilene har effekt. Nå, hvis jeg trenger å gjøre endringer i fargene eller legge til flere stiler, får jeg de samme fordelene med å ikke måtte duplisere som jeg hadde fra å ikke bruke inline-stiler.

En annen fordel ved å ha en egen fil, bort fra splittet ansvar, er ytelse. Nettlesere er ganske gode til å cache-filer, så hvis det må lastes ned en enkelt (ideell forenklet) CSS-fil for nettstedet en gang, som den kan bruke på nytt, er det en mindre ting å laste ned for andre sider. Ytelse bør alltid være et hensyn for folk, spesielt med økningen i mobil surfing. Hvis en nettside har mye CSS i det, er kilden naturlig, stor. Dette tar lengre tid å laste ned og / eller bli brukbar, noe som kan sette folk av det, ventetiden blir uakseptabelt for dem.


ncmathsadist 08/01/2017.

Vi lærer at det er tre lag på en nettside: struktur, utseende og oppførsel. Strukturen bestemmes av DOM, som er opprettet med velformulert HTML5-oppslag. Når vi lærer om HTML, begynner vi umiddelbart å tegne dokumenttreet, slik at vi kan forstå hvordan elementer på en side relaterer seg til hverandre.

Utseendet bestemmes av CSS, som åpner DOM for å formatere og utforme siden. Dette holdes i en egen fil slik at den kan deles av en tilhørende gruppe sider. HTML håndterer ad hoc situasjoner ved hjelp av id eller class . Bruk av disse gjør at sidene blir enklere, siden stilen for elementer som bærer disse attributter, er laget på one place i en CSS-fil.

Det tredje laget er oppførsel, som skal vises i en JavaScript-fil. JavaScript trenger never å vises på en side, lagre for å ringe funksjoner fra hendelseshåndteringskode. Selv dette kan festes i en JS-fil. Sørg for at studentene dine vet om load og onload tidlig, slik at de kan forsinke kodeanrop til sideelementer eksisterer.

Hvis du installerer Knutepunkt, kan du kjøre tester av JS-kode på kommandolinjen, og utvikle testpakker for funksjonene du har opprettet.

Å skille de tre lagene holder ting pent og maksimerer gjenbruk av kode.


user1639154 07/31/2017.

Det ser ut til at mange svar her ikke tar utgangspunkt i arv på styling, da dette også skal læres. Den grunnleggende regelen er hva som er lest sist, vil bli brukt.

Den første til å laste er vanligvis det eksterne arket i dokumentets hode. Et stilark som er koblet i hodet på dokumentet, vil bli overrørt av stiler som er plassert inline i HTML-kroppen, og de vil i sin tur også bli overskredet av stiler som er plassert direkte på DOM-elementet. Den viktige taggen kan også brukes til å endre denne oppførselen også.

De fleste vil legge alle sine css i sin egen fil fordi det er lettere å vedlikeholde og ikke vil kreve så mye arbeid når de oppdateres / endres.

EDIT: Bare for å klargjøre litt lenger, er det bare de spesifikke stilene som samsvarer i klassene som vil kollidere / overstyre hverandre, hvis den ene linjen legger til en stil for å understreke tekst, som ikke er i klassen i det eksterne arket for eksempel det vil bare legge til den ekstra styling. Klassene erstatter ikke hverandre direkte, men går sammen i hverandre.

5 comments
1 ItamarG3 07/31/2017
Wow. Velkommen til Computer Science Educators . Dette er egentlig noe jeg ikke hadde vurdert. Jeg ville elske det hvis du kunne legge til noen eksempler eller beskrivelser som viser det. (Jeg can skrive dem selv, men jeg er mer interessert i å se hva du kan tenke på). Dette er virkelig et interessant svar :)
1 ItamarG3 07/31/2017
Ikke-relatert: Hvorfor tar du ikke vår tur ? Jeg er sikker på at du vil finne det interessant.
user1639154 07/31/2017
Jeg fikk det litt galt, det er eksternt stilark først, deretter dokumentstiler og så på elementet, min hjerne er aldri 100% på en mandag morgen. :)
ItamarG3 07/31/2017
tilgi og glem ;). Du kan redigere svaret ditt. Det er en edit \ link direkte under ditt svar. Mens du er på det, vil du gjerne legge til noe eksempel for å demonstrere hva svaret ditt adresserer? Det ville virkelig gjøre det til et mye bedre svar: D
user1639154 07/31/2017
Dessverre har jeg ikke tid akkurat nå. Jeg ville bare nevne arv av css, da det er viktig aspekt av css.

rackandboneman 08/03/2017.

Lag et prosjekt der resultatet er to helt forskjellige syn på det same document , for eksempel en versjon som ser bra ut på en stor skjerm og en annen som ser bra ut på en iPhone.

Ved å bruke ikke en statisk nettside, men datamaskingenererte, oppdaterbare dokumenter vil kjøre poenget hjem enda mer, siden innebygd stilinformasjon i dokumentgeneratoren vil gjøre det synlig mer komplisert. De eneste alternativene for å rotere med stil vil enten skifte dokumentgeneratoren med alt det hassle involvert eller stylesheet som er akkurat det du hadde tenkt. Enda bedre: Tilordne two grupper i separate hjørner av rommet for å lage dokumentet og stilarkdelene - og regulere hvordan spesifikasjoner kommuniseres mellom de to.

4 comments
ItamarG3 08/03/2017
Dette er utrolig. Wow.
rackandboneman 08/03/2017
Vel, gjør det troverdig da.
ItamarG3 08/03/2017
Det er utrolig fordi det løser et problem med omstendigheter jeg ikke kan avsløre (skolens ting), men det stemmer ikke exactly med spørsmålet ...
1 rackandboneman 08/03/2017
Å, og jeg snakker i diskusjonen som ikke en lærer, men en IT-profesjonell - det jeg beskrev, er hvorfor ting gjøres i praksis akkurat som teorien du vil lære, sier :)

Chris M. 08/02/2017.

Det er mange gode svar her. Et poeng jeg ikke har sett ennå, er at innhold og design ofte opprettes av separate personer eller lag, og så har hver definert med egne verktøy og språk muliggjør de nødvendige separate arbeidsflytene.

4 comments
ItamarG3 08/02/2017
Wow. Jeg hadde ikke tenkt på det. Kan du huske å utvide litt på hvordan jeg kan forklare dette i en egen leksjon om bruk av CSS stilark?
Chris M. 08/02/2017
Jeg ville bruke en analogi. Bil ingeniører velger ikke bilfarger. Skriverforfattere gjør generelt ikke draktdesign.
ItamarG3 08/02/2017
Jeg skjønner. Kanskje du bør inkludere slike analogier i svaret ditt ved å redigere svaret.
1 Buffy 08/03/2017
Egentlig er det verre enn det. På noen store selskaper med en viktig tilstedeværelse på nettet, er det et standardlag som sitter over både innholds- og oppsettlagene. Hvis oppsettet er en piksel av standarden, gjør du det over. En piksel.

thesecretmaster 08/03/2017.

En viktig grunn til at inline-stiler er dårlige er kodenes lesbarhet, ren og enkel. I dette tilfellet bør et eksempel være nok til å bevise poenget ditt:

  
The Title
This is a super great article

Sammenlignet med:

  
The Title
This is a super great article

I tillegg til dette eksempelet, uten at du bruker klasser og ids, gjør du DOM mye vanskeligere å manipulere ved hjelp av javascript, og du gjør det umulig å bruke pseudoelementer og noen av de virkelig hyggelige CSS-valgene som :nth-child() og :first-child , for å nevne noen.


Puppy 07/31/2017.

Jeg ville helt uenig - styling bør gjøres direkte i HTML.

Det primære problemet er at styling ikke engang er eksternt uavhengig av HTML-strukturen. Bare å skrive stilene i en fysisk separat fil endrer ikke dette. Et godt eksempel er støtte for mobilenhet. I teorien kan du lage en mobil CSS-fil. Men i virkeligheten trenger du sannsynligvis et helt eget UI-design for å gi en god opplevelse på en mobil enhet, og deretter en egen HTML-struktur for å støtte dette, og deretter et eget sett med stiler. "Gjør knappen den samme, men litt mindre" fungerer bare for de minste brikkene.

Å produsere riktig brukergrensesnitt innebærer å produsere HTML-strukturen som støtter stilene du trenger. Siden de to er faktisk nært koblet, er det enkelt å forstå og alt på ett sted.

Dessuten er det ikke noe problem å generere HTML med dupliserte stilarter, siden du genererer HTML-kode via kode, siden kodegeneratoren kan spytte ut stiler hele dagen.

Å ha rå CSS er enormt problematisk som stilene er helt tilfeldige og på globalt plan, og vanskelig å gjenbruke. Du lager et klassenavn under håp om at ingen andre brukte det. Du nest dine egne klasser inne i det elementet for å prøve å løse dette problemet litt, men nå kan du ikke bruke disse klassene på andre steder, da de ikke er i riktig DOM-struktur. Deretter finner du ut at noen tilfeldige dude i noen helt separat del av siden din brukte klassen din uten å varsle deg, og nå har du ødelagt den ved å endre stilene dine. Og lykke til å få typekontroll, IDE-støtte osv. Det er også vanskelig å lage f.eks. Parameteriserte klasser, eller globalt bruke erstatninger, for eksempel display: flex med display: flex og display: -webkit-flex for iOS.

Den riktige måten å håndtere stiler er å håndtere dem som med hvilken som helst annen kode - inkapslere dem i noen funksjoner.

5 comments
1 thesecretmaster♦ 07/31/2017
Hei valp, velkommen til informatører ! Hvis du ønsker å møte en annen valp, kan du si hei til Buffy , som er en bulldog, i chat . Dette er et interessant svar, takk for at du deler ditt perspektiv her!
2 richard 07/31/2017
Mens jeg ikke er enig med alt du sier. Jeg ser poenget ditt. Spesielt den siste linjen (jeg tror du bør utvide på dette). Vis oss hvordan du tror det skal gjøres. Selv om vi ikke er 100% enige, kan vi lære noe.
no comprende 08/01/2017
Ditt svar minner meg om tiden jeg spurte et spørsmål til, og noen sa, "Hvis du leser massen på latin." Det er mange "riktige" måter å gjøre ting på, og fra ditt synspunkt, med generert HTML, det gjør det ingen rolle. Men de fleste instruktører lærer ikke generert HTML, akkurat som de fleste programmører ikke lærer å skrive kompilere. Laget som vi legger til for å gjøre vedlikehold av filer av HTML lettere, er overflødig med kaste bort HTML. Jeg liker også å generere ting, men jeg er i det store minoritetet. Kanskje kan vi snakke om domenespesifikke språk en gang?
Puppy 08/01/2017
Instruktører som ikke underviser generert HTML, lærer ikke nyttig HTML.
ItamarG3 08/02/2017
@Puppy Er det så?

Related questions

Hot questions

Language

Popular Tags