Spiegando perché lo styling non dovrebbe essere fatto direttamente in HTML

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

Recentemente ho notato che è stato deprecato da html secondo questo sito . Da questa risposta su Stack Overflow , la sostituzione di marquee è costituita da CSS. La spiegazione data al cambiamento è che l'html riguarda la struttura del documento e che il layout e l'animazione e lo styling ecc. Dovrebbero essere fatti da CSS.

Questo mi ha fatto pensare:

Insegnerebbe esplicitamente la differenza tra l'impostazione dell'attributo di style di un tag html e lo faccio attraverso il CSS utile per aumentare la comprensione degli studenti per l'adesione di CSS e HTML?

Per limitarlo, cerco esempi o spiegazioni su come l'istruzione in modo esplicito potrebbe rendere più facile per gli studenti di stilare le loro pagine web . Preferibilmente una spiegazione.

Con "insegnare esplicitamente" ciò che intendo dire sta usando una lezione con il titolo di "Styling through .CSS", o qualcosa di simile.

Qualche contesto, se necessario:

Gli studenti imparano la progettazione web di base: HTML, JavaScript (molto semplice), JSP e SQL. Essi imparano questi per 1 anno e alla fine dell'anno dovrebbero avere un sito web (per il quale ricevono voti). Mi chiedo se una lezione interamente su CSS potrebbe eventualmente portare a siti web più interessanti.

5 Comments
3 Puppy 07/30/2017
Il problema principale è che state assumendo che lo stile non dovrebbe essere fatto direttamente in HTML e che utilizzando CSS è meglio. Nessuna di queste cose è vera.
ItamarG3 07/31/2017
@Puppy bene, una parte della questione è se dovrei insegnare separatamente. Se non lo faccio, allora non utilizzeranno fogli di stile. Ma pensi che qualsiasi sito web in realtà hardcodes tutto ciò che è css in html? Every div ha una montagna di codice nel suo attributo di style ?
1 David Spence 07/31/2017
Questo sito mostra il potere di mantenere css separati. csszengarden.com - Stessa struttura, diverso stile di css.
ItamarG3 07/31/2017
@DavidSpence bello. Lo uso sicuramente
1 no comprende 07/31/2017
Qualunque cosa tu fai, non mostrargli questo post SO circa l'analisi HTML con Regex . Potrebbe dare loro incubi!

12 Answers


richard 07/30/2017.

Mi piace l'idea di produrre alcuni fogli di stile e avere gli allievi applicarli al loro HTML. Possono poi vedere il potere di avere fogli di stile separati.

Possono poi iniziare a modificare i fogli di stile e vedere la potenza di una piccola modifica può cambiare ogni intestazione o ogni paragrafo ecc.

Ho anche fatto in passato, ho scritto un file HTML che aveva una serie di pulsanti in fondo. Questi pulsanti attiverebbero un diverso file CSS da caricare. Era qualche semplice JavaScript.

Per rispondere dovrebbero essere tenuti separati

Mantenendo lo stile e i contenuti separati, è consigliato da W3 e molti altri. Esegue la separazione delle preoccupazioni e la responsabilità unica. Entrambi i modelli molto importanti nel design del software.

Per rispondere dovresti dedicare una lezione per separare i file CSS.

Sì. Se è importante tenere questi separati, che è, allora è necessario insegnare agli alunni per tenerli separati. Risparmia tempo non insegnandoli a mescolarla con l'HTML (questo ti farà risparmiare tempo due volte, poiché non dovrai non insegnargli).


Ho fatto solo questo con una o due persone (non una classe).

