Selittämällä, miksi muotoilua ei pitäisi tehdä suoraan HTML-muodossa

ItamarG3 07/30/2017. 13 answers, 3.169 views
lesson-ideas web-development html css

Huomasin hiljattain, että on poistettu html: stä tämän sivuston mukaan . Tästä Stack Overflow -vastaavasta vastauksesta marquee-korvaus tehdään CSS: stä. Muutokselle annettu selitys on, että html on asiakirjan rakenne, ja että ulkoasu ja animaatio ja muotoilu jne. Tulisi tehdä CSS: ltä.

Tämä sai minut ajattelemaan:

Opettaisi nimenomaan html tagin style määritteen asettamisen ja CSS: n välisen erotuksen, joka on hyödyllinen opiskelijoiden ymmärryksen lisäämiseksi CSS: n ja HTML: n liittymisestä?

Jos haluat kaventaa sitä, etsin esimerkkejä tai selityksiä siitä, miten opetus nimenomaan voisi helpottaa opiskelijoiden suunnittelemaan verkkosivujaan . Edullisesti selitys.

"Opettamalla", mitä tarkoitan, on itse asiassa omistanut oppitunnin otsikolla "Styling kautta .CSS" tai jotain vastaavaa.

Jotkin kontekstit, jos niitä tarvitaan:

Opiskelija oppii perussuunnittelun: HTML, JavaScript (erittäin yksinkertainen), JSP ja SQL. He oppivat näitä 1 vuoden ajan ja vuoden lopussa heillä on oltava verkkosivusto (jolle he saavat palkkaluokkia). Ihmettelen, voisiko oppitunti kokonaan CSS: stä johtaa lopulta parempiin sivustoihin.

13 Answers


Kevin Workman 02/07/2018.

Opettaisi nimenomaan html-tagin tyyli-määritteen asettamisen ja CSS: n välisen erotuksen, joka on hyödyllinen opiskelijoiden ymmärryksen lisäämiseksi CSS: n ja HTML: n liittymisestä?

Jos haluat kaventaa sitä, etsin esimerkkejä tai selityksiä siitä, miten opetus nimenomaan voisi helpottaa opiskelijoiden suunnittelemaan verkkosivujaan. Edullisesti selitys.

Näytä heille, miksi erillisten CSS-tiedostojen käyttö helpottaa heidän elämäänsä.

Step 1: Anna oppilaille tehtävä, jossa he luovat HTML-sivun, jossa on joukko elementtejä, jotka käyttävät style attribuuttia sisäiseen muotoiluun. Sinulla on 10 painikkeita, joilla on sama taustaväri, 10 kappaletta samalla suuntauksella jne.

Step 2: Nyt vaihda nämä tyylit. Pyydä heitä muuttamaan painikkeiden taustaväri ja kohdistus kohdissa. Tarkoituksena on näyttää heille, kuinka kivulias tämä manuaalinen prosessi on.

Step 3: nyt käyttöön css-luokkien käsite ja erottamalla CSS omaan osaansa tai omaan tiedostoonsa. Pyydä heitä muuttamaan HTML-koodiaan käyttämään tätä lähestymistapaa sisäisten tyylien sijaan.

Step 4: Nyt vaihda tyylit uudelleen. Tämä on 2-rivinen muutos 20-linjan muutoksen sijaan. Tämä tehtävä on paljon vähemmän tylsiä kuin edellinen.

Tämä lähestymistapa motivoi opiskelijoita, joissa he asuvat, ja näyttävät heille todelliset edut, joita CSS-tyylit erotetaan HTML-sisällöstä. Sitten voit esitellä joitakin muita etuja, joita muut vastaukset käsittelevät.


ctrl-alt-delor 02/08/2018.

Pidän ajatuksesta tuottaa muutamia tyylisivuja, ja oppilaiden soveltaminen HTML-koodeihin. He voivat sitten nähdä erillisten tyylisivujen voiman.

Aloita tyylisivulla, jonka olet tehnyt. Käytä uutta ruudukkoasettelua, käytä jotakin kollegion muotoilua. Mutta ensin saa ne vain luomaan html.

Ne voivat sitten aloittaa tyylisivujen muokkaamisen. He näkevät, että yhden pienen muutoksen voima voi muuttaa jokaista otsikkoa tai jokaista kohtaa.

