Selittää, miksi muotoilua ei pitäisi tehdä suoraan HTML: ssä

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

Huomasin äskettäin, että on hylätty HTML- sivuston mukaan . Tästä vastauksesta Stack Overflow -työkalulla korvamerkin vaihto tehdään CSS: stä. Muutokselle annettu selitys on se, että html on asiakirjan rakenne, ja että ulkoasun ja animaation sekä muotoilun jne. Tulisi tehdä CSS: stä.

Tämä sai minut ajattelemaan:

Tarkoittaako erikseen eroa html tunnisteen tyyliattribuutin asettamisesta ja sen tekemisestä CSS: n avulla hyödylliseksi lisätä opiskelijoiden ymmärtämistä CSS: n ja HTML: n liittymisestä?

Kaventamaan sitä, etsin esimerkkejä tai selityksiä siitä, miten opettaminen nimenomaan voisi helpottaa opiskelijoiden muokkaamista verkkosivuillaan . Mieluiten selitys.

"Opettelemalla eksplisiittisesti", mitä tarkoitan, on itse asiassa omistettu oppitunnin otsikolla "Styling through .CSS" tai jotain vastaavaa.

Jotkin kontekstit, jos niitä tarvitaan:

Opiskelija oppii perus-web-suunnittelun: HTML, JavaScript (hyvin perustiedot), JSP ja SQL. He oppivat nämä 1 vuoden ajan ja vuoden lopussa heillä on oltava verkkosivusto (mistä he saavat arvosanat). Mietitkö, voisiko oppitunti kokonaan CSS: stä lopulta johtaa parempaan verkkosivustoihin.

5 Comments
3 Puppy 07/30/2017
Ydinongelma tässä on, että olet olettaen, että muotoilua ei pitäisi tehdä suoraan HTML: ssä ja että CSS: n käyttäminen on parempi. Kumpikaan näistä asioista ei ole totta.
ItamarG3 07/31/2017
@Puppy, osa kysymyksestä on, pitäisikö minun opettaa sitä erikseen. Jos en, niin he eivät käytä tyylisivuja. Mutta luuletko minkä tahansa sivuston missä tahansa todella koodaa kaikki se css html? Every div on style tyyliattribuutissaan?
1 David Spence 07/31/2017
Tämä sivusto näyttää voimaa pitää css erikseen. csszengarden.com - Sama rakenne, eri css-tyylitaulukko.
ItamarG3 07/31/2017
@DavidSpence mukava. Käytän varmasti sitä
1 no comprende 07/31/2017
Mitä ikinä teetkin, älä näytä heille tätä SO-viestiä HTML: n jäsentämisestä Regexin kanssa . Voisivat antaa heille painajaisia!

12 Answers


richard 07/30/2017.

Pidän ajatuksesta tuottaa muutamia tyyliarkkeja ja ottaa oppilaat soveltamaan niitä HTML-muotoonsa. He voivat nähdä tehon ottaa erilliset tyyliarkit.

He voivat sitten aloittaa tyylisivujen muokkaamisen ja nähdä, että yhden pienen muutoksen voima voi muuttaa jokaista otsikkoa tai jokaista kappaletta jne.

Olen myös aiemmin kirjoittanut HTML-tiedoston, jolla oli alareunassa olevia painikkeita. Nämä painikkeet käynnistävät lataavan CSS-tiedoston. Se oli hyvin yksinkertainen JavaScript.

Vastaus, jos ne pidetään erillään

Tyylin ja sisällön pitäminen erillisenä, W3: n ja monien muiden suosittelemat. Se toteuttaa huolenaiheiden ja yksittäisen vastuun erottamista. Molemmat erittäin tärkeät mallit ohjelmistosuunnittelussa.

Vastaa, jos annat oppitunnin erottaa CSS-tiedostot.

Joo. Jos on tärkeää pitää nämä erilliset, mikä on, niin sinun pitäisi opettaa oppilaat pitämään ne erikseen. Säästä aikaa opettamalla niitä sekoittamaan HTML-koodiin (Tämä säästää aikaa kahdesti, koska sinun ei tarvitse un-opettaa sitä).


Olen tehnyt tämän vain yhden tai kaksi ihmistä (ei luokkaa).