5 comments
ItamarG3 07/30/2017
Questo secondo paragrafo sembra particolarmente utile. Ma questo non risponde se devo davvero dedicare una lezione per insegnare come e perché si dovrebbe scrivere un foglio di stile css, anziché gli attributi di style html inline.
richard 07/30/2017
Ha aggiunto una risposta parziale a If e perché dedicare una lezione ad esso.
1 Buffy 07/30/2017
Sono d'accordo che l'insegnamento non è un uso particolarmente spreco di tutti i tempi. È meglio catturare le idee sbagliate prima che le cattive abitudini siano costruite e rinforzate.
1 richard 07/30/2017
@tim, è solo optimisation carico. La concettualità dovrebbe rimanere separata. Tuttavia Google sta dicendo inserirlo nello stesso file. Non stanno dicendo che dovresti stile ogni bit separatamente. Stanno dicendo che cosa potrebbe essere in un file css e aggiungerlo alla sezione <style> del html.
1 Darren 07/31/2017
Invece di dare agli studenti una varietà di fogli di stile che influenzano il loro codice, vorrei provare l'approccio opposto. Dopo aver insegnato gli stili in linea in HTML, date loro una pagina che si basa su un documento CSS per il suo stile e chiede loro di creare un proprio foglio di stile (utilizzando le stesse tecniche che hanno imparato dall'utilizzo di HTML in linea - solo una questione di etichettatura degli stili e metterli insieme in un unico posto). Poi tutti in classe possono confrontare i loro fogli di stile su un soggetto di prova comune (quello fornito) e vedere le possibilità.

Buffy 07/30/2017.

Se vuoi solo costruire una pagina semplice e ad hoc e non cambierà mai in futuro e sarà mai visto solo su un tipo di dispositivo, quindi assicuratevi di creare lo stile direttamente in html. È lo stesso quando si scrive un programma che verrà eseguito solo una volta su un dispositivo per ottenere una risposta, dopo di che il programma diventa obsoleto. Non c'è quindi alcun motivo per codificare con attenzione. "Quick and dirty" funziona per tali cose.

However cose cambiano e le pagine web vengono visualizzate su dispositivi con dimensioni variabili di schermo, anche modelli a colori. E possono essere visualizzati in futuro su dispositivi che non esistono ancora.

Quindi, se vuoi costruire siti che sono importanti e duraturi e che devono essere mantenuti in futuro, utilizza CSS. Probabilmente non avresti scritto un importante programma C tutto in main , ma almeno, fattura le cose che devono essere le stesse ma vengono riutilizzate. Nella semplice programmazione C, fattoriamo le funzioni per questo. In html abbiamo fattori di stile. A un livello più profondo, il lato del server fa anche conto di gran parte dei dati, ecc. Ciò consente a cose che dovrebbero essere le stesse, restano uguali e ci permettono di modificare un livello di progettazione indipendentemente da altri livelli.

Questa non è esattamente la stessa cosa, ma guarda il codice sottostante della pagina frontale di Google. Non so cosa usano per metterlo insieme e mantenerlo, ma dubito che sia solo un editor di testo. Si noti che la loro pagina anteriore , anche se incredibilmente semplice nel layout, cambia frequentemente.

Note to the Instructor Quando sei pronto a classificare il lavoro dell'allievo, visualizzalo su diversi dispositivi, con diverse risoluzioni dello schermo. Tuttavia, non suggerisco di farli fornire anche css per dispositivo.

Per questo, vedere alcune delle pagine di StackExchange su un desktop e un telefono. E per uno shocker, guarda sia la fonte e i fogli di stile di alcune pagine.

2 comments
1 Luke Sawczak 07/31/2017
Il confronto con le funzioni è buono. Presumo che il peccato in questione sta fornendo direttamente attributi di stile nell'HTML di origine. Se è così, potrebbe essere paragonato a prendere il corpo di un metodo e solo attaccare quello dove si stava per chiamare il metodo. Controproducente nell'estremo.
no comprende 08/01/2017
Per un vero shocker, guarda la fonte e le schede di stile delle pagine Microsoft e Moodle! Possono essere centinaia di righe lunghe. Il concetto originale di HTML è che funzionerebbe su dispositivi che "non esistono ancora". E attualmente ci sono tante dimensioni dello schermo che potrebbe anche essere solo una variabile.

AnoE 07/30/2017.

Per far loro capire veramente cosa puoi fare solo con CSS - only sostituendo un altro file CSS - portalo al CSS Zen Garden . Con esattamente lo stesso HTML per ogni pagina e only il file .css sostituito, si ottiene pagine assurdamente selvatiche. Dal sereno piccolo nulla a cubi 3D a scorrimento ...