Olen myös aiemmin kirjoittanut HTML-tiedoston, jonka alaosassa oli joukko painikkeita. Nämä painikkeet käynnistävät toisen CSS-tiedoston lataamisen. Se oli hyvin yksinkertainen JavaScript.

Vastatakseen, jos ne pidetään erillään

W3 ja monet muut suosittelevat tyylin ja sisällön pitämistä erillään. Se toteuttaa huolenaiheiden erottamisen ja yhden vastuun. Molemmat hyvin tärkeät mallit ohjelmistosuunnittelussa.

Vielä parempi: pidä ulkoasu, tyyli, rakenne ja sisältö erillään.

Yksi css layout, toinen tyyli, sitten malli rakenteen (käytän viikset), vedä sisältöä tietokannasta, luoda json, ja ohjelmallisesti yhdistää sen mallin (käyttää mallikirjasto). [tämä osa on nyt opetukseni, mutta mitä teen sivustoilleni.]

Jos haluat vastata, sinun pitäisi ottaa opetus erillisiin CSS-tiedostoihin.

Joo. Jos on tärkeää pitää nämä erilliset, se on, sinun pitäisi opettaa oppilaita pitämään heidät erillään. Säästä aikaa olemalla opettamatta heitä sekoittamaan sitä HTML: n kanssa (tämä säästää aikaa kahdesti, koska sinun ei tarvitse unohtaa sitä).


Olen tehnyt sen vain yhden tai kahden henkilön kanssa (ei luokkaa).


Buffy 07/30/2017.

Jos haluat vain rakentaa sivun, joka on yksinkertainen ja tapauskohtainen eikä koskaan muutu tulevaisuudessa ja että sitä nähdään vain yhdenlaista laitetta kohden, varmista, että muotoilet suoraan html-muotoon. Se on sama, kun kirjoitat ohjelman, joka suoritetaan vain kerran yhdellä laitteella saadaksesi vastauksen, jonka jälkeen ohjelma vanhentuu. Ei siis ole syytä koodata huolellisesti. "Nopea ja likainen" toimii tällaisia ​​asioita varten.

Asiat However muuttuvat, ja verkkosivuja tarkastellaan laitteissa, joissa on vaihteleva näytön koko, jopa värimalleja. 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 luultavasti kirjoittaisi tärkeää C-ohjelmaa main , mutta ainakin tekisivät ne seikat, joiden on oltava samat, mutta joita käytetään uudelleen. Yksinkertaisissa C-ohjelmoinnissa selvitämme tämän toiminnot. Html: ssä tekijä poistetaan tyylistä. Syvemmällä tasolla palvelinpuoli vaikuttaa myös suuressa osassa tietoja jne. Tämä mahdollistaa sellaisten asioiden, jotka oletetaan olevan samat, pysyä samoina, ja antaa meille mahdollisuuden muuttaa yhtä suunnittelutasoa riippumatta muista tasoista.

Tämä ei ole aivan sama asia, mutta katso Googlen etusivun taustakoodia. En tiedä, mitä he käyttävät yhdessä ja ylläpitääkseen sen, mutta epäilen, että se on vain tekstieditori. Huomaa, että heidän etusivunsa , vaikka ulkoasu on uskomattoman yksinkertainen, muuttuu usein.

Note to the Instructor Kun olet valmis laatimaan opiskelijan työn, voit tarkastella sitä eri laitteissa eri näyttötarkkuuksilla. En kuitenkaan suosittele, että teet myös ne tarjoamaan laitekohtaisia ​​css.

Voit tarkastella joitakin StackExchange-sivuja työpöydältä puhelimeen nähden. Ja järkyttääkseen, katso sekä joidenkin sivujen lähteitä että tyylitaulukoita.


AnoE 07/30/2017.

Jotta ne todella ymmärtäisivät, mitä voit tehdä pelkästään CSS: n kanssa - only korvaamalla toisen CSS-tiedoston - vie ne CSS Zen Gardeniin . Jokaisella sivulla on täsmälleen sama HTML-koodi ja only korvattu .css-tiedosto, saat absurdin villi sivuja. Vuodesta rauhallinen pieni mitään 3D-vieritys kuutiot ...

