Förklara varför styling inte ska göras direkt i HTML

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

Jag har nyligen noterat att har avlägsnats från html enligt denna webbplats . Från det här svaret på Stack Overflow , är markeringen ersatt av CSS. Förklaringen till ändringen är att html handlar om dokumentstruktur, och att layout och animering och styling etc. ska göras från CSS.

Detta fick mig att tänka:

Skulle du uttryckligen undervisa skillnaden mellan att ställa in attributet till en html tagg och göra det via CSS som är användbart för att öka elevernas förståelse för att bli medlem av CSS och HTML?

För att begränsa det, letar jag efter exempel eller förklaringar på hur undervisningen uttryckligen kan göra det enklare för eleverna att ställa in sina webbsidor . Företrädesvis en förklaring.

Genom att uttryckligen undervisa, vad jag menar ägnar faktiskt en lektion med titeln "Styling through .CSS", eller något liknande.

Något sammanhang, om det behövs:

Eleverna lär sig grundläggande webbdesign: HTML, JavaScript (mycket grundläggande), JSP och SQL. De lär sig dessa i 1 år och i slutet av året borde de ha en hemsida (för vilken de får betyg). Jag undrar om en lektion helt om CSS kan leda till bättre webbplatser.

5 Comments
3 Puppy 07/30/2017
Kärnproblemet här är att du antar att styling inte ska göras direkt i HTML, och att använda CSS är bättre. Ingen av dessa saker är sanna.
ItamarG3 07/31/2017
@Puppy bra, en del av frågan är om jag ska lära mig det separat. Om jag inte gör det, kommer de inte att använda stylesheets. Men tror du att någon webbplats någonstans egentligen hardcodes allt det är css i html? Every div har ett berg med kod i sitt stilattribut?
1 David Spence 07/31/2017
Denna sida visar kraften att hålla css separat. csszengarden.com - Samma struktur, olika css stylesheet.
ItamarG3 07/31/2017
@DavidSpence trevligt. Jag ska definitivt använda det
1 no comprende 07/31/2017
Vad du än gör, visa dem inte så här posta om att parsa HTML med Regex . Kan ge dem mardrömmar!

12 Answers


richard 07/30/2017.

Jag tycker om idén att producera några stilark, och att eleverna tillämpar dem på deras HTML. De kan då se makt att ha separata stilark.

De kan sedan börja redigera stilarken och se kraften i en liten ändring kan ändra varje rubrik eller varje stycke etc.

Jag har också tidigare skrivit en HTML-fil som hade en uppsättning knappar längst ner. Dessa knappar skulle utlösa en annan CSS-fil som ska laddas. Det var några mycket enkla JavaScript.

För att svara ska de hållas separata

Att hålla stil och innehåll separat, rekommenderas av W3 och många andra. Det genomför separering av problem och ensam ansvar. Båda väldigt viktiga mönster i mjukvaruutveckling.

För att svara ska du ägna en lektion för att separera CSS-filer.

Ja. Om det är viktigt att hålla dessa separata, vilket det är, bör du lära eleverna att hålla dem separerade. Spara tid genom att inte lära dem att blanda den med HTML (det sparar tid två gånger, eftersom du inte behöver undervisa det).


Jag har bara gjort det med en eller två personer (inte en klass).