Poi spiega a loro che il skillet necessari per rendere l'HTML, rispetto ai skillet per (in modo estremo come quelli) CSS, è notevolmente diverso e che l'HTML funziona solo come vettore di informazioni.

Un ulteriore vantaggio sarebbe quello di installare un lettore di schermo (per i ciechi) - ci sono quelli con limitato uso gratuito - per mostrare loro come lo stesso HTML "guarda" quando si parla ad alta voce.

Inoltre, sottolineare che tali strumenti per i non vedenti sono in grado di estrarre, ad esempio, testi di collegamento e così via dall'HTML se è ben strutturato, e questo consente anche di navigare una pagina con solo tastiera - che può essere utile se uno è così incline, anche se la vista è buona.

Infine, ricorda che una pagina con una buona separazione del contenuto e dello stile ha maggiori possibilità di lavorare su dispositivi portatili: la parola chiave è un design sensibile, dove il contenuto può liberamente scorrere in qualsiasi risoluzione, se necessario.


thehayro 07/30/2017.

Per limitarlo, cerco esempi o spiegazioni su come l'istruzione in modo esplicito potrebbe rendere più facile per gli studenti di stilare le loro pagine web. Preferibilmente una spiegazione.

Come dice Richard, gli alunni possono vedere come una semplice modifica dello stile può cambiare ogni elemento.