Selitä heille, että HTML: n, taitosohjelman (erityisesti äärimmäisen kaltaisten) CSS: n tekemiseen tarvittava taito on hyvin erilainen, ja että HTML toimii vain tiedonsiirtovälineenä.

Jälleen hyvä leikki olisi asentaa näytönlukija (sokealle) - niillä, joilla on rajoitettu vapaa käyttö, voidaan näyttää, kuinka sama HTML "näyttää", kun puhutaan ääneen.

Huomioi myös, että näkövammaisten työkalut voivat esimerkiksi poimia linkitekstejä ja niin edelleen HTML: stä, jos se on hyvin jäsennelty, ja tämä mahdollistaa myös sivun navigoinnin vain näppäimistöllä - mikä voi olla hyödyllistä, jos on niin kalteva, vaikka näkö olisi hyvä.

Lopuksi huomautan, että sivulla, jossa on hyvin erottuva sisältö ja muotoilu, on suurempi mahdollisuus työskennellä kannettavilla laitteilla - avainsana on herkkä muotoilu, jossa sisältö voi liikkua vapaasti mihin tahansa päätöslauselmaan tarpeen mukaan.


thehayro 02/08/2018.

Jos haluat kaventaa sitä, etsin esimerkkejä tai selityksiä siitä, miten opetus nimenomaan voisi helpottaa opiskelijoiden suunnittelemaan verkkosivujaan. Edullisesti selitys.

Kuten Richard sanoo, oppilaat voivat nähdä, miten yksi yksinkertainen tyylin muokkaus voi muuttaa jokaista elementtiä.

Esimerkiksi voit antaa oppilaillesi "tuntua" tyylin erottamisesta html: stä. Se tarkoittaa, että heille annetaan harjoitus, jossa heidän täytyy tyylitellä joitakin elementtejä (esim. Elementin taustan väri) html-muodossa. Anna sitten muuttaa jokainen elementti toiseen väriin. Opetus olisi antaa heille ymmärtää, että tämä tehtävä voi olla paljon vähemmän aikaa vievää, jos erotat tyylin html: stä. Voit sitten osoittaa, miten yksi rivi voidaan muuttaa css: ssä, mikä muuttaa kaikki elementtien taustavärin.


SpiritBH 02/08/2018.

No kysy itseltäsi: Miksi erotellaan mitään koodin muodossa?

Lähes jokaisessa ohjelmointi- / skriptikielessä on erottelu ja delegointi. Teemme tämän varmistaaksemme, että voimme helpommin seurata koodia ja tunnistaa helpommin ongelmat (jotka väistämättä itävät, koska mikään ohjelmoija ei ole väärä)

Joten luulen, että CSS: n oma 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 vielä hämmentynyt, heidän täytyy katsoa CSS: ään.

Sen lisäksi CSS on suuri, joustava ja voi tehdä paljon enemmän kuin vain asettaa mukavan reunan asioiden ympärille. Osoittaaksesi luokan, mitä se voi tehdä ja kuinka monimutkainen se voi saada, ajaa pistettä edelleen kotiin, miten on järjetöntä sekoittaa HTML ja CSS liian syvälle.

Lopulta CSS: n erottaminen HTML: stä (tai mistä tahansa koodista kyseiselle aineelle) on kehityskeskustelu; se ei ole siitä, että luominen toimii (parempi) sen suhteen, että kehittäjällä on enemmän ja helpompaa valvontaa niiden luomisesta.

Ehkä tässä muistiossa haluat kokeilla ja tarkistaa toisensa työskentelemään, se auttaa heitä näkemään, kuinka tärkeää on puhdas delegoitu koodi, kun työskentelet tiimissä.


gabe3886 07/31/2017.

Hieman erilainen tapa tarkastella sitä voisi olla DRY koodin käyttöönotto (älä toista itseäsi).

Käyttämällä CSS: tä tyylin tekemiseen, tiedät, että yksinkertaisesti lisäämällä luokka HTML-elementtiin, muotoilun pitäisi kestää. Jos joudut lisäämään sen manuaalisesti, niin kun sinun täytyy vaihtaa yksi osa, sinun täytyy vaihtaa monia, paljon muuta.

Jos haluat varastaa kuvan W3-koulujen kuvauksesta, jos halusit, eli kappaleissa on erilaiset taustavärit, voit tehdä sen tällä tavalla:

Paragraph 1

