Forklarer hvorfor styling ikke skal gøres direkte i HTML

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

Jeg har for nylig bemærket, at er blevet udskrevet fra html ifølge dette websted . Fra dette svar på Stack Overflow er tærskeskiftet lavet af CSS. Forklaringen til ændringen er, at html handler om dokumentstruktur, og at layout og animation og styling mv skal ske fra CSS.

Dette fik mig til at tænke:

Vil eksplicit undervise forskellen mellem at indstille stilattributten til et html tag og gøre det gennem CSS, der er nyttigt for at øge elevernes forståelse for sammenføjningen af ​​CSS og HTML?

For at indsnævre det, søger jeg eksempler eller forklaringer på, hvordan undervisningen eksplicit kan gøre det lettere for eleverne at style deres websider . Fortrinsvis en forklaring.

Ved "eksplicit undervisning", hvad jeg mener, bruger faktisk en lektion med titlen "Styling through .CSS" eller noget lignende.

Nogle sammenhænge, ​​hvis det er nødvendigt:

Eleverne lærer grundlæggende webdesign: HTML, JavaScript (meget grundlæggende), JSP og SQL. De lærer disse i 1 år og i årets udgang bør de have en hjemmeside (for hvilken de får karakterer). Jeg spekulerer på, om en lektion helt om CSS i sidste ende kan føre til bedre udseende hjemmesider.

5 Comments
3 Puppy 07/30/2017
Kerneproblemet her er, at du antager, at styling ikke skal gøres direkte i HTML, og at ved hjælp af CSS er det bedre. Ingen af ​​disse ting er sandt.
ItamarG3 07/31/2017
@Puppy godt, en del af spørgsmålet er, om jeg skal undervise det separat. Hvis jeg ikke gør det, vil de ikke bruge stylesheets. Men tror du, at en hvilken som helst hjemmeside hvor som helst faktisk hardcodes alt det er css i html? Every div har et bjerg af kode i sin style attribut?
1 David Spence 07/31/2017
Dette websted viser kraften til at holde css adskilt. csszengarden.com - Samme struktur, forskellige css stylesheet.
ItamarG3 07/31/2017
@DavidSpence nice. Jeg vil helt sikkert bruge det
1 no comprende 07/31/2017
Uanset hvad du gør, skal du ikke vise dem dette så post om at analysere HTML med Regex . Kunne give dem mareridt!

12 Answers


richard 07/30/2017.

Jeg kan godt lide ideen om at lave et par stilark, og at have eleverne anvende dem på deres HTML. De kan så se kraften i at have separate stilark.

De kan så begynde at redigere stilarkene, og se kraften i en lille ændring kan ændre hver overskrift eller hvert afsnit osv.

Jeg har også tidligere skrevet en HTML-fil, der havde et sæt knapper i bunden. Disse knapper vil udløse en anden CSS-fil, der skal indlæses. Det var nogle meget enkle JavaScript.

For at svare skal de holdes adskilt

At holde stil og indhold adskilt, anbefales af W3 og mange andre. Det gennemfører adskillelse af bekymringer og enkeltansvar. Begge meget vigtige mønstre i software design.

For at svare bør du afsætte en lektion for at adskille CSS-filer.

Ja. Hvis det er vigtigt at holde disse adskilte, som det er, skal du lære eleverne at holde dem adskilt. Spar tid ved ikke at lære dem at blande det ind i HTML'en (Dette sparer tid to gange, da du ikke behøver at undervise det).


Jeg har kun gjort det med en eller to personer (ikke en klasse).