5 comments
ItamarG3 07/30/2017
Det andra stycket låter särskilt användbart. Men det svarar inte om jag verkligen ska ägna en lektion för att lära mig hur och varför man borde skriva ett css-formatblad istället för inline-html-stilattribut.
richard 07/30/2017
Tillagt ett partiellt svar till If och varför att ägna en lektion till den.
1 Buffy 07/30/2017
Jag håller med om att un-undervisning är en särskilt slösig användning av allas tid. Det är bäst att få missuppfattningar innan dåliga vanor byggs och förstärks.
1 richard 07/30/2017
@ timme, det här är bara en optimisation . Konceptualitet det borde fortfarande vara separat. Men Google säger att den läggs i samma fil. De säger inte att du ska utforma varje bit separat. De säger att ta vad som kan vara i en css-fil och lägg till den i avsnittet <style> i html.
1 Darren 07/31/2017
I stället för att ge eleverna olika stilark som påverkar deras kod, skulle jag försöka motsatta. Efter att ha läst dem inline-stilar i HTML, ge dem en sida som bygger på ett CSS-dokument för sin stil och be dem att skapa sitt eget stilark för det (med samma tekniker som de lärde sig av att använda inline HTML - bara en fråga om att märka stilerna och sätta dem ihop på ett ställe). Då kan alla i klassen jämföra sina stilark på ett gemensamt testämne (den du gav) och se möjligheterna.

Buffy 07/30/2017.

Om du bara vill bygga en sida som är enkel och ad hoc och aldrig kommer att förändras i framtiden och bara kommer att ses på en typ av enhet, så bygga du styling direkt i html. Det är samma sak när du skriver ett program som endast körs en gång på en enhet för att få ett svar, varefter programmet blir föråldrat. Det finns då ingen anledning att koda noggrant. "Snabb och smutsig" fungerar för sådana saker.

However saker ändras, och webbsidor visas på enheter med olika skärmstorlekar, till och med färgmodeller. Och de kan ses i framtiden på enheter som ännu inte finns.

Så, om du vill bygga platser som är viktiga och varaktiga och som måste behållas i framtiden, använd CSS. Du skulle förmodligen inte skriva ett viktigt C-program i main , men skulle åtminstone fakta ut de saker som måste vara desamma men återanvändas. I enkel C-programmering funktionerar vi funktionen för detta. I html vi faktor ut styling. På en djupare nivå faktorer serverns sida också ut mycket av data, etc. Detta låter saker som ska vara samma, förbli samma och låter oss ändra en nivå av design oberoende av andra nivåer.

Det här är inte precis samma sak, men titta på den underliggande koden på Googles första sida. Jag vet inte vad de använder för att sätta det tillsammans och behålla det, men jag tvivlar på att det bara är en textredigerare. Observera att deras första sida , men otroligt enkel i layout, ändras ofta.

Note to the Instructor När du är redo att betygsätta studentens arbete, se den på olika enheter, med olika skärmupplösningar. Jag föreslår dock inte att du också får dem att tillhandahålla per-enhet css.

För den delen, se några av StackExchange-sidorna på ett skrivbord jämfört med en telefon. Och för en chocker, kolla både källa och stilark på några av sidorna.

2 comments
1 Luke Sawczak 07/31/2017
Jämförelsen med funktioner är bra. Jag antar att den aktuella synden direkt levererar stilattribut i källhtml. Om så är fallet kan det jämföras med att ta kroppen av en metod och bara sticka det där du skulle ringa metoden. Kontraproduktivt i ytterligheten.
no comprende 08/01/2017
För en riktig chocker, kolla källa och stilark på Microsoft-sidor och Moodle! De kan vara hundratals linjer långa. Det ursprungliga begreppet HTML var att det skulle fungera på enheter som "ännu inte finns". Och det finns för närvarande så många skärmstorlekar att det bara kan vara en variabel.

AnoE 07/30/2017.

För att få dem att verkligen förstå vad du kan göra med CSS ensam - med only ersätta en annan CSS-fil - ta dem till CSS Zen Garden . Med exakt samma HTML för varje sida, och only .css-filen ersätts får du absurt vilda sidor. Från lugn liten ingenting till 3D-rullning kuber ...

Förklara för dem att den kompetens som krävs för att göra HTML, vs. kompetensen för (särskilt extrema som de) CSS är väldigt annorlunda, och att HTML endast fungerar som informationsbärare.

En ytterligare godis skulle vara att installera en skärmsläsare (för blinda) - det finns sådana med begränsad fri användning - för att visa dem hur samma HTML "ser ut" när man talar högt.