Ad esempio, puoi lasciare che i tuoi allievi sentano il beneficio della separazione dello stile dal html. Ciò significa, date loro un esercizio, dove hanno bisogno di stilare alcuni elementi (ad esempio, colore l'elemento di sfondo) nel loro html. Allora lasciarli cambiare ogni elemento in un altro colore. La lezione è quella di far capire a loro che questo compito può richiedere molto meno tempo se si divide lo stile dal html. Potresti poi dimostrare come cambiare una riga nel css, che modifica tutti i colori di sfondo degli elementi.

4 comments
thesecretmaster♦ 07/30/2017
HI thehayro! Benvenuti agli educatori di computer scienza !
Puppy 07/30/2017
In alternativa, potrebbero generare il loro HTML attraverso il codice come una persona sana, nel qual caso, è banale cambiare il colore di ogni elemento senza fogli di stile separati.
1 thehayro 07/30/2017
Sicuro. Ciò è in linea con i requisiti in cui la pagina web dovrebbe essere visualizzata (mobile / desktop). Ma la questione per quanto ho capito, era come spiegare perché e come c'è bisogno di una separazione di HTML e CSS.
no comprende 08/01/2017
Quando stavo imparando CSS mi sono dato i compiti di creare una scacchiera rievocabile e un layout canonico a tre colonne con intestazione e piè di pagina.

SpiritBH 07/31/2017.

Beh, chiedetevi: perché separare qualcosa in qualsiasi forma di codice?

In quasi ogni singola lingua di programmazione / scripting c'è separazione e delegazione. Facciamo questo per assicurarci che siano più facilmente in grado di tenere traccia di tutto il codice e sono in grado di identificare più facilmente i problemi (che inevitabilmente spuntano perché nessun programmatore è infallibile)

Quindi penso che una lezione dedicata al CSS sia una buona idea, perché aiuta a capire cosa è responsabile. Ti aiuta a capire che se tutto il codice HTML è corretto quando si guarda la fonte, ma tutto il trucco è ancora sconvolto, che hanno bisogno di guardare al CSS.

Oltre a questo, il CSS è grande, flessibile e può fare molto di più che mettere un bel bordo intorno alle cose. Per mostrare alla classe cosa può fare e quanto complesso può ottenere, farà avanzare ulteriormente il punto in cui è inutile miscelare troppo HTML e CSS.

Alla fine, la separazione di CSS da HTML (o qualsiasi codice per quella materia) è un attico di sviluppo; la sua non è che la creazione funziona (meglio) la sua relativa allo sviluppatore che ha più e più facile controllo sulla loro creazione.

Forse su quella nota che vuoi provare a fare in modo che la classe controlla l'altra, aiuterà a vedere come è importante avere un codice delegato pulito quando lavori in una squadra.

1 comments
ItamarG3 07/31/2017
si sollevano alcuni punti molto interessanti. Grazie! e benvenuti agli educatori di informatica

gabe3886 07/31/2017.

Un modo leggermente diverso di guardarlo potrebbe essere quello di introdurre il codice DRY (Do not Repeat Yourself).

Utilizzando CSS per eseguire lo stile, sappi che semplicemente aggiungendo una classe a un elemento HTML, lo styling dovrebbe occuparsi. Se dovevi aggiungere tutto manualmente, allora quando devi cambiare una parte, devi cambiare molti e molti altri.

Per rubare un'idea di illustrazione da W3 Schools , se volevi, ad esempio, i paragrafi per avere diversi colori di sfondo, puoi farlo in questo modo:

Paragraph 1

Paragraph 2

Paragraph 3

Paragraph 4

Ma, se voglio cambiare l'ordine in modo che sia 2,4,3,1 ma mantengo la colorazione, devo quindi cambiare tutti gli stili costruiti in ogni tag. Se si tratta di più pagine, il carico di lavoro può essere enorme.

Se lo faccio in CSS, posso fare quanto segue:

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

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

Ora non si preoccupa più del contenuto, posso ordinarli come mi piace e lo stile funziona ancora. Molti sforzi sono cambiati. Ignorando l'ordine, se volessi cambiarli a colori più sensibili in modo che siano facilmente leggibili, cambio il valore in CSS una volta e viene applicato a ciascuna voce DOM corrispondente.

Al di là di questo (poichè il CSS può essere incorporato in HTML nel tag head), dividendolo in un file e compreso quello significa che non devo ripetere il mio (ora più sensibile) CSS in vari file, giù in strutture di cartelle per ciascuno pagina che ho. Includo il file CSS nell'intestazione e gli stili hanno effetto. Ora, se ho bisogno di apportare modifiche ai colori o aggiungere stili aggiuntivi, ottengo gli stessi vantaggi di non aver bisogno di duplicare quello che avevo da non utilizzare stili in linea.

Un altro vantaggio di avere un file separato, lontano dalle responsabilità di divisione, è la prestazione. I browser sono abbastanza buoni nei file di memorizzazione in cache, quindi se deve scaricare un file CSS (idealmente minificato) per il sito una volta che può essere riapplicato, è meno una cosa da scaricare per altre pagine. Le prestazioni devono sempre essere una considerazione per le persone, in particolare con l'aumento della navigazione mobile. Se una pagina web ha un sacco di CSS in esso allora la fonte è, naturalmente, grande. Questo richiede più tempo per scaricare e / o diventare utilizzabili, che può mettere le persone fuori l'attesa diventa inaccettabile per loro.


ncmathsadist 08/01/2017.

Inseriamo che ci sono tre livelli a una pagina web: struttura, aspetto e comportamento. La struttura è determinata dal DOM, che viene creato con un tag HTML5 ben formato. Quando apprendiamo l'HTML, cominciamo immediatamente a disegnare l'albero del documento in modo da comprendere come gli elementi di una pagina si riferiscono tra di loro.

L'aspetto è determinato da CSS, che accede al DOM per formattare e stilizzare la pagina. Questo viene conservato in un file separato in modo che possa essere condiviso da un gruppo di pagine correlate. HTML gestisce situazioni ad hoc usando id o class . L'utilizzo di queste funzioni rende le pagine più facili da gestire, poiché lo stile per gli elementi che recano questi attributi viene eseguito in one place in un file CSS.

Il terzo livello è un comportamento che dovrebbe apparire in un file JavaScript. JavaScript never deve never apparire in una pagina, salvo per le funzioni di chiamata dal codice di gestione degli eventi. Anche questo può essere allegato in un file JS. Assicurati che i tuoi studenti conoscano gli eventi di load e l' onload anticipo, in modo da poter ritardare la chiamata del codice fino a quando non esistono gli elementi della pagina.

Se si installa Nodo, è possibile eseguire test di codice JS alla riga di comando e sviluppare suite di test per le funzioni create.

Separare i tre strati mantiene le cose ordinate e massimizza il riutilizzo del codice.


user1639154 07/31/2017.

Sembra che molte risposte qui non stiano affrontando il punto di eredità sullo styling, poiché questo dovrebbe anche essere insegnato. La regola di base è quella che viene letto l'ultima volta che verrà applicata.

il primo caricamento è di solito il foglio esterno nella testa del documento. Un foglio di stile collegato nella testata del documento verrà superato dagli stili inseriti inline nel corpo html e quelli a loro volta verranno sovrascritti dagli stili posizionati direttamente sull'elemento DOM. Il tag! Importante può essere usato per alterare anche questo comportamento.

La maggior parte metterà tutti i loro css nel proprio file perché è più facile da mantenere e non richiederà tanto lavoro quando aggiornato / modificato.

EDIT: solo per chiarire un po 'di più, sono solo gli stili specifici che corrispondono nelle classi che si scontrano / sovrascrivono, se l'inline aggiunge uno stile per sottolineare il testo, che non è nella classe del foglio esterno per esempio aggiungerà semplicemente lo stile extra. Le classi non si sostituiscono direttamente ma si fondono tra loro.

5 comments
1 ItamarG3 07/31/2017
Wow. Benvenuti agli educatori di scienze del computer . Questo è veramente qualcosa che non avevo considerato. Mi piacerebbe poter aggiungere alcuni esempi o una descrizione che lo mostrano. (Posso scrivere loro, ma sono più interessato a vedere cosa si può pensare). Questa è veramente una risposta interessante :)
1 ItamarG3 07/31/2017
Non correlati: perché non fare il nostro giro ? Sono sicuro che lo troveresti interessante.
user1639154 07/31/2017
Ho ottenuto un po 'sbagliato, primo foglio di stile esterno, poi stili di documento e poi sull'elemento, il mio cervello non è mai il 100% in una mattina di lunedì. :)
ItamarG3 07/31/2017
perdonare e dimenticare ;). Puoi modificare la tua risposta. C'è un pulsante di edit \ link direttamente sotto la tua risposta. Mentre sei a questo punto, vuoi aggiungere qualche esempio per dimostrare cosa risponda la tua risposta? Sarebbe davvero una risposta migliore: D
user1639154 07/31/2017
Purtroppo non ho tempo in questo momento. Volevo solo citare l'eredità di css, in quanto è importante aspetto di css.