5 comments
ItamarG3 07/30/2017
Det andet afsnit lyder særligt nyttigt. Men det svarer ikke, om jeg virkelig bør afsætte en lektion til undervisning hvordan og hvorfor man skal skrive et css stylesheet i stedet for inline html style attributter.
richard 07/30/2017
Tilføjet et delvis svar til If og hvorfor at afsætte en lektion til det.
1 Buffy 07/30/2017
Jeg er enig i, at un-undervisning er en særlig spildende brug af alles tid. Det er bedst at fange misforståelser, før dårlige vaner er bygget og forstærket.
1 richard 07/30/2017
@ tim, dette er bare en optimisation belastningen. Konceptualitet det skal stadig være adskilt. Men Google siger at sætte det i samme fil. De siger ikke, at du skal style hver bit separat. De siger, tage hvad der kunne være i en css-fil og tilføj det til sektionen <style> i html.
1 Darren 07/31/2017
I stedet for at give eleverne en række stilark, der påvirker deres kode, ville jeg prøve den modsatte tilgang. Efter at have undervist dem inline stilarter i HTML, giv dem en side, der bygger på et CSS-dokument for sin stil og bede dem om at lave deres eget stylesheet for det (ved hjælp af de samme teknikker, de lærte at bruge inline HTML - bare et spørgsmål om at mærke stilarterne og sætte dem sammen på ét sted). Så kan alle i klassen sammenligne deres stilark på et fælles testemne (den du gav) og se mulighederne.

Buffy 07/30/2017.

Hvis du kun ønsker at opbygge en side, der er enkel og ad hoc og aldrig vil ændre sig i fremtiden, og kun vil blive set på en slags enhed, så skal du konstruere stylingen direkte i HTML. Det er det samme, når du skriver et program, der kun køres en gang på en enhed for at få et svar, hvorefter programmet bliver forældet. Der er da ingen grund til at kode omhyggeligt. "Hurtig og snavset" virker for sådanne ting.

However tingene ændrer sig, og websider vises på enheder med varierende skærmstørrelser, lige farver. Og de kan i fremtiden ses på enheder, der endnu ikke eksisterer.

Så hvis du vil bygge steder, der er vigtige og varige, og det skal opretholdes i fremtiden, skal du bruge CSS. Du ville sandsynligvis ikke skrive et vigtigt C-program alt i main , men vil i det mindste faktorere de ting, der skal være de samme, men genanvendes. I simpel C-programmering faktoriserer vi funktionerne herfor. I html vi faktor ud styling. På et dybere niveau betyder serverens side også meget af dataene osv. Dette tillader ting, der skal være ens, forbliver de samme, og lader os ændre et niveau af design uafhængigt af andre niveauer.

Dette er ikke lige det samme, men se på den underliggende kode på Googles forside. Jeg ved ikke, hvad de bruger til at sætte det sammen og vedligeholde det, men jeg tvivler på, at det kun er en tekstredigerer. Bemærk, at deres forside , selvom det er utrolig enkelt i layout, ændrer sig ofte.

Note to the Instructor Når du er klar til at bedømme elevens arbejde, kan du se det på forskellige enheder med forskellige skærmopløsninger. Jeg foreslår dog ikke, at du også får dem til at levere pr. Enhed css.

For den sags skyld, se nogle af StackExchange-siderne på et skrivebord mod en telefon. Og for en shocker, se både kilden og stylesheets på nogle af siderne.

2 comments
1 Luke Sawczak 07/31/2017
Sammenligningen med funktioner er god. Jeg antager, at den pågældende synd direkte leverer stilattributter i kilde HTML. Hvis det er tilfældet, kan det sammenlignes med at tage kroppen af ​​en metode og bare stikke det, hvor du skulle kalde metoden. Modproduktiv i det yderste.
no comprende 08/01/2017
For en rigtig choker, se kilden og stylesheetsne på Microsoft-sider og Moodle! De kan være hundreder af linjer lange. Det oprindelige koncept for HTML var, at det ville arbejde på enheder, der "endnu ikke eksisterer". Og der er i øjeblikket så mange skærmstørrelser, at det lige så godt kan være en variabel.

AnoE 07/30/2017.

For at få dem til at forstå, hvad du kan gøre med CSS alene - med only erstatte en anden CSS-fil - tag dem til CSS Zen Garden . Med præcis den samme HTML for hver side, og only .css-filen erstattes, får du absurt vildt sider. Fra serene lille intet til 3D-rullende terninger ...