Paragraph 2

Paragraph 3

Paragraph 4

Mutta jos haluan muuttaa järjestystä niin, että se on 2,4,3,1 mutta pidän värin, minun on sitten muutettava kaikki kullekin tunnisteelle rakennetut tyylit. Jos se on useiden sivujen kohdalla, työn kuorma voi olla valtava.

Jos tein sen CSS: ssä, voin tehdä seuraavat toimet:

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

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

Nyt se ei enää välitä siitä, mitä sisältö on, voin tilata heille, miten pidän ja muotoilu toimii edelleen. Paljon vaivaa muuttui. Jos et halua vaihtaa niitä mielekkäempiin väreihin, jotta ne olisivat helposti luettavissa, muutan CSS-arvoa kerran, ja sitä sovelletaan kaikkiin vastaaviin DOM-kohteisiin.

Tämän lisäksi (koska CSS voidaan sisällyttää HTML-koodiin päämerkissä), jakaa se tiedostoon ja se tarkoittaa, että minun ei tarvitse toistaa (nyt järkevämpiä) CSS-tiedostoja eri tiedostoihin, kansiorakenteisiin kullekin -sivulla on. Lisän CSS-tiedoston otsikkoon ja tyylit tulevat voimaan. Nyt jos minun on tehtävä muutoksia väreihin tai lisättävä lisää tyylejä, saan samat edut, että minun ei tarvitse kopioida niitä, joita minulla ei ollut, kun käytin sisäisiä tyylejä.

Toinen etu, kun erillinen tiedosto on jaettu vastuusta, on suorituskyky. Selaimet ovat melko hyviä tiedostojen välimuistissa, joten jos se tarvitsee ladata yhden (mieluiten minimoidun) CSS-tiedoston sivustolle kerran, jonka se sitten voi hakea uudelleen, se on vähemmän tärkeää ladata muille sivuille. Suorituskyky on aina otettava huomioon ihmisille, erityisesti mobiilin selaamisen lisääntyessä. Jos verkkosivulla on paljon CSS: ää, lähde on luonnollisesti suuri. Lataaminen ja / tai käyttökelpoisuus kestää kauemmin, mikä saattaa saattaa ihmiset pois siitä, että odotus ei ole niille hyväksyttävää.


ncmathsadist 08/01/2017.

Opetamme, että verkkosivulle on kolme kerrosta: rakenne, ulkonäkö ja käyttäytyminen. Rakenne määräytyy DOM, joka on luotu hyvin muodostetulla HTML5-merkinnällä. Kun opimme HTML: stä, aloitamme heti dokumentin puun piirtämisen, joten voimme ymmärtää, miten sivun elementit liittyvät toisiinsa.

Ulkonäkö määräytyy CSS: n avulla, joka käyttää DOM-muotoa sivun alustamiseksi ja tyylittämiseksi. Tämä pidetään erillisessä tiedostossa siten, että siihen voi liittää vastaava sivuryhmä. HTML käsittelee ad hoc -tilanteita käyttämällä id tai class . Näiden avulla sivujen säilyttäminen on helpompaa, koska näiden ominaisuuksien sisältävien kohteiden tyyli tehdään one place CSS-tiedostossa.

Kolmas kerros on käyttäytyminen, jonka pitäisi näkyä JavaScript-tiedostossa. JavaScript never tarvitse never ilmestyä sivulle, lukuun ottamatta tapahtumakäsittelykoodin kutsumistoimintoja. Jopa tämä voidaan liittää JS-tiedostoon. Varmista, että opiskelijat tietävät load ja onload varhain, jotta he voivat viivyttää koodin kutsumista, kunnes sivun elementit ovat olemassa.

Jos asennat solmun, voit suorittaa JS-koodin testejä komentorivillä ja kehittää testisarjoja luotuihin toimintoihin.

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


rackandboneman 08/03/2017.

Tee projekti, jossa tuloksena on kaksi täysin erilaista näkymää same document , esimerkiksi versio, joka näyttää hyvältä suurella näytöllä ja toinen, joka näyttää hyvältä iPhonessa.