5 comments
ItamarG3 07/30/2017
Tämä toinen kappale vaikuttaa erityisen hyödylliseltä. Mutta se ei vastaa, pitäisikö minun todella opettaa opetusta, miten ja miksi kirjoitettaisiin css-tyylitaulukko inline-html- style attribuuttien sijaan.
richard 07/30/2017
Lisäsi osittainen vastaus Ifiin ja miksi omistaa oppitunti.
1 Buffy 07/30/2017
Olen samaa mieltä siitä, että un-opetus on kaikkien aikojen erityisen tuhlaava käyttö. On parasta pitää kiinni väärinkäsityksistä, ennen kuin huonoja tapoja rakennetaan ja vahvistetaan.
1 richard 07/30/2017
@ tim, tämä on vain kuormitusoptimointi. Käsitteellisyyden pitäisi silti olla erillinen. Google kuitenkin sanoo laittaa sen samaan tiedostoon. He eivät sano, että sinun pitäisi muotoilla jokainen bitti erikseen. He sanovat ottavan mitä voisi olla css-tiedostossa ja lisää se html: n <style> -osaan.
1 Darren 07/31/2017
Sen sijaan, että annettaisiin opiskelijoille erilaisia ​​tyyliarkkeja, jotka vaikuttavat koodiinsa, yritän päinvastaista lähestymistapaa. Kun olet opettanut heitä inline-tyylin HTML-muotoon, anna heille sivua, joka perustuu CSS-dokumenttiin sen tyyliin ja pyytää heitä tekemään omat tyylitietokorttinsa (käyttäen samoja tekniikoita, joita he oppivat käyttämään inline-HTML: tä - vain tyylin merkitsemistä ja laittaa ne yhteen paikkaan). Sitten kaikki luokassa voivat verrata tyyliarkejaan yhteiseen koekenttään (joka on annettu) ja nähdä mahdollisuudet.

Buffy 07/30/2017.

Jos haluat vain rakentaa sivun, joka on yksinkertainen ja ad hoc, eikä tule koskaan muuttumaan tulevaisuudessa, ja se näkyy vain yhdellä laitteella, luo sitten tyylit suoraan html-muotoon. Se on sama, kun kirjoitat ohjelmaa, joka ajetaan vain yhdellä laitteella saadaksesi vastauksen, jonka jälkeen ohjelma vanhenee. Ei siis ole syytä koodata huolellisesti. "Nopea ja likainen" toimii tällaisissa asioissa.

Asioita ei kuitenkaan muuteta, ja verkkosivuja tarkastellaan laitteilla, joilla on vaihtelevat näytön koot, jopa värimallit. Ja niitä voidaan tarkastella tulevaisuudessa laitteissa, joita ei vielä ole.

Joten, jos haluat rakentaa sivustoja, jotka ovat tärkeitä ja kestäviä ja jotka on säilytettävä tulevaisuudessa, käytä CSS: ää. Et todennäköisesti kirjoita tärkeätä C-ohjelmaa, mutta ainakin tekisi niistä asioita, joiden on oltava samat, mutta niitä käytetään uudelleen. Yksinkertaisessa C-ohjelmoinnissa huomioimme toiminnot tähän. HTML: ssä mitoitetaan muotoilua. Syvemmällä tasolla palvelinpuoli myös kertoo suurimman osan tiedoista, jne. Näin asiat, joiden on tarkoitus olla samat, pysyvät samoina ja mahdollistavat yhden suunnittelun tason muuttamisen muista tasoista riippumatta.

Tämä ei ole täsmälleen sama asia, mutta tutustu Googlen etusivun taustalla olevaan koodiin. En tiedä, mitä he käyttävät laittaa yhteen ja ylläpitää sitä, mutta epäilen, että se on vain tekstieditori. Huomaa, että etusivu , vaikka se onkin erittäin yksinkertainen, muuttuu usein.

Note to the Instructor Kun olet valmis arvostamaan opiskelijan työtä, voit tarkastella sitä eri laitteilla, joilla on eri näytön resoluutiot. En kuitenkaan suosittele, että annat myös ne laitteiden välityksellä css.

Tarkastele tätä varten joitain StackExchange-sivuja työpöydällä ja puhelimella. Ja järkyttävänä, katso myös joidenkin sivujen lähdekoodit ja tyylitekstit.