Derefter forklare dem, at de færdigheder, der er nødvendige for at lave HTML, vs. skillset til (især ekstreme som dem) CSS er meget forskellige, og at HTML kun fungerer som informationsbærer.

Endnu en god ide ville være at installere en skærmlæser (for blinde) - der er begrænsede gratis brug - for at vise dem, hvordan den samme HTML "ser ud" når man taler højt.

Vær også opmærksom på, at disse værktøjer til synshandicappede kan f.eks. Udtrække linktekster og så videre fra HTML, hvis det er godt struktureret, og det gør det også muligt at navigere en side med tastaturet kun - hvilket kan være nyttigt, hvis man er så tilbøjelig, selv om synet er fint.

Endelig påpege, at en side med god adskillelse af indhold og styling har større chance for at arbejde på bærbare enheder - nøgleordet er lydhørt design, hvor indholdet frit kan strømme ind i en opløsning efter behov.


thehayro 07/30/2017.

For at indsnævre det, søger jeg eksempler eller forklaringer på, hvordan undervisningen eksplicit kan gøre det lettere for eleverne at style deres websider. Fortrinsvis en forklaring.

Som Richard siger, kan eleverne se, hvordan en enkelt redigering af stilen kan ændre hvert element.

Som et eksempel kan du lade dine elever føle fordelene ved at adskille stilen fra html. Hvilket betyder, giv dem en øvelse, hvor de skal style nogle elementer (fx farve elementets baggrund) i deres html. Lad dem så skifte hvert element til en anden farve. Lærdommen ville være at lade dem forstå, at denne opgave kan være meget mindre tidskrævende, hvis du adskiller stilen fra html. Du kan derefter vise, hvordan du ændrer en linje i css, som ændrer alle elementerne baggrundsfarve.

4 comments
thesecretmaster♦ 07/30/2017
HI thehayro! Velkommen til Computer Science Educators !
Puppy 07/30/2017
Alternativt kan de generere deres HTML-kode som en sund person, i hvilket tilfælde det er trivielt at ændre farven på hvert element uden separate stilark.
1 thehayro 07/30/2017
Jo da. Det er op til kravene, hvor websiden skal vises (mobil / desktop). Men spørgsmålet, så vidt jeg forstod det, var, hvordan man forklarede hvorfor og hvordan der er behov for en adskillelse af HTML og CSS.
no comprende 08/01/2017
Da jeg lærte CSS, gav jeg mig selv opgaverne om at skabe et re-sizable skakbræt og et canonisk tre-kolonne sidelayout med header og footer.

SpiritBH 07/31/2017.

Nå spørg dig selv: Hvorfor adskiller vi noget i enhver form for kode?

I næsten alle programmerings- / scripting sprog er der adskillelse og delegation. Vi gør dette for at sikre, at vi lettere kan holde styr på hele koden og er i stand til lettere at identificere problemer (det vil uundgåeligt spire fordi ingen programmør er ufejlbar)

Så jeg tror, ​​at en dedikeret lektion om CSS er en god ide, fordi det hjælper dem med at forstå, hvad der er ansvarligt for. Det hjælper dem med at forstå, at hvis alle HTML er korrekte, når man kigger på kilden, men alle sminke er stadig jumbled, at de skal kigge på CSS.

På toppen af ​​det er CSS stor, fleksibel og kan gøre meget mere end bare at sætte en fin grænse omkring ting. For at vise klassen, hvad det kan gøre, og hvor kompleks det kan få, vil køre punktet videre hjem, hvordan det er uklogt at blande HTML og CSS for dybt.

I sidste ende er adskillelse af CSS fra HTML (eller en hvilken som helst kode for den sags skyld) en udviklingsattest; det handler ikke om oprettelsen fungerer (bedre) dens om udvikleren har mere og lettere kontrol over deres oprettelse.

Måske vil du prøve at få klassen til at tjekke hinandens arbejde, og det vil hjælpe dem med at se, hvordan det er vigtigt at have ren delegeret kode, når du arbejder i et hold.