Påpeka också att dessa verktyg för synskadade kan till exempel extrahera länkstexter och så vidare från HTML om det är välstrukturerat och det gör det också möjligt att navigera en sida med tangentbord bara - vilket kan vara användbart om en är så benägen, även om synen är bra.

Slutligen påpeka att en sida med god separation av innehåll och styling har en högre chans att arbeta med bärbara enheter - nyckelordet är responsiv design, där innehållet fritt kan strömma in i någon upplösning efter behov.


thehayro 07/30/2017.

För att begränsa det, letar jag efter exempel eller förklaringar på hur undervisningen uttryckligen kan göra det enklare för eleverna att ställa in sina webbsidor. Företrädesvis en förklaring.

Som Richard säger kan eleverna se hur en enkel redigering av stilen kan ändra varje element.

Som ett exempel kan du låta dina elever känna fördelen med att skilja stilen från html. Vilket innebär att ge dem en övning, där de behöver stryka vissa element (t.ex. färgelementets bakgrund) i deras html. Låt dem sedan byta varje element till en annan färg. Lektionen skulle vara att låta dem förstå att denna uppgift kan vara mycket mindre tidskrävande om du skiljer stilen från html. Du kan sedan visa hur du ändrar en rad i css, vilket ändrar alla elementets bakgrundsfärg.

4 comments
thesecretmaster♦ 07/30/2017
HI thehayro! Välkommen till datavetenskapsutbildare !
Puppy 07/30/2017
Alternativt kan de generera sin HTML-kod som en sinnig person, i vilket fall det är trivialt att ändra färgen på varje element utan separata stilark.
1 thehayro 07/30/2017
Säker. Det är upp till de krav där webbsidan ska visas (mobil / skrivbord). Men frågan så långt jag förstod det var hur man förklara varför och hur det finns behov av en separation av HTML och CSS.
no comprende 08/01/2017
När jag lärde mig CSS, gav jag mig själv uppgifterna om att skapa ett omställbart schackbräde och en kanonisk sidokolonn med sidhuvud och sidfot.

SpiritBH 07/31/2017.

Tja, fråga dig själv: varför skiljer vi allt från någon form av kod?

I nästan varje enskilt programmerings- / skriptspråk finns separering och delegering. Vi gör det för att se till att vi lättare kan hålla koll på all kod och kan lättare identifiera problem (det kommer oundvikligen att spridas eftersom ingen programmerare är ofelbar)

Så jag tror att en dedikerad lektion om CSS är en bra idé, eftersom det hjälper dem att förstå vad som är ansvarigt för. Det hjälper dem att förstå det om alla HTML är korrekta när man tittar på källan, men all smink är fortfarande jumbled, att de måste titta på CSS.

Dessutom är CSS stor, flexibel och kan göra mycket mer än att bara sätta en fin kant runt sakerna. För att visa klassen vad det kan göra, och hur komplicerat det kan få, kommer köra punkten vidare hemma hur det är oklokt att blanda HTML och CSS för djupt.

I slutändan är separering av CSS från HTML (eller någon kod för den delen) ett utvecklingsbeteende; det handlar inte om att fungera (bättre) om att utvecklaren har mer och lättare kontroll över sin skapande.

Kanske på den noten du vill försöka få klassen att kolla varandras arbete, det hjälper dem att se hur det är viktigt att ha ren delegerad kod när du arbetar i ett lag.

1 comments
ItamarG3 07/31/2017
du väcker några mycket intressanta punkter. Tack! och välkommen till datavetenskapsutbildare

gabe3886 07/31/2017.

Ett lite annorlunda sätt att se på det kan vara att introducera DRY kod (Repetera inte dig själv).

Genom att använda CSS för att göra stylingen vet du att genom att helt enkelt lägga till en klass i ett HTML-element, ska stylingen ta tag i. Om du var tvungen att manuellt lägga till allt, måste du byta många, många fler när du behöver byta en del.