rackandboneman 08/03/2017.

Crea un progetto in cui il risultato è due viste completamente diverse dello same document , ad esempio una versione che sembra grande su un grande monitor e un altro che sembra grande su un iPhone.

Utilizzando una pagina web statica, ma i documenti aggiornabili dal computer genereranno il punto in casa, perché l'inserimento di informazioni sullo stile nel generatore di documenti renderà visibilmente più complesso: le uniche opzioni di confusione con lo stile cambieranno il generator documenti con tutto il problema coinvolto o il stylesheet che è esattamente quello che hai intenzione. Ancora meglio: Assegnare two gruppi in angoli separati della stanza per creare il documento che genera e le parti del foglio di stile - e regolare come comunicare le specifiche tra i due.

4 comments
ItamarG3 08/03/2017
Questo è incredibile. Wow.
rackandboneman 08/03/2017
Beh, fai credibile allora.
ItamarG3 08/03/2017
È incredibile perché risolve un problema con le circostanze che non posso rivelare (roba scuola), ma non exactly affronta la domanda ...
1 rackandboneman 08/03/2017
Oh, e mi sto immergendo nella discussione come non un insegnante, ma un professionista IT - quello che ho descritto è perché le cose sono fatte in pratica proprio come la teoria che vuoi insegnare dice :)

Chris M. 08/02/2017.

Qui ci sono molte buone risposte. Un punto che non ho ancora visto fatto è che il contenuto e il design sono spesso creati da persone o squadre separate e quindi ognuno di essi definito con i propri strumenti e linguaggio consente i necessari flussi di lavoro separati.