1 comments
ItamarG3 07/31/2017
du rejser nogle meget interessante punkter. Tak! og velkommen til Computer Science Educators

gabe3886 07/31/2017.

En lidt anderledes måde at se på, kan være at introducere DRY kode (gentag ikke dig selv).

Ved at bruge CSS til at gøre stylingen ved du, at ved simpelthen at tilføje en klasse til et HTML-element, skal stylingen tage fat. Hvis du skulle tilføje det hele manuelt, så skal du ændre mange, mange gange, når du skal ændre en del.

At stjæle en ide om illustration fra W3-skoler , hvis du vil sige, at afsnit skal have forskellige baggrundsfarver, kan du gøre det på denne måde:

Paragraph 1

Paragraph 2

Paragraph 3

Paragraph 4

Men hvis jeg vil ændre ordren så er det 2,4,3,1, men beholder farvningen, så skal jeg ændre alle stilarter indbygget i hvert mærke. Hvis det er på tværs af flere sider, kan arbejdsbelastningen blive enorm.

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

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

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

Nu er det ikke mere, hvad indholdet er, jeg kan bestille dem, hvordan jeg kan lide og stylingen stadig virker. Masser af indsats ændret. Ignorerer ordren, hvis jeg ville ændre dem til mere fornuftige farver, så de er letlæselige, ændrer jeg værdien i CSS en gang, og den anvendes til hver matchende DOM-vare.

Udover det (som CSS kan indlejres i HTML i hovedetiketten), opdeles det i en fil og inklusive det betyder, at jeg ikke skal gentage min (nu mere fornuftige) CSS i forskellige filer, ned i mappestrukturer for hver side jeg har. Jeg inkluderer CSS-filen i overskriften, og stilarterne træder i kraft. Nu, hvis jeg har brug for at foretage ændringer i farverne eller tilføje yderligere stilarter, får jeg de samme fordele ved ikke at skulle duplikere, som jeg havde fra ikke at bruge inline-stilarter.

En anden fordel ved at have en separat fil, væk fra split-ansvaret, er ydeevne. Browsere er ret gode til caching-filer, så hvis det er nødvendigt at downloade en enkelt (ideelt reduceret) CSS-fil til webstedet, en gang det kan genanvendes, er det en mindre ting, at den kan downloades til andre sider. Ydeevne bør altid være et hensyn for folk, især med stigningen i mobil browsing. Hvis en webside har en masse CSS i det, så er kilden naturligvis stor. Dette tager længere tid at downloade og / eller blive brugbar, hvilket kan sætte folk væk fra det, ventetiden bliver uacceptabelt for dem.


ncmathsadist 08/01/2017.

Vi lærer at der er tre lag på en webside: struktur, udseende og adfærd. Strukturen bestemmes af DOM, som er oprettet med velformet HTML5 markup. Når vi lærer om HTML, begynder vi straks at tegne dokumenttræet, så vi kan forstå, hvordan elementer på en side vedrører hinanden.

Udseende bestemmes af CSS, som har adgang til DOM'en til at formatere og style siden. Dette gemmes i en separat fil, så den kan deles af en relateret gruppe sider. HTML håndterer ad hoc situationer ved hjælp af id eller class . Brug af disse gør det lettere at opretholde sider, da stilen til elementer, der bærer disse attributter, er lavet på one place i en CSS-fil.

Det tredje lag er adfærd, som skal vises i en JavaScript-fil. JavaScript skal never vises på en side, gem til at kalde funktioner fra hændelseshåndteringskode. Selv dette kan vedhæftes i en JS-fil. Sørg for, at dine elever har kendskab til load og onload tidligt, så de kan forsinke kodeopkaldet indtil sideelementer eksisterer.

Hvis du installerer Node, kan du køre test af JS-kode på kommandolinjen og udvikle testsuper for de funktioner, du har oprettet.

At adskille de tre lag holder tingene rene og maksimerer genbrug af kode.