För att stjäla en bild av illustration från W3-skolor kan du , om du vill säga, stycken ha olika bakgrundsfärger, göra det så här:

Paragraph 1

Paragraph 2

Paragraph 3

Paragraph 4

Men om jag vill ändra ordern så är det 2,4,3,1 men behåll färgen, så måste jag ändra alla stilar inbyggda i varje tagg. Om det finns flera sidor kan arbetsbelastningen bli enorm.

Om jag gjorde det i CSS kan jag göra följande:

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

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

Nu bryr det sig inte längre om innehållet, jag kan beställa dem hur jag gillar och stylingen fortfarande fungerar. Massor av ansträngning ändrats. Ignorerar beställningen, om jag ville ändra dem till mer förnuftiga färger så att de är lättlästa, ändrar jag värdet i CSS en gång och det tillämpas på varje matchande DOM-objekt.

Utöver det (eftersom CSS kan inbäddas i HTML i huvudetiketten) delas det ut i en fil och med det betyder att jag inte behöver upprepa min (nu mer förnuftiga) CSS i olika filer, ner i mappstrukturer för varje sida jag har. Jag inkluderar CSS-filen i rubriken och stilerna träder i kraft. Nu om jag behöver göra ändringar i färgerna eller lägga till ytterligare stilar, får jag samma fördelar med att jag inte behöver duplicera som jag hade från att inte använda inline-stilar.

En annan fördel med att ha en separat fil, bort från det splittrade ansvaret, är prestanda. Webbläsare är ganska bra för att cacha filer, så om det måste hämta en enda (idealiserad) CSS-fil för webbplatsen en gång, som den sedan kan återanvända, är det en sak att ladda ner för andra sidor. Prestanda bör alltid vara ett övervägande för människor, särskilt med ökningen av mobila surfning. Om en webbsida har mycket CSS i den är källan naturligtvis stor. Det tar längre tid att ladda ner och / eller bli användbar, vilket kan få människor att stänga av det, väntet blir oacceptabelt för dem.


ncmathsadist 08/01/2017.

Vi lär att det finns tre lager på en webbsida: struktur, utseende och beteende. Strukturen bestäms av DOM, som skapas med välformad HTML5 markup. När vi lär oss om HTML börjar vi omedelbart dra dokumentträdet, så vi kan förstå hur element på en sida relaterar till varandra.

Utseendet bestäms av CSS, som öppnar DOM för att formatera och utforma sidan. Detta hålls i en separat fil så att den kan delas av en relaterad grupp av sidor. HTML hanterar ad hoc situationer med id eller class . Att använda dessa gör att sidorna blir enklare, eftersom stilen för objekt som bär dessa attribut görs på one place i en CSS-fil.

Det tredje lagret är beteende, som ska visas i en JavaScript-fil. JavaScript behöver never visas på en sida, spara för att ringa funktioner från händelsehanteringskoden. Även detta kan bifogas i en JS-fil. Se till att dina elever känner till load och onload tidigt, så de kan fördröja uppringningen av kod tills sidelementen finns.

Om du installerar Node kan du köra tester av JS-kod på kommandoraden och utveckla testpaket för de funktioner du har skapat.

Att separera de tre skikten håller på sig snyggt och maximerar återanvändningen av kod.


user1639154 07/31/2017.

Det verkar som om många svar här inte riktar sig till arvet på styling, eftersom detta också bör läras. Grundregeln är vad som lästs sista kommer att tillämpas.

Den första som laddas är vanligtvis det externa arket i dokumentets huvud. Ett stilark som är länkat i huvudet på dokumentet kommer att vara överskridet av stilar placerade inline i HTML-koden, och de kommer i sin tur också att överskridas av stilar som är placerade direkt på DOM-elementet. Den viktiga taggen kan också användas för att ändra detta beteende också.

De flesta kommer att lägga alla sina css i sin egen fil eftersom det är lättare att behålla och inte behöver så mycket arbete när de uppdateras / ändras.