2 comments
1 Luke Sawczak 07/31/2017
Vertailu toimintoihin on hyvä. Oletan, että kyseinen synti toimittaa suoraan tyyliattribuutteja lähdekoodeissa. Jos näin on, sitä voidaan verrata menetelmän kehoon ja vain tarttua siihen, mihin aiot kutsua menetelmää. Toisinpäin tuottava äärimmäinen.
no comprende 08/01/2017
Todellisesta järkytyksestä katso Microsoftin sivujen ja Moodle-lähdekoodeja! Ne voivat olla satoja rivejä pitkiä. Alkuperäinen HTML-käsite oli se, että se toimisi laitteilla, jotka "eivät vielä ole". Ja tällä hetkellä on niin paljon näytön kokoisia, että se voi olla vain vain muuttuja.

AnoE 07/30/2017.

Jotta he todella ymmärtäisivät, mitä voit tehdä CSS: llä yksin - korvaamalla only toisen CSS-tiedoston - siirrä ne CSS Zen Gardeniin . Kun jokaisella sivulla on täsmälleen sama HTML-koodi, ja only .css-tiedosto korvataan, saat absurdisesti villit sivut. Seesteisestä pienestä olemuksesta 3D-ruutuun kuutioihin ...

Sitten selittäkää heille, että HTML: n tekemiseen tarvittavat taitotasot (erityisesti äärimmäisen kaltaiset) CSS-versiot ovat huomattavasti erilaiset ja että HTML toimii vain tietovälineenä.

Toinen hyöty olisi asentaa näytönlukija (sokeille) - niille, joilla on rajallinen vapaata käyttöä - näyttämään, kuinka sama HTML näyttää "puhuttuaan ääneen.

Huomaa myös, että nämä näkövammaisten työkalut pystyvät esimerkiksi poimimaan linkkitekstit ja niin edelleen HTML: stä, jos se on hyvin jäsennelty, ja tämä mahdollistaa myös sivun siirtymisen vain näppäimistöllä - mikä voi olla hyödyllistä, jos yksi on niin taipuvainen, vaikka silmä on kunnossa.

Lopuksi on huomautettava, että sivu, jossa sisältöä ja muotoilua on hyvin erotettu, on paremmat mahdollisuudet työskennellä kannettaville laitteille - avainsana on herkkä muotoilu, jossa sisältö voi vapaasti kulkea mihin tahansa tarkkuuteen tarpeen mukaan.


thehayro 07/30/2017.

Kaventamaan sitä, etsin esimerkkejä tai selityksiä siitä, miten opettaminen nimenomaan voisi helpottaa opiskelijoiden muokkaamista verkkosivuillaan. Mieluiten selitys.

Kuten Richard sanoo, oppilaat voivat nähdä, miten yksinkertainen tyylin muokkaus voi muuttaa jokaisen elementin.

Esimerkkinä voit antaa oppilaille "tuntua" etuna erottaa tyyli html. Mikä tarkoittaa, anna heille liikunta, jossa he tarvitsevat jotain elementtejä (esim. Värin elementin taustat) niiden html: ssä. Salli niiden vaihtaa jokainen elementti toiseen väriin. Oppiaihe olisi antaa heille ymmärtää, että tämä tehtävä voi olla paljon vähemmän aikaa vievää, jos erotat tyylin html: stä. Sitten voit osoittaa, miten muuttaa yhden rivin css: ssä, joka muuttaa kaikki elementit taustaväri.

4 comments
thesecretmaster♦ 07/30/2017
HI thehayro! Tervetuloa tietotekniikan opettajille !
Puppy 07/30/2017
Vaihtoehtoisesti ne voisivat tuottaa HTML-koodinsa kuten terveellisen henkilön, jolloin on tavallista muuttaa jokaisen elementin väriä ilman erillisiä tyyliarkkeja.
1 thehayro 07/30/2017
Varma. Tämä vastaa vaatimuksia, joissa verkkosivun pitäisi näkyä (mobiili / työpöytä). Mutta kysymys sikäli kuin ymmärsin sen, oli se, miten selittää miksi ja miten on tarpeen erottaa HTML ja CSS.
no comprende 08/01/2017
Kun oppin CSS: ää, annoin itselleni tehtäviä uudestaan ​​suuresta shakkilaudasta ja kanonisesta kolmen sarakkeen sivun asettelusta otsikolla ja alatunnistimella.