user1639154 07/31/2017.

Det lader til, at mange svar her ikke omhandler arvspidsen på styling, da det også bør læres. Den grundlæggende regel er, hvad der læses sidste vil blive anvendt.

Den første til indlæsning er normalt det ydre ark i dokumentets hoved. Et stilark, der er linket i dokumentets hoved, vil blive overskredet af stilarter, der er placeret inline i HTML-kropet, og de vil igen blive tilsidesat af stilarter placeret direkte på DOM-elementet. Den vigtige kode kan også bruges til at ændre denne adfærd.

De fleste vil sætte alle deres css i sin egen fil, fordi det er lettere at vedligeholde og ikke kræver så meget arbejde, når de opdateres / ændres.

EDIT: Bare for at afklare lidt længere er det kun de specifikke stilarter, der matcher i de klasser, der vil kollidere / tilsidesætte hinanden, hvis den ene inline tilføjer en stil til at understrege tekst, der ikke er i klassen i det eksterne ark til eksempel det vil bare tilføje den ekstra styling. Klasserne erstatter ikke hinanden direkte, men fusionerer ind i hinanden.

5 comments
1 ItamarG3 07/31/2017
Wow. Velkommen til Computer Science Uddannere . Dette er virkelig noget, jeg ikke havde overvejet. Jeg ville elske det, hvis du kunne tilføje nogle eksempler eller beskrivelser, der viser det. (Jeg can skrive dem selv, men jeg er mere interesseret i at se, hvad du kan tænke på). Dette er virkelig et interessant svar :)
1 ItamarG3 07/31/2017
Uafhængig: hvorfor tager du ikke vores tur ? Jeg er sikker på at du ville finde det interessant.
user1639154 07/31/2017
Jeg fik det lidt forkert, dens eksterne stilark først, derefter dokument stilarter og så på elementet, er min hjerne aldrig 100% på en mandag morgen. :)
ItamarG3 07/31/2017
Tilgiv og glem ;). Du kan redigere dit svar. Der er en edit \ link direkte under dit svar. Mens du er ved det, vil du gerne tilføje nogle eksempler for at demonstrere, hvad dit svar er rettet mod? Det ville virkelig gøre det til et meget bedre svar: D
user1639154 07/31/2017
Desværre har jeg ikke tid lige nu. Jeg ville bare nævne arv af css, da det er vigtigt aspekt af css.

rackandboneman 08/03/2017.

Lav et projekt, hvor resultatet er to helt forskellige visninger af det same document , f.eks. En version, der ser godt ud på en stor skærm og en anden, der ser godt ud på en iPhone.

Ved ikke at bruge en statisk webside, men computergenererede, opdaterbare dokumenter vil køre punktet hjem endnu mere, da indlejring af stiloplysninger i dokumentgeneratoren gør det synligt mere komplekst. De eneste valgmuligheder, der roterer med stil, vil enten ændre dokumentgeneratoren med alt det besvær, der er involveret eller stylesheet som er præcis hvad du havde tænkt dig. Endnu bedre: Tildel two grupper i separate hjørner af rummet for at gøre dokumentgenerering og stylesheet-delene - og reguler, hvordan specifikationer kommunikeres mellem de to.

4 comments
ItamarG3 08/03/2017
Dette er utroligt. Wow.
rackandboneman 08/03/2017
Nå, gør det troværdigt da.
ItamarG3 08/03/2017
Det er utroligt, fordi det løser et problem med omstændigheder, som jeg ikke kan afsløre (skoleartikler), men det svarer ikke exactly til spørgsmålet ...
1 rackandboneman 08/03/2017
Åh, og jeg blander mig i diskussionen som ikke en lærer, men en it-professionel - det jeg beskrev er, hvorfor ting er gjort i praksis ligesom den teori du vil undervise siger :)

Chris M. 08/02/2017.

Der er mange gode svar her. Et punkt, jeg endnu ikke har set, er, at indhold og design ofte skabes af separate personer eller hold, og så at have hver defineret med egne værktøjer og sprog giver mulighed for de nødvendige separate arbejdsgange.