4 comments
ItamarG3 08/02/2017
Wow. Non avevo pensato a questo. Ti dispiace espandere un po 'su come posso spiegarlo in una lezione distinta sull'utilizzo di fogli di stile CSS?
Chris M. 08/02/2017
Vorrei usare un'analogia. Gli ingegneri automobilistici non scelgono i colori dell'auto. Gli sceneggiatori non fanno generalmente il design dei costumi.
ItamarG3 08/02/2017
Io vedo. Forse dovresti includere analogie nella tua risposta modificando la risposta.
1 Buffy 08/03/2017
In realtà è peggio di quello. In alcune grandi aziende con un'importante presenza sul web, c'è un team di standard che siede sopra i team di contenuti e layout. Se il layout è un pixel fuori dello standard, lo fai. Un pixel.

thesecretmaster 08/03/2017.

Un motivo importante per cui gli stili in linea sono cattivi è la leggibilità del codice, semplice e semplice. In questo caso, dovrebbe essere sufficiente un esempio per dimostrare il tuo punto:

  
The Title
This is a super great article

Rispetto a:

  
The Title
This is a super great article

Oltre a questo esempio, senza utilizzare classi e id che rendi il DOM molto più difficile da manipolare usando javascript e rendere impossibile utilizzare pseudo-elementi e alcuni dei selettori CSS veramente belli come :nth-child() e :first-child , per citarne alcuni.


Puppy 07/31/2017.

Mi sarei completamente disagio - lo styling dovrebbe essere fatto direttamente in HTML.

Il problema principale è che lo stile non è nemmeno indipendente dalla struttura HTML. La semplice scrittura degli stili in un file fisicamente separato non lo modifica. Un buon esempio è il supporto per dispositivi mobili. In teoria, è possibile creare un file CSS mobile. Ma in realtà, probabilmente hai bisogno di un design UI completamente separato per produrre una buona esperienza su un dispositivo mobile e quindi una struttura HTML separata per sostenerla, e poi un insieme separato di stili. "Fai il pulsante uguale ma un po 'più piccolo" funziona solo per i pezzi più piccoli.

La produzione dell'interfaccia utente corretta comporta la produzione della struttura HTML che supporta gli stili di cui hai bisogno. Poiché i due sono in realtà intimamente accoppiati, essi sono stati colocati rende le cose semplici da capire e tutte in un unico posto.

Inoltre, dal momento che probabilmente genera il codice HTML attraverso il codice, non esiste alcun problema con la generazione di HTML con stili duplicati, in quanto il generatore di codice può sputare gli stili tutto il giorno.

Il CSS crudo è estremamente problematico poiché gli stili sono completamente casuali e a livello globale e difficili da riutilizzarli. Fai un nome di classe sotto la speranza che nessuno l'ha usata. Nascondi le tue classi all'interno di quel elemento per cercare di risolvere un po 'questo problema, ma ora non puoi riutilizzare queste classi in altri luoghi poiché non sono nella giusta struttura DOM. Poi scopri che un tizio casuale in una parte completamente separata della tua pagina ha usato la tua classe senza avvisarti e ora l'hai spezzato cambiando i tuoi stili. E buona fortuna per ottenere il controllo di tipo, il supporto IDE, ecc. È anche difficile creare classi di parametri, ovvero applicare sostituzioni globali, ad es. display: flex con display: flex e display: -webkit-flex per iOS.

Il modo corretto di affrontare gli stili è quello di affrontarli come con qualsiasi altro codice, incapsulandoli in alcune funzioni.

5 comments
1 thesecretmaster♦ 07/31/2017
Hi Puppy, benvenuto agli educatori di scienze del computer ! Se vuoi incontrare un altro cucciolo, puoi dire ciao a Buffy , che è un bulldog, in chat . Questa è una risposta interessante, grazie per aver condiviso la tua prospettiva qui!
2 richard 07/31/2017
Anche se non sono d'accordo con tutto quello che dici. Vedo il tuo punto. Soprattutto l'ultima linea (credo che dovresti espandere su questo). Mostrami come pensi che dovrebbe essere fatto. Anche se non siamo d'accordo con il 100%, potremmo imparare qualcosa.
no comprende 08/01/2017
La tua risposta mi ricorda l'ora in cui ho fatto una domanda e qualcuno ha detto: "Se leggete la messa in latino". Ci sono molti modi "corretti" per fare le cose, e dal tuo punto di vista, con l'HTML generato, anzi non fa differenza. Ma molti istruttori non insegnano HTML generato, proprio come molti programmatori non imparano a scrivere i compilatori. Lo strato che aggiungiamo per rendere più facile la manutenzione dei file di HTML è superfluo con HTML in uscita. Mi piace anche generare le cose, ma sono nella grande minoranza. Forse possiamo parlare di lingue specifiche del dominio a volte?
Puppy 08/01/2017
Gli istruttori che non insegnano l'HTML generato non insegnano HTML utili.
ItamarG3 08/02/2017
@Puppy È così?