SpiritBH 07/31/2017.

No kysy itseltäsi: Miksi erotamme minkä tahansa koodin muodossa?

Lähes jokaisessa ohjelmointi- / komentosarjakielessä on erottaminen ja delegointi. Teemme tämän varmistaaksemme, että voimme helposti seurata kaikkia koodeja ja pystyä tunnistamaan ongelmat helpommin (joka väistämättä syntyy, koska ohjelmoija ei ole tietämättömiä)

Joten uskon, että CSS: n omistettu oppitunti on hyvä idea, koska se auttaa heitä ymmärtämään, mikä on vastuussa siitä. Se auttaa heitä ymmärtämään, että jos kaikki HTML on oikea, kun tarkastellaan lähdettä, mutta kaikki meikki on edelleen sekaisin, että heidän on tarkasteltava CSS: ää.

Tämän lisäksi CSS on suuri, joustava ja voi tehdä paljon enemmän kuin vain luoda mukava reunus ympärilleen. Osoittamalla luokalle, mitä se voi tehdä ja kuinka monimutkainen se voi saada, viedään eteenpäin kotiin, miten on järkevää yhdistää HTML ja CSS liian syvälle.

Loppujen lopuksi CSS: n erottaminen HTML: stä (tai mikä tahansa asiaan liittyvä koodi) on kehitystila; se ei ole siitä, että luominen toimii (parempi) sen suhteen, että kehittäjällä on enemmän ja helpommin valvoa niiden luomista.

Ehkä siinä merkinnässä, jonka haluat yrittää tehdä luokka tarkistaa toistensa toimesta, auttaa heitä näkemään, kuinka tärkeää on olla puhdas delegoitu koodi, kun työskentelet tiimissä.

1 comments
ItamarG3 07/31/2017
nostaa joitain erittäin mielenkiintoisia kohtia. Kiitos! ja tervetuloa tietotekniikan opettajille

gabe3886 07/31/2017.

Hieman erilainen tapa tarkastella sitä saattaa olla ottaa käyttöön DRY koodi (Älä toista itsesi).

Käyttämällä muotoilua CSS: llä tiedät, että yksinkertaisesti lisäämällä luokka HTML-elementtiin tyylin pitää tarttua. Jos sinun oli lisättävä kaikki manuaalisesti, silloin kun haluat vaihtaa yhden osan, sinun on vaihdettava paljon ja paljon muuta.

Jos haluat varastaa kuvituksen W3-kouluista , jos haluat, että kappaleilla on eri taustavärit, voit tehdä sen tällä tavalla:

Paragraph 1

Paragraph 2

Paragraph 3

Paragraph 4

Mutta jos haluan muuttaa tilausta, niin se on 2,4,3,1 mutta pitää väritys, niin minun on muutettava kaikki tyylit, jotka on rakennettu jokaiseen tagiin. Jos tämä on useita sivuja, niin työkuorma voi olla valtava.

Jos tein sen CSS: ssä, voin tehdä seuraavasti:

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

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

Nyt se ei enää välitä mitä sisältö on, voin tilata heille, kuinka pidän ja tyylit toimivat edelleen. Paljon vaivaa muuttui. Jos tilaamatta jättäisin, jos halusin vaihtaa niitä järkeviin väreihin, jotta ne ovat helposti luettavia, muutan arvoa CSS: ssä kerran ja sitä sovelletaan jokaiseen vastaaviin DOM-kohteisiin.

Tämän lisäksi (koska CSS voidaan upottaa HTML-koodiin päätyökalussa), jakamalla se tiedostoon ja mukaan lukien tämä, minun ei tarvitse toistaa (nyt järkevämpää) CSS-tiedostoa eri tiedostoihin alas kansion rakenteisiin kutakin sivu minulla on. Sisällytä CSS-tiedosto otsikkoon ja tyylit tulevat voimaan. Nyt, jos teen muutoksia väreihin tai lisätään muita tyylejä, saan samanlaisia ​​etuja siitä, että minulle ei tarvinnut kopioida, koska minulla ei ollut käytettäviä inline-tyylejä.