4 comments
ItamarG3 08/02/2017
Wow. Jeg havde ikke tænkt på det. Kan du huske at udvide lidt på, hvordan jeg kan forklare dette i en separat lektion om brugen af ​​CSS stylesheets?
Chris M. 08/02/2017
Jeg ville bruge en analogi. Automotive ingeniører vælger ikke bilfarver. Screenwriters gør generelt ikke kostume design.
ItamarG3 08/02/2017
Jeg ser. Måske skal du inkludere sådanne analogier i dit svar ved at redigere svaret.
1 Buffy 08/03/2017
Faktisk er det værre end det. På nogle store virksomheder med en vigtig tilstedeværelse på internettet er der et standardhold, der sidder over både indholds- og layoutteam. Hvis layoutet er en pixel ud af standarden, gør du det over. En pixel.

thesecretmaster 08/03/2017.

En vigtig årsag til, at inline-stilarter er dårlige, er kodelæsbarhed, ren og enkel. I dette tilfælde bør et eksempel være nok til at bevise dit punkt:

  
The Title
This is a super great article

Sammenlignet med:

  
The Title
This is a super great article

Ud over dette eksempel, uden at bruge klasser og ids gør du DOM meget sværere at manipulere ved hjælp af javascript, og du gør det umuligt at bruge pseudoelementer og nogle af de rigtig flotte CSS-selektorer som :nth-child() og :first-child at nævne nogle få.


Puppy 07/31/2017.

Jeg ville helt uenig - styling skal ske direkte i HTML.

Det primære problem er, at styling ikke engang er fjernt uafhængig af HTML-strukturen. Du skal bare ændre stilen i en fysisk separat fil. Et godt eksempel er understøttelse af mobilenheder. I teorien kan du lave en mobil CSS-fil. Men i virkeligheden har du sandsynligvis brug for et helt separat UI-design for at producere en god oplevelse på en mobil enhed, og derefter en separat HTML-struktur, der understøtter dette og derefter et separat sæt stilarter. "Gør knappen den samme, men lidt mindre" virker kun for de mindste stykker.

Produktion af den korrekte brugergrænseflade indebærer at producere HTML-strukturen, som understøtter de stilarter, du har brug for. Da de to er i virkeligheden tæt koblet, gør det nemt at forstå dem og få dem til at samle dem på ét sted.

Da du sandsynligvis genererer din HTML-kode, er der heller ikke noget problem med at generere HTML med dubletter, da din kodegenerator kan spytte ud stilarter hele dagen lang.

At have rå CSS er utroligt problematisk, da stilarterne er helt tilfældige og på globalt plan og er vanskelige at genbruge. Du laver et klassenavn under håbet om, at ingen andre brugte det. Du nest dine egne klasser inde i det element for at forsøge at løse dette problem lidt, men nu kan du ikke genbruge disse klasser på andre steder, da de ikke er i den rigtige DOM-struktur. Så finder du ud af, at nogle tilfældige fyr i nogle helt separate dele af din side brugte din klasse uden at give dig besked, og nu har du brudt det ved at ændre dine stilarter. Og held og lykke med at få typekontrol, IDE-support osv. Det er også svært at oprette f.eks. Parameteriserede klasser eller globalt anvende udskiftninger, f.eks. display: flex med display: flex og display: -webkit-flex til iOS.

Den rigtige måde at håndtere stilarter på er at håndtere dem som med enhver anden kode - indkapsler dem i nogle funktioner.