HighResolutionMusic.com - Download Hi-Res Songs

1 (G)I-DLE

POP/STARS flac

(G)I-DLE. 2018. Writer: Riot Music Team;Harloe.
2 Ariana Grande

​Thank U, Next flac

Ariana Grande. 2018. Writer: Crazy Mike;Scootie;Victoria Monét;Tayla Parx;TBHits;Ariana Grande.
3 Imagine Dragons

Bad Liar flac

Imagine Dragons. 2018. Writer: Jorgen Odegard;Daniel Platzman;Ben McKee;Wayne Sermon;Aja Volkman;Dan Reynolds.
4 Backstreet Boys

Chances flac

Backstreet Boys. 2018.
5 Clean Bandit

Baby flac

Clean Bandit. 2018. Writer: Jack Patterson;Kamille;Jason Evigan;Matthew Knott;Marina;Luis Fonsi.
6 BTS

Waste It On Me flac

BTS. 2018. Writer: Steve Aoki;Jeff Halavacs;Ryan Ogren;Michael Gazzo;Nate Cyphert;Sean Foreman;RM.
7 BlackPink

Kiss And Make Up flac

BlackPink. 2018. Writer: Soke;Kny Factory;Billboard;Chelcee Grimes;Teddy Park;Marc Vincent;Dua Lipa.
8 Lady Gaga

I'll Never Love Again flac

Lady Gaga. 2018. Writer: Benjamin Rice;Lady Gaga.
9 Kelly Clarkson

Never Enough flac

Kelly Clarkson. 2018. Writer: Benj Pasek;Justin Paul.
10 Fitz And The Tantrums

HandClap flac

Fitz And The Tantrums. 2017. Writer: Fitz And The Tantrums;Eric Frederic;Sam Hollander.
11 Little Mix

Told You So flac

Little Mix. 2018. Writer: Eyelar;MNEK;Raye.
12 Halsey

Without Me flac

Halsey. 2018. Writer: Halsey;Delacey;Louis Bell;Amy Allen;Justin Timberlake;Timbaland;Scott Storch.
13 Cher Lloyd

None Of My Business flac

Cher Lloyd. 2018. Writer: ​iamBADDLUCK;Alexsej Vlasenko;Kate Morgan;Henrik Meinke;Jonas Kalisch;Jeremy Chacon.
14 Bradley Cooper

Always Remember Us This Way flac

Bradley Cooper. 2018. Writer: Lady Gaga;Dave Cobb.
15 Calum Scott

No Matter What flac

Calum Scott. 2018. Writer: Toby Gad;Calum Scott.
16 Ashley Tisdale

Voices In My Head flac

Ashley Tisdale. 2018. Writer: John Feldmann;Ashley Tisdale.
17 Imagine Dragons

Machine flac

Imagine Dragons. 2018. Writer: Wayne Sermon;Daniel Platzman;Dan Reynolds;Ben McKee;Alex Da Kid.
18 Diplo

Close To Me flac

Diplo. 2018. Writer: Ellie Goulding;Savan Kotecha;Peter Svensson;Ilya;Swae Lee;Diplo.
19 Billie Eilish

When The Party's Over flac

Billie Eilish. 2018. Writer: Billie Eilish;FINNEAS.
20 Little Mix

Woman Like Me flac

Little Mix. 2018. Writer: Nicki Minaj;Steve Mac;Ed Sheeran;Jess Glynne.

Related questions

Hot questions

Language

Popular Tags