Toinen hyöty, joka on erillinen tiedosto, pois jakautuneista vastuista, on suorituskyky. Selaimet ovat melko hyviä tallennettaessa tiedostoja välimuistiin, joten jos sen on ladattava yksi (mieluiten minified) CSS-tiedosto sivustolle, jonka kerran se voi hakea uudelleen, se on yksi vähemmän asia, jotta se voi ladata muille sivuille. Suorituskyvyn pitäisi aina olla ihmisten huomio, varsinkin matkapuhelimen selaamisen lisääntyessä. Jos verkkosivulla on paljon CSS: tä siinä, lähde on tietenkin suuri. Tämä kestää kauemmin ladata ja / tai tulla käyttökelpoiseksi, mikä voi aiheuttaa ihmisille sen, että odotus ei ole hyväksyttävää heille.


ncmathsadist 08/01/2017.

Opetamme, että web-sivulle on kolme tasoa: rakenne, ulkonäkö ja käyttäytyminen. Rakenne määrittää DOM, joka luodaan hyvin muodostetulla HTML5-merkinnällä. Kun tiedämme HTML: stä, aloitamme välittömästi asiakirjapuun piirtämisen, jotta voimme ymmärtää, miten sivun elementit liittyvät toisiinsa.

Ulkonäkö määräytyy CSS: n mukaan, joka käyttää DOM: ää muotoilemaan ja muotoilemaan sivua. Tämä säilytetään erillisessä tiedostossa, jotta se voidaan jakaa vastaavan sivuryhmän kanssa. HTML käsittelee ad hoc -tilanteita käyttämällä id tai class . Näiden avulla sivujen ylläpito helpottuu, koska näiden attribuuttien kohteiden tyyli tehdään one place CSS-tiedostossa.

Kolmas kerros on käyttäytyminen, joka pitäisi näkyä JavaScript-tiedostossa. JavaScript never tule näkyviin sivulle, paitsi kutsutoiminnoista tapahtumakäsittelykoodista. Jopa tämä voidaan liittää JS-tiedostoon. Varmista, että oppilaat tietävät load ja onload varhaisessa vaiheessa, jotta he voivat viivästyttää koodin kutsun, kunnes sivuelementit ovat olemassa.

Jos asennat solmun, voit suorittaa JS-koodin testit komentoriviltä ja kehittää testisovelluksia luomiasi toimintoihin.

Kolmen kerroksen erottaminen pitää asiat siistinä ja maksimoi koodin uudelleenkäytön.


user1639154 07/31/2017.

Vaikuttaa siltä, ​​että monet vastaukset eivät käsittele tyylin perimistä, sillä tämä olisi myös opetettava. Perussääntönä on se, mitä luetaan viimeisenä.

ensimmäinen ladattavuus on yleensä asiakirjan päällä oleva ulkoinen arkki. Asiakirjan päähän liitetyt tyyliarkit ohjataan HTML-ruudussa sisäkkäisiin tyyleihin, ja ne puolestaan ​​ohitetaan myös suoraan DOM-elementtiin sijoitetuilla tyyleillä. Tärkeää tunnistetta voidaan käyttää myös tämän käyttäytymisen muuttamiseen.

Useimmat laittaa kaikki niiden css omaan tiedostoonsa, koska se on helpompi ylläpitää eikä vaadi yhtä paljon työtä, kun sitä päivitetään / vaihdetaan.

MUOKKAUS: Jotta selvennettäisiin vielä vähän, on vain erityiset tyylit, jotka sopivat luokkiin, jotka kohtaavat tai ohittavat toisiaan, jos yksi viivakoodi lisää tyylin alleviivaavan tekstin, joka ei ole ulkoisen arkin luokassa Esimerkiksi se lisää vain lisästylejä. Luokat eivät korvaa toisiaan suoraan vaan yhdistyvät toisiinsa.