EDIT: Bara för att klargöra lite längre är det bara de specifika stilar som matchar de klasser som kommer att kollidera / åsidosätta varandra, om en inline lägger till en stil för att understryka text, som inte finns i klassen i det externa arket för Exempel det kommer bara att lägga till den extra styling. Klasserna ersätter inte varandra direkt utan går in i varandra.

5 comments
1 ItamarG3 07/31/2017
Wow. Välkommen till datavetenskapliga utbildare . Det här är verkligen något jag inte hade övervägt. Jag skulle älska det om du skulle kunna lägga till några exempel eller beskrivning som visar det. (Jag can skriva dem själv, men jag är mer intresserad av att se vad du kan tänka på). Det här är verkligen ett intressant svar :)
1 ItamarG3 07/31/2017
Orelaterad: Varför tar du inte vår turné ? Jag är säker på att du skulle hitta det intressant.
user1639154 07/31/2017
Jag fick det lite fel, dess externa stilark först, sedan dokumentstilar och sedan på elementet, är min hjärna aldrig 100% på måndagsmorgon. :)
ItamarG3 07/31/2017
förlåta och glömma ;). Du kan redigera ditt svar. Det finns en edit \ länk direkt under ditt svar. Medan du är på det, vill du lägga till lite exempel för att visa vad ditt svar tar upp? Det skulle verkligen göra det till ett mycket bättre svar: D
user1639154 07/31/2017
Tyvärr har jag inte tid just nu. Jag ville bara nämna arv av css, eftersom det är viktig aspekt av css.

rackandboneman 08/03/2017.

Gör ett projekt där resultatet är två helt olika syn på same document , till exempel en version som ser bra ut på en stor bildskärm och en annan som ser bra ut på en iPhone.

Använda inte en statisk webbsida, men datorgenererade, uppdaterbara dokument kommer att köra punkten hemma ännu mer, eftersom inbäddning av stilinformation i dokumentgeneratorn kommer att göra det synligt mer komplext. De enda alternativen som stöter på stilen kommer antingen att ändra dokumentgeneratorn med allt krångel eller stylesheet som är exakt vad du tänkte. Ännu bättre: Tilldela two grupper i separata hörn av rummet för att göra dokumentet som genererar och stilarkdelarna - och reglera hur specifikationerna kommuniceras mellan de två.

4 comments
ItamarG3 08/03/2017
Det här är otroligt. Wow.
rackandboneman 08/03/2017
Tja, gör det trovärdigt då.
ItamarG3 08/03/2017
Det är otroligt eftersom det löser ett problem med omständigheter som jag inte kan avslöja (skolmaterial), men det tar inte exactly upp frågan ...
1 rackandboneman 08/03/2017
Åh, och jag medverkar i diskussionen som inte en lärare men en IT-professionell - det jag beskrev är varför saker görs i praktiken precis som teorin du vill lära sig säger :)

Chris M. 08/02/2017.

Det finns många bra svar här. En sak som jag inte har sett ännu är att innehåll och design ofta skapas av separata personer eller grupper, och så att ha var och en definierad med egna verktyg och språk tillåter nödvändiga separata arbetsflöden.

4 comments
ItamarG3 08/02/2017
Wow. Jag hade inte tänkt på det. Skulle du tänka dig att expandera lite på hur jag kan förklara detta i en separat lektion om hur du använder CSS stylesheets?
Chris M. 08/02/2017
Jag skulle använda en analogi. Automotive ingenjörer väljer inte bilfärger. Screenwriters gör vanligtvis inte kostymdesign.
ItamarG3 08/02/2017
Jag förstår. Kanske bör du inkludera sådana analogier i ditt svar genom att redigera svaret.
1 Buffy 08/03/2017
Det är faktiskt värre än det. Vid vissa stora företag med en viktig närvaro på nätet finns det ett standardlag som sitter över både innehålls- och layoutteam. Om layouten är en pixel av standarden gör du det över. En pixel.