Käyttämällä muuta kuin staattista verkkosivua, mutta tietokoneella tuotettuja, päivitettäviä asiakirjoja, ohjataan piste kotiin vieläkin enemmän, koska tyylitietojen upottaminen asiakirjageneraattoriin tekee siitä näkyvästi monimutkaisemman - ainoat vaihtoehdot sekoittaa tyylin kanssa joko muuttavat dokumentin generator kaikki ongelmat tai stylesheet joka on juuri sitä, mitä tarkoitit. Vielä parempi: Määritä two ryhmää huoneen erillisiin kulmiin, jotta voit tehdä dokumentin luomisen ja tyylitaulukon osat - ja säätää, miten eritelmät välitetään.


user1639154 07/31/2017.

Näyttää siltä, ​​että monet vastaukset täällä eivät koske muotoilun perintökohtaa, koska sitä pitäisi myös opettaa. Perussääntö on se, mitä luetaan viimeisin.

ensimmäinen ladataan yleensä asiakirjan pään ulkoinen arkki. Dokumentin päähän linkitetyn tyylilomakkeen yli kulkee html-kehoon sijoitetut tyylit, ja ne puolestaan ​​ohitetaan suoraan DOM-elementtiin sijoitetuilla tyyleillä. ! Tärkeää merkkiä voidaan käyttää myös tämän käyttäytymisen muuttamiseen.

Useimmat saattavat kaikki css: n omaan tiedostoonsa, koska se on helpompi ylläpitää eikä vaadi yhtä paljon työtä päivitettäessä / muutettaessa.

MUOKKAA: Vain selventääksesi hieman pidemmälle, vain tietyt tyylit vastaavat toisiaan vastaavia luokkia, jos yksi sisäinen lisää tyylin alleviivata tekstiä, joka ei ole luokkaan ulkoisessa arkissa Esimerkiksi se lisää vain ylimääräisen tyylin. Luokat eivät suoraan korvaa toisiaan vaan sulautuvat toisiinsa.


thesecretmaster 08/03/2017.

Tärkeä syy, miksi sisäiset tyylit ovat huonoja, on koodin luettavuus, yksinkertainen ja yksinkertainen. Tässä tapauksessa esimerkin pitäisi riittää osoittamaan pisteesi:

  
The Title
This is a super great article

Verrattuna:

  
The Title
This is a super great article

Tämän esimerkin lisäksi, käyttämättä luokkia ja tunnuksia, teet DOM: n paljon vaikeammaksi manipuloida javascriptiä ja teet mahdottomaksi käyttää pseudoelementtejä ja joitakin todella mukavia CSS-valintoja, kuten :nth-child() ja :first-child , vain muutamia.


Chris M. 02/08/2018.

Täällä on paljon hyviä vastauksia. Yksi asia, jota en ole vielä havainnut, on se, että sisällön ja muotoilun luovat usein erilliset ihmiset tai tiimit, ja siten, että jokainen määritellään omilla työkaluillaan ja kielellään mahdollistaa tarvittavat erilliset työnkulut.

Käytän analogiaa. Autoteollisuuden insinöörit eivät valitse auton värejä. Käsikirjoittajat eivät yleensä tee puvustussuunnittelua.


Puppy 07/31/2017.

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

Ensisijainen ongelma on se, että muotoilu ei ole edes etäyhteydestä riippumaton HTML-rakenteesta. Yksinkertaisesti kirjoittaminen tyylit fyysisesti erillinen tiedosto ei muuta tätä. Hyvä esimerkki on mobiililaitteiden tuki. Teoriassa voit tehdä mobiilin CSS-tiedoston. Todellisuudessa tarvitset kuitenkin täysin erillisen käyttöliittymäsuunnitelman, jotta saat hyvän kokemuksen mobiililaitteesta, ja sitten erillisen HTML-rakenteen tukeakseen tätä, ja sitten erillistä tyylejä. "Tee painike sama, mutta hieman pienempi" toimii vain pienimmille kappaleille.

Oikean käyttöliittymän tuottaminen sisältää sellaisen HTML-rakenteen tuottamisen, joka tukee tarvittavia tyylejä. Koska nämä kaksi ovat itse asiassa läheisesti toisiinsa sidottuja, niiden sijoittaminen on vain helppo ymmärtää ja kaikki yhdessä paikassa.

Lisäksi, koska olet todennäköisesti luonut HTML-koodin koodin avulla, ei ole mitään ongelmaa HTML-koodin luomisessa toistetuilla tyyleillä, koska koodigeneraattori voi sulkea tyylit koko päivän.