5 comments
1 ItamarG3 07/31/2017
Vau. Tervetuloa tietotekniikan opettajille . Tämä on todellakin jotain, jota en ollut harkinnut. Haluaisin, jos voisit lisätä esimerkkejä tai kuvauksia, jotka osoittavat sen. (Voin kirjoittaa niitä itse, mutta olen kiinnostunut näkemästä, mitä voit ajatella). Tämä on todella mielenkiintoinen vastaus :)
1 ItamarG3 07/31/2017
Ei liity tähän: miksi et ota kiertomatkamme ? Olen varma, että mielestäsi olisi mielenkiintoista.
user1639154 07/31/2017
Minulla on hieman väärä, sen ulkoiset tyyliarkit, sitten dokumenttityylit ja sitten elementti, aivoni ei ole koskaan 100% maanantaina aamulla. :)
ItamarG3 07/31/2017
Anna anteeksi ja unohda ;). Voit muokata vastaustasi. Vastauksessasi on edit \ linkki. Kun olet siinä, haluaisitko lisätä esimerkin osoittamalla vastauksestasi vastausta? Se olisi todella paljon parempi vastaus: D
user1639154 07/31/2017
Valitettavasti minulla ei ole aikaa juuri nyt. Halusin vain mainita css: n perintöä, koska se on tärkeä osa css: tä.

rackandboneman 08/03/2017.

Tee projekti, jossa tuloksena on kaksi täysin erilaista näkemystä same document , esim. Versio, joka näyttää hyvältä suuresta näytöstä ja toinen, joka näyttää hyvältä iPhonelta.

Käyttämällä ei staattista verkkosivua, mutta tietokoneella luotavat, päivitettävät asiakirjat ajaavat pisteestä kotiin entistäkin enemmän, sillä asiakirjojen generaattorin tyylitiedon upottaminen tekee siitä näkyvästi monimutkaisemmaksi - vain tyylilajittelun vaihtoehdot vaihtavat asiakirjan generator kaikki haitat tai stylesheet joka on täsmälleen mitä tarkoitit. Vielä parempi: Määritä two ryhmää erillisissä huoneen kulmissa asiakirjan luomiseen ja tyyliosaston osiin - ja säädä, miten tekniset tiedot välitetään näiden kahden välillä.

4 comments
ItamarG3 08/03/2017
Tämä on uskomatonta. Vau.
rackandboneman 08/03/2017
No, tee siitä uskottava.
ItamarG3 08/03/2017
Se on uskomatonta, koska se ratkaisee ongelman olosuhteissa, joita en voi paljastaa (koulu juttuja), mutta se ei exactly käsittele kysymystä ...
1 rackandboneman 08/03/2017
Oh, ja olen sekaisin keskustelussa kuin opettajana, mutta IT-ammattilaisena - mitä selitin, miksi asiat tehdään käytännössä aivan kuten teoria, jonka haluat opettaa, sanoo :)

Chris M. 08/02/2017.

Tässä on paljon hyviä vastauksia. Yksi asia, jota en ole nähnyt vielä, on se, että sisällön ja suunnittelun luo usein erilliset henkilöt tai ryhmät ja niin, että kukin määritelty omilla työkaluilla ja kielellä sallii tarvittavat erilliset työnkulut.

4 comments
ItamarG3 08/02/2017
Vau. En ollut ajatellut sitä. Haluatko hieman laajentaa hieman siitä, miten voin selittää tämän erillisessä oppitunnossa CSS-tyylitaulukkojen käytöstä?
Chris M. 08/02/2017
Käytän analogiaa. Auton insinöörit eivät valitse auton värejä. Käsikirjoittajat eivät yleensä pukuja.
ItamarG3 08/02/2017
Näen. Ehkä sinun pitäisi sisällyttää tällaiset analogiat vastaukseen muokkaamalla vastausta.
1 Buffy 08/03/2017
Itse asiassa se on pahempaa. Joissakin suurissa yrityksissä, joilla on tärkeä verkkoyhteys, on standarditiimi, joka istuu sekä sisällön että layout-tiimien yläpuolella. Jos ulkoasu on yksi pikseli pois standardista, teet sen yli. Yksi pikseli.

thesecretmaster 08/03/2017.

Tärkeä syy, miksi sisäiset tyylit ovat huonoja, on koodin luettavuus, tavallinen ja yksinkertainen. Tällöin esimerkin pitäisi riittää osoittamaan asianne:

  
The Title
This is a super great article

Verrattuna:

  
The Title
This is a super great article

Tämän esimerkin lisäksi, ilman luokkia ja tunnuksia, DOM: n tekeminen on vaikeampaa manipuloida javascriptiä käyttämällä, ja käytät mahdottomia käyttää pseudo-elementtejä ja joitain todella mukavia CSS-valitsimia, kuten :nth-child() ja :first-child , muutamia.


Puppy 07/31/2017.