5 comments
1 thesecretmaster♦ 07/31/2017
Hej valp, velkommen til edb-undervisere ! Hvis du gerne vil møde en anden hvalp, kan du sige hej til Buffy , hvem er en bulldog, i chat . Dette er et interessant svar, tak for at dele dit perspektiv her!
2 richard 07/31/2017
Selvom jeg ikke er enig med alt, hvad du siger. Jeg ser dit punkt. Især den sidste linje (jeg synes du bør udvide på dette). Vis os, hvordan du synes, det skal gøres. Selvom vi ikke er 100% enige, kunne vi lære noget.
no comprende 08/01/2017
Dit svar minder mig om det tidspunkt, jeg stillede et spørgsmål, og nogen sagde, "Hvis du læser massen på latin." Der er mange 'korrekte' måder at gøre tingene på, og fra dit synspunkt, med genereret HTML, gør det virkelig ingen rolle. Men de fleste instruktører underviser ikke genereret HTML, ligesom de fleste programmører ikke lærer at skrive kompilere. Det lag, som vi tilføjer for at gøre vedligeholdelse af filer af HTML lettere, er overflødigt med throw-away HTML. Jeg kan også godt lide at generere ting, men jeg er i det store mindretal. Måske kan vi tale om domænespecifikke sprog engang?
Puppy 08/01/2017
Instruktører, der ikke underviser genereret HTML, underviser ikke nyttige HTML.
ItamarG3 08/02/2017
@Puppy Er det så?

HighResolutionMusic.com - Download Hi-Res Songs

1 The Chainsmokers

Beach House flac

The Chainsmokers. 2018. Writer: Andrew Taggart.
2 (G)I-DLE

POP/STARS flac

(G)I-DLE. 2018. Writer: Riot Music Team;Harloe.
3 Anne-Marie

Rewrite The Stars flac

Anne-Marie. 2018. Writer: Benj Pasek;Justin Paul.
4 Ariana Grande

​Thank U, Next flac

Ariana Grande. 2018. Writer: Crazy Mike;Scootie;Victoria Monét;Tayla Parx;TBHits;Ariana Grande.
5 Diplo

Close To Me flac

Diplo. 2018. Writer: Ellie Goulding;Savan Kotecha;Peter Svensson;Ilya;Swae Lee;Diplo.
6 BTS

Waste It On Me flac

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

Baby flac

Clean Bandit. 2018. Writer: Jack Patterson;Kamille;Jason Evigan;Matthew Knott;Marina;Luis Fonsi.
8 Imagine Dragons

Bad Liar flac

Imagine Dragons. 2018. Writer: Jorgen Odegard;Daniel Platzman;Ben McKee;Wayne Sermon;Aja Volkman;Dan Reynolds.
9 BlackPink

Kiss And Make Up flac

BlackPink. 2018. Writer: Soke;Kny Factory;Billboard;Chelcee Grimes;Teddy Park;Marc Vincent;Dua Lipa.
10 Nicki Minaj

No Candle No Light flac

Nicki Minaj. 2018. Writer: Denisia “Blu June” Andrews;Kathryn Ostenberg;Brittany "Chi" Coney;Brian Lee;TJ Routon;Tushar Apte;ZAYN;Nicki Minaj.
11 Rita Ora

Cashmere flac

Rita Ora. 2018. Writer: Sean Douglas;Lindy Robbins.
12 Backstreet Boys

Chances flac

Backstreet Boys. 2018.
13 Brooks

Limbo flac

Brooks. 2018.
14 Rita Ora

Velvet Rope flac

Rita Ora. 2018.
15 Fitz And The Tantrums

HandClap flac

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

Woman Like Me flac

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

None Of My Business flac

Cher Lloyd. 2018. Writer: ​iamBADDLUCK;Alexsej Vlasenko;Kate Morgan;Henrik Meinke;Jonas Kalisch;Jeremy Chacon.
18 Billie Eilish

When The Party's Over flac

Billie Eilish. 2018. Writer: Billie Eilish;FINNEAS.
19 Kelly Clarkson

Never Enough flac

Kelly Clarkson. 2018. Writer: Benj Pasek;Justin Paul.
20 Lil Pump

Arms Around You flac

Lil Pump. 2018. Writer: Rio Santana;Lil Pump;Edgar Barrera;Mally Mall;Jon Fx;Skrillex;Maluma;Swae Lee;XXXTENTACION.

Related questions

Hot questions

Language

Popular Tags