thesecretmaster 08/03/2017.

En viktig anledning till att inline-format är dålig är kodläsbarhet, enkel och enkel. I det här fallet bör ett exempel vara tillräckligt för att bevisa din punkt:

  
The Title
This is a super great article

Jämfört med:

  
The Title
This is a super great article

Utöver detta exempel, utan att använda klasser och ids gör du DOM mycket svårare att manipulera med javascript och du gör det omöjligt att använda pseudo-element och några av de riktigt fina CSS-selektorerna som :nth-child() och :first-child , för att nämna några.


Puppy 07/31/2017.

Jag skulle helt vara oense - styling ska göras direkt i HTML.

Det främsta problemet är att styling inte ens är oberoende av HTML-strukturen. Att bara skriva stilar i en fysiskt separat fil ändrar inte detta. Ett bra exempel är stöd för mobilenhet. I teorin kan du skapa en mobil CSS-fil. Men i verkligheten behöver du förmodligen en helt separat UI-design för att producera en bra upplevelse på en mobil enhet, och sedan en separat HTML-struktur för att stödja detta, och sedan en separat uppsättning stilar. "Gör knappen samma men lite mindre" fungerar bara för de minsta bitarna.

Att producera rätt användargränssnitt innebär att du skapar HTML-strukturen som stöder de stilar du behöver. Eftersom de två i själva verket är intimt kopplade, blir det lätt att förstå och få dem på ett och samma ställe.

Eftersom du förmodligen alstrar din HTML-kod är det inte något problem att generera HTML med dubblerade stilar eftersom din kodgenerator kan spotta ut stilar hela dagen.

Att ha rå CSS är oerhört problematisk eftersom stilar är helt slumpmässiga och globala, och svår att återanvända. Du gör ett klassnamn under hopp om att ingen annan använde den. Du boar dina egna klasser inuti det här elementet för att försöka lösa detta problem lite men nu kan du inte använda dessa klasser på andra ställen eftersom de inte ligger i rätt DOM-struktur. Då får du reda på att någon slumpmässig dude i någon helt separat del av din sida använde din klass utan att anmäla dig och nu har du brutit den genom att ändra dina stilar. Lycka till att få typkontroll, IDE-support etc. Det är också svårt att skapa t.ex. parametrerade klasser eller globalt tillämpa ersättningar, t.ex. display: flex med display: flex och display: -webkit-flex för iOS.

Det rätta sättet att hantera stilar är att hantera dem som med någon annan kod - inkapslar dem i vissa funktioner.

5 comments
1 thesecretmaster♦ 07/31/2017
Hej valp, välkommen till datateknikutbildare ! Om du vill träffa en annan valp kan du säga hej till Buffy , som är en bulldog, i chatt . Detta är ett intressant svar, tack för att du delar ditt perspektiv här!
2 richard 07/31/2017
Medan jag inte håller med allt du säger. Jag ser din punkt. Särskilt den sista raden (jag tror att du borde expandera på detta). Visa oss hur du tycker att det borde ske. Även om vi inte är 100% överens kan vi lära oss något.
no comprende 08/01/2017
Ditt svar påminner mig om den tid jag ställde en fråga och någon sa, "Om du läser massan på latin." Det finns många "korrekta" sätt att göra saker, och ur din synvinkel med genererad HTML, det spelar ingen roll. Men de flesta instruktörer undervisar inte genererad HTML, precis som de flesta programmerare inte lär sig att skriva kompilatorer. Skiktet som vi lägger till för att underlätta underhåll av filer i HTML är överflödig med bortkastad HTML. Jag tycker också om att skapa saker, men jag är i den stora minoriteten. Kanske kan vi prata om domänspecifika språk någon gång?
Puppy 08/01/2017
Instruktörer som inte undervisar genererad HTML lär inte användbar HTML.
ItamarG3 08/02/2017
@Puppy Är det så?

Related questions

Hot questions

Language

Popular Tags