Olisin täysin eri mieltä - muotoilu olisi tehtävä suoraan HTML.

Ensisijaisena ongelmana on, että muotoilu ei ole edes erillään HTML-rakenteesta. Tyylien kirjoittaminen vain fyysisesti erillisessä tiedostossa ei muuta tätä. Hyvä esimerkki on mobiililaitteiden tuki. Teoriassa voit tehdä mobiili CSS-tiedoston. Todellisuudessa tarvitset kuitenkin täysin erillisen UI-mallin, joka tuottaa hyvän kokemuksen mobiililaitteessa ja sitten erillisen HTML-rakenteen, joka tukee tätä ja sitten erillistä tyylityyppiä. "Tee painike sama mutta hieman pienempi" toimii vain pienimmille paloille.

Oikean käyttöliittymän tuottaminen edellyttää tuotettavien HTML-rakenteiden tuottamista. Koska nämä kaksi ovat itse asiassa tiiviisti kytkettyinä, kun ne on sijoitettu, vain tekevät asioista helppoa ymmärtää ja kaikki yhdessä paikassa.

Lisäksi, koska olet todennäköisesti generoimalla HTML-koodisi, ei ole ongelmaa HTML-koodien tuottamisessa päällekkäisillä tyyleillä, koska koodigeneraattori voi polttaa tyylejä koko päivän.

Rikas CSS on erittäin ongelmallinen, koska tyylit ovat täysin satunnaisia ​​ja globaalissa laajuudessa ja niitä on vaikea käyttää uudelleen. Teet luokkatunnuksen siinä toivossa, että kukaan muu ei käyttänyt sitä. Nestät omat luokkasi kyseisen elementin sisällä yrittäessäsi ratkaista tätä ongelmaa vähän, mutta nyt et voi käyttää näitä luokkia uudelleen muissa paikoissa, koska ne eivät ole oikeassa DOM-rakenteessa. Sitten huomaat, että jotkut satunnaisotauti jotain täysin erillisessä sivusi osassa käyttivät luokkasi ilmoittamatta sinua ja nyt olet rikkonut sen vaihtamalla tyylisi. Onnea saada tyyppitarkastusta, IDE-tukea jne. On myös vaikea luoda esim. Parametroituja luokkia tai korvata globaalisti esimerkiksi display: flex display: flex ja display: -webkit-flex iOS: lle.

Oikea tapa käsitellä tyylejä on käsitellä niitä kuten minkä tahansa muun koodin - kapseloida ne joillakin toiminnoilla.

5 comments
1 thesecretmaster♦ 07/31/2017
Hei pentu, tervetuloa tietotekniikan opettajille ! Jos haluat tavata toisen pentun, voit sanoa Buffy , joka on bulldog, chatissa . Tämä on mielenkiintoinen vastaus, kiitos jakaa perspektiivi täällä!
2 richard 07/31/2017
Vaikka en ole samaa mieltä kaikesta, mitä sanoit. Näen sinun näkemyksesi. Erityisesti viimeinen rivi (mielestäni sinun pitäisi laajentaa tätä). Näytä meille, miten luulet sen olevan tehtävä. Vaikka emme 100% samaa mieltä, voisimme oppia jotain.
no comprende 08/01/2017
Vastauksesi muistuttaa minua siitä ajankohdasta, kun kysyin kysymyksen ja joku sanoi: "Jos luette latinaksi." On olemassa monia "oikeita" tapoja tehdä asioita, ja teidän näkökulmastasi, luomalla HTML, ei todellakaan ole mitään eroa. Mutta useimmat ohjaajat eivät opeta tuotettua HTML: tä, aivan kuten useimmat ohjelmoijat eivät osaa kirjoittaa kääntäjiä. Kerros, jonka lisäämme helpottamaan HTML-tiedostojen ylläpitoa, on tarpeeton heijastavan HTML: n avulla. Minäkin haluan tuottaa asioita, mutta olen suuressa vähemmistössä. Ehkäpä voimme puhua verkkotunnuksellisista kielistä joskus?
Puppy 08/01/2017
Opettajat, jotka eivät opeta tuotettua HTML-koodia, eivät opeta hyödyllistä HTML-koodia.
ItamarG3 08/02/2017
@Puppy Onko niin?

Related questions

Hot questions

Language

Popular Tags