Raaka-CSS: n käyttäminen on valtavan ongelmallista, koska tyylit ovat täysin satunnaisia ​​ja maailmanlaajuisia ja niitä on vaikea käyttää uudelleen. Teet luokan nimen siinä toivossa, että kukaan muu ei käyttänyt sitä. Voit sijoittaa omiin luokkiinne siihen osaan ja yrittää ratkaista tämän ongelman 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 satunnaiset jätät jossakin täysin erillisessä sivusi osassa käyttivät luokkaa ilmoittamatta teille ja nyt olet rikkonut sen muuttamalla tyylejäsi. Onnea saada tyyppitarkastus, IDE-tuki jne. On myös vaikea luoda esim. Parametroituja luokkia tai soveltaa maailmanlaajuisesti vaihtoja, esim. display: flex display: flex ja display: -webkit-flex iOS.

Oikea tapa käsitellä tyylejä on käsitellä niitä sellaisina kuin kaikki muut koodit koteloivat ne joihinkin toimintoihin.


HighResolutionMusic.com - Download Hi-Res Songs

1 Alan Walker

Lily flac

Alan Walker. 2018. Writer: Alan Walker;Lars Kristian Rosness;Magnus Bertelsen;K-391;Didrik Handlykken;Marcus Arnbekk.
2 Skylar Grey

Everything I Need flac

Skylar Grey. 2018. Writer: Elliott Taylor;Rupert Gregson-Williams;Skylar Grey.
3 Westlife

Hello My Love flac

Westlife. 2019. Writer: Steve Mac;Ed Sheeran.
4 Alan Walker

Lost Control flac

Alan Walker. 2018. Writer: Alan Walker;Thomas Troelsen;Mood Melodies;Sorana;Fredrik Borch Olsen;Magnus "Magnify" Martinsen.
5 Sam Smith

Fire On Fire flac

Sam Smith. 2018. Writer: Steve Mac;Sam Smith.
6 Alec Benjamin

Let Me Down Slowly flac

Alec Benjamin. 2019. Writer: Alec Benjamin;Sir Nolan;Michael Pollack.
7 Conor Maynard

Way Back Home (Sam Feldt Edit) flac

Conor Maynard. 2018. Writer: Ji Hye Lee;Shaun.
8 Alan Walker

Different World flac

Alan Walker. 2018. Writer: Shy Nodi;Alan Walker;Fredrik Borch Olsen;James Njie;Marcus Arnbekk;Gunnar Greve Pettersen;K-391;Corsak;Shy Martin;Magnus Bertelsen.
9 Post Malone

Sunflower flac

Post Malone. 2018. Writer: Carl Rosen;Louis Bell;Billy Walsh;Carter Lang;Swae Lee;Post Malone.
10 The Chainsmokers

Hope flac

The Chainsmokers. 2018. Writer: Kate Morgan;Chris Lyon;Alex Pall;Andrew Taggart.
11 Normani

Dancing With A Stranger flac

Normani. 2019. Writer: Mikkel S. Eriksen;Tor Hermansen;Jimmy Napes;Normani;Sam Smith.
12 Gesaffelstein

Lost In The Fire flac

Gesaffelstein. 2019. Writer: Ahmad Balshe;Nate Donmoyer;Gesaffelstein;DaHeala;The Weeknd.
13 Alan Walker

I Don't Wanna Go flac

Alan Walker. 2018.
14 Loren Gray

Anti-Everything flac

Loren Gray. 2019.
15 Backstreet Boys

No Place flac

Backstreet Boys. 2019.
16 Calvin Harris

Giant flac

Calvin Harris. 2019. Writer: Calvin Harris;Rag'n'Bone Man;Jamie Hartman;Troy Miller.
17 Ran-D

Zombie (Bassjackers Remix) flac

Ran-D. 2019.
18 Lana Del Rey

Hope Is A Dangerous Thing For A Woman Like Me To Have - But I Have It flac

Lana Del Rey. 2019. Writer: Lana Del Rey;Jack Antonoff.
19 Armin Van Buuren

Repeat After Me flac

Armin Van Buuren. 2019.
20 Lucas & Steve

Lunar flac

Lucas & Steve. 2019.

Related questions

Hot questions