De 14 bästa metoderna för CSS för nybörjare

När du börjar att arbeta med webbdesign så är CSS en viktig del. Det krävs för att få allt att fungera korrekt och för att allt ska se ut som du vill. CSS är en förkortning för Cascading Style Sheets, och gör att du kan styla HTML-element på vilket sätt som helst.

Även om du kan experimentera med CSS på många olika sätt – oftast inbundet – så finns det dock ett bättre sätt att göra detta på. Och det faller helt i linje med en rad bästa metoder som du bör följa för att se till att din kod är funktionell, utan onödig massa och välorganiserad.

I dag så lyfter vi fram de 14 bästa CSS-metoderna för nybörjare. Även erfarna proffs bör dock fräscha upp grunderna ibland.

Kolla in vår videoguide med bästa de bästa metoderna för CSS för nybörjare

1. Organisera formatmallarna

När du tillämpar bästa praxis för CSS så är det första du ska göra att organisera dina formatmallar. Hur du går tillväga beror på ditt projekt, men som en allmän regel så bör du exempelvis följa dessa organiseringsprinciper:

Var konsekvent

Oavsett hur du väljer att organisera din CSS, se till att dina val är konsekventa i hela formatmallen och på hela webbplatsen.

Om du håller allt konsekvent så kommer det att bli lättare att hålla reda på ditt arbete. Detta gäller allt ifrån namngivning av klasser till radindragningar och kommentarsstrukturer. Dessutom så säkerställer detta att det är huvudvärkfritt att göra ändringar i efterhand.

Använd radbrytningar generöst

CSS fungerar visserligen även om den är rörigt skriven. Det är dock bättre för dig och för alla andra utvecklare som arbetar med din kod om du använder många radbrytningar för att hålla varje kodstycke separat och läsbart.

Vanligtvis så är det bäst att placera varje egenskap och värdepar på en ny rad.

Skapa nya avsnitt där det är meningsfullt

Återigen, hur du ställer in dina formatmallar beror till stor del på vilken typ av webbplats som du arbetar med. Men som en allmän regel så är det exempelvis en bra idé att skapa sektioner för stilar på det sätt som de kommer att användas. Alltså en sektion för textstilar, en sektion för listor och kolumner, en sektion för navigering och länkar och så vidare. Du kan även skapa sektioner för specifika sidor som kan ha en annan stil än resten, exempelvis butiken eller FAQ.

Kommentera din kod

Även om det bara är du som någonsin kommer att se din CSS så är det fortfarande en bra idé att vara noggrann med dina kommentarer. Kommentarerna ser ut som följande:

/* Så här ser en standardkommentar i CSS ut */

Detta gör det lättare för dig att förstå vad varje avsnitt står i relation till vid en överblick utan att behöva gå igenom varje rad senare.

Kommentarer kan hjälpa dig att definiera avsnitt. Du kan dock även använda dem för att ge en inblick i de beslut som du har fattat – särskilt om du tror att du kanske glömmer detta senare.

Använd separata formatmallar för större projekt

Detta gäller inte alla webbplatser. Om du har en stor webbplats med behov av mycket specifik CSS så är det dock en bra idé att använda flera formatmallar. Ingen – inklusive du själv – ska behöva scrolla superlänge för att hitta den enda kodrad som du behöver.

Undvik besväret och skapa separata formatmallar för olika delar av webbplatsen – särskilt om de kommer att ha helt olika stilar.

Du kanske exempelvis vill skapa ett formatmallblad för globala stilar och ett annat för din webbutik med särskilda stilar för produktbeskrivningar, rubriker eller prissättning.

2. Inbunden CSS vs. extern CSS vs. intern CSS

Det finns tre olika typer av CSS som du kan behöva hantera när du bygger en webbplats och justerar dess styling. Låt oss prata lite om vad varje typ är och gör. Vi ska sedan diskutera vilken som du faktiskt bör använda i dina projekt.

Typerna av CSS

Inbunden CSS. Detta gör det möjligt för dig att styla specifika HTML-element,
Extern CSS. Detta innebär att man använder en fil, exempelvis ett formatmallblad, för att skapa en stil för webbplatsen som helhet.
Intern CSS. Här kan du styla en hel sida snarare än specifika element.

Många utvecklare rekommenderar att man undviker inbunden CSS, eftersom den vanligtvis inte kan cachelagras. Det rekommenderas även att man undviker att dela upp CSS på flera filer. Detta bör åtminstone användas sparsamt.

Enda anledningen till detta är möjligtvis om du skulle använda lite styling på en enda sektion, textbit eller område på en enda sida på din webbplats. Det är troligen den enda situation där inbunden CSS är en fungerande lösning.

I övrigt så är det bättre att använda extern CSS eller intern CSS beroende på dina behov, eftersom det sparar tid och arbete. Bestäm stilarna en gång och använd dem på hela webbplatsen. Boom – klart.

3. Minimera din formatmall

En annan av de bästa CSS-metoderna är att minimera dina formatmallar. Det finns många tillgängliga minifieringsverktyg för att snabba upp laddningstiderna för dina formatmallar.

4. Använd en preprocessor

Med en preprocessor som Sass/SCSS så kan du använda variabler och funktioner, organisera din CSS bättre och spara tid. De fungerar genom att du kan skapa CSS från preprocessorsyntaxen.

Vad detta innebär är att preprocessorn är som en ”CSS +”där den inkluderar ett par funktioner som vanligtvis inte finns i CSS. Tillägget av dessa funktioner gör oftast att den utgående CSS: en blir mer läsbar och lättare att navigera i.

Du behöver en CSS-kompilator på din webbplats server för att kunna använda preprocessorer. Några av de mest populära preprocessorerna är Sass, LESS och Stylus.

5. Överväg ett CSS-ramverk

CSS-ramverk kan vara användbara i vissa fall men kan även vara onödiga för många. Särskilt om din webbplats är lite mindre.

Ramverk kan göra det enkelt att snabbt distribuera stora projekt och även undvika buggar. De skapar dessutom fördelen av standardisering, vilket är viktigt när flera personer arbetar med ett projekt samtidigt.

Alla kommer att använda samma namngivningsrutiner, samma layoutalternativ, samma kommentarsrutiner och så vidare.

Å andra sidan så resulterar de även i generiskt utformade webbplatser och en stor del av koden kan bli oanvänd.

Det är troligt att du har stött på CSS-ramverk tidigare. Bootstrap och Foundation är två av de mest populära exemplen. Andra ramverk är Tailwind CSS och Bulma.

6. Börja med en återställning

En annan sak att pröva är att börja ditt utvecklingsarbete med en CSS-nollställning. Genom att använda något som normalize.css så kan man se till att alla webbläsare återger sidelement på ett konsekvent sätt. Detta sker samtidigt som man följer de mest aktuella standarderna för att minimera webbläsar-inkonsekvenser.

Denna återställning är faktiskt en liten CSS-fil som du laddar upp till din webbplats. Som ett resultat så läggs det till en större nivå av konsekvens mellan olika webbläsare när det gäller formgivningen av HTML-element. Detta fungerar som ett uppdaterat sätt att genomföra en CSS-återställning.

7. Klasser kontra ID: er

Nästa sak som du bör uppmärksamma när du följer de bästa CSS-metoderna är hur du behandlar klasser och ID: er. Om du inte är bekant med dem så ska vi definiera dem kortfattat:

Klass. Klassväljaren fungerar genom att välja ett element med ett klassattribut. Det som står i klassattributet är det som avgör hur HTML-elementet väljs. Det ser ut så här i koden: .classname
ID. Detta fungerar genom att man väljer ett element med ett ID-attribut. ID-attributet måste vara detsamma som selektorns värde för att det ska fungera. Du kan se ett ID i CSS genom den här symbolen: #.

Ett ID används för att välja ett enda element medan en klass används för att välja flera element. Du använder ett ID för att tillämpa en stil på ett enda HTML-element. Du använder en klass för att tillämpa en stil på mer än ett HTML-element. Genom att exempelvis följa denna allmänna regel så kan du hålla din kod ren och snygg och minska förekomsten av onödig eller dubblerad kod.

I likhet med vår diskussion om inbunden respektive extern CSS ovan så använder du ett ID för att tillämpa en stil på ett enda element. I princip så är ID: er avsedda att användas för att styla undantagen på sidan. De används inte för övergripande stilar som skulle gälla för hela sidan eller webbplatsen.

8. Undvik redundans

En annan av de bästa CSS-metoderna att följa är att undvika redundans närhelst som du kan. Här är några allmänna tips som du kan följa för att tillämpa denna praxis i ditt arbetsflöde:

Använd DRY-metoden

DRY-metoden står för ”Don’t Repeat Yourself” (upprepa inte dig själv) och är i princip idén om att du aldrig ska upprepa kod i CSS. Det är i bästa fall slöseri med tid och repetitivt för dig själv att manuellt mata in dessa stilar om och om igen. I värsta fall så kan det aktivt sakta ner din webbplats.

Det är bra att se över din kod för att ta bort överflödigheter. Det finns exempelvis inget behov av taggar för att identifiera teckensnittsstorlek två gånger i samma avsnitt. Om du tar bort upprepningarna så kommer din kod att läsas bättre och även prestera bättre.

Använd CSS-kortapparat

CSS-kortapparat är ett utmärkt sätt att minska det utrymme som din kod tar upp samtidigt som den fortfarande fungerar som den ska. Du kan kombinera flera stilar inom en enda rad om det är vettigt att göra detta. Om du exempelvis ställer in stilarna för en viss div så kan du ange marginal, utfyllnad, teckensnitt, teckensnittsstorlek och färg på en enda rad.

Lägg till flera klasser till dina element

I förekommande fall så kan du även undvika redundans genom att lägga till mer än en klass till ett element. Innehållet på din sida kanske exempelvis redan flyter till vänster tack vare klassen .left, men du vill placera en kolumn på sidan till höger. Då kan du lägga till den till elementet för att undvika förvirring och för att tala om för CSS vilket element som du vill att det ska lägga till höger utöver den vanliga vänstervridningen.

En bra sak är att du kan lägga till så många klasser som du vill till ett element så länge som de är separerade med ett mellanslag.

Kombinera element när det är möjligt

Kombinera elementen för att spara utrymme och tid i stället för att lista dem ett och ett. Ofta har element inom ett enda formatmall samma (eller liknande) stilar. Det finns ingen anledning till att räkna upp typsnitt, färg och justering för varje textelement på sidan om alla har samma stil. Kombinera dem i stället till en enda rad på det här sättet:

h1, h2, h3, p {
font-family: arial,
color: #00000
}

Undvik onödiga extra selektorer

Ibland så blir koden lite rörig när du arbetar med att färdigställa webbplatsens design. Det är därför viktigt att gå tillbaka och ta bort onödiga selektorer i efterhand. Du bör även hålla utkik efter alltför komplexa selektorer. Om du exempelvis skulle stilisera listor på din webbplats så behöver du inte använda selektorer som ”body” eller ”container” eller något liknande. Det räcker med.classname li { .

9. Hur du importerar teckensnitt på rätt sätt

Att importera och använda teckensnitt på rätt sätt är en annan bra metod för att se till att din CSS är tydlig, kortfattad och optimerad.

Användning av @font-face för att importera teckensnitt

Du kan lägga till nästan vilket typsnitt som helst på din webbplats. Du måste dock följa en särskild procedur för att se till att det fungerar korrekt.

Ladda ner typsnittet som du vill använda. Det finns många ställen där du kan hitta teckensnitt, bland annat Google och Adobe. Se till att du laddar ner TrueType Font-filen (.ttf) för ditt valda typsnitt.
Ladda upp det anpassade typsnittet som du vill använda till Webfont Generator som tillhandahålls av Font Squirrel. Ladda ner webbteckensnittet när det är genererat. Det bör innehålla flera filer, inklusive flera olika typsnittsfiler med tillägg som .ttf, .woff, .woff2 och .eot. Det ska även inkluderas en CSS-fil.
Ladda upp webbtypsatsen till din webbplats med hjälp av FTP. De specifika instruktionerna för detta varierar beroende på din hosting-leverantör. Du kan dock generellt komma åt webbplatsens filer med hjälp av en FTP-klient eller filhanteraren i din hosting-leverantörs administratörsgränssnitt, exempelvis cPanel.
Uppdatera CSS-filen med hjälp av en textredigerare. DU kan använda vilken HTML-textredigerare som du vill, exempelvis NotePad eller Sublime. En käll-webbadress kommer att vara listad i den här filen. Du måste uppdatera den så att den återspeglar var Web Font Kit finns på din webbserver. Kopiera filvägen för platserna där varje typsnittsfil lagras hos din hosting-leverantör till den här filen enligt följande:

@font-face {
font-family: "FontName";
src: url("https://sitename.com/css/fonts/FontName.eot");
src: url("https://sitename.com/css/fonts/FontName.woff") format("woff"),
url("https://sitename.com/css/fonts/FontName.otf") format("opentype"),
url("https://sitename.com/css/fonts/FontName.svg#filename") format("svg");
}

Du kan sedan använda dina nya typsnitt genom att lägga till dem i CSS-filerna på din webbplats med taggen font-family.

För att förbättra webbplatsens prestanda och för att förhindra konstiga omjusteringar av webbplatsens layout när den laddas så kan du ladda teckensnitt i förväg. Om du laddar typsnitt i förväg och laddar WOFF2-typsnitt (eller den minsta typsnittsstorleken) först så kan du förbättra prestandan dramatiskt. Du gör detta genom att lägga till en kodrad i <head>-taggen. Better Web Type ger ett kortfattat exempel:

<link rel="preload" as="font" href="/assets/fonts/3A1C32_0_0.woff2" type="font/woff2" crossorigin="crossorigin">

En annan sak som du kan göra är att begränsa teckenuppsättningen för dina anpassade typsnitt. Om du endast använder några få tecken från ett typsnitt (exempelvis för en rubrik eller en logotyp) så behöver du inte kalla in hela teckenuppsättningen. Då räcker det med några få som du faktiskt behöver. Om du bara vill begära tecknen ”Hello” gör du på följande sätt:

<link href="http://fonts.googleapis.com/css?family=Open+Sans&text=Hello" rel="stylesheet">

Självhostade teckensnitt när det är möjligt

Den process som beskrivs ovan gäller för teckensnitt som du själv hostar. Det är dock viktigt att upprepa att detta är det bästa tillvägagångssättet. Det snabbar upp laddningstiden avsevärt och innebär att du inte är beroende av hastigheten på en annan webbplats för att slutföra laddningen av din egen.

Var försiktig med varianter av teckensnitt

Typsnittsvariationer kan vara supernyttiga för att lägga till roliga stilar på din webbplats. Om de missbrukas så kan de dock förstöra din webbplats.

Om du tilldelar mer än en stil under typsnitts-variations-inställningarna så är det troligt att de kommer att överlappa varandra och att den ena kommer att åsidosätta den andra. Det är mycket bättre att hålla det enkelt och använda typsnittsegenskaper i stället, vilket illustreras här:

.bold {
font-weight: bold;
}
.italic {
font-style: italic;
}

Använd ett reservtypsnitt

Även om du gör dig besväret att lägga till ett anpassat typsnitt på din webbplats och använda det via CSS, så kommer det ändå inte att fungera 100 % av tiden. Särskilt inte när det används av någon som har en föråldrad webbläsare. Men du vill ändå att dessa besökare ska få en trevlig upplevelse när de surfar.

För att tillgodose detta så är det viktigt att ställa in ett reservtypsnitt. Detta kan användas om inget av dina andra typsnitt kan användas. För att göra detta så listar du helt enkelt reservtypsnittet efter ditt föredragna typsnitt när du tilldelar en typsnittsfamilj. På så sätt kommer CSS att kalla in det föredragna typsnittet först, sedan det andra typsnittet, sedan det tredje och så vidare.

Enligt W3Schools så finns det fem huvudkategorier för typsnittsfamiljer. Nedan följer en lista över dessa familjer med populära reservtypsnitt som passar in i varje sammanhang.

Serif: Times New Roman, Georgia, Garamond
Sans-serif: Arial, Tahoma, Helvetica
Monospace: Courier New
Kursiv stil: Brush Script MT
Fantasy: Copperplate, Papyrus

10. Gör CSS tillgängligt

Alla borde göra sina webbplatser tillgängliga. Detta gäller även för din inställning till CSS. Ditt mål bör vara att göra din webbplats användbar för så många människor som möjligt. Införandet av tillgänglighetsåtgärder är ett fantastiskt sätt att uppnå detta på.

Du kan göra din CSS tillgänglig på flera olika sätt:

Lägg till färgvariation på länkar för att få dem att sticka ut.
Gör att popup-fönster kan avvisas genom att trycka på ESC-tangenten. De som använder skärmläsare eller förstoring kan exempelvis ofta inte se ”X” på skärmen för att stänga av en popup-fönsterruta. Det är med andra ord viktigt att de kan stängas av med en tangenttryckning.
Vissa enheter visar inte ens popup-fönster överhuvudtaget. Se till att all viktig information förmedlas på annat håll.
Hover-element (t.ex. verktygstips) bör utlösas av Tab-tangenten och av en mus som är på plats.
Ta inte bort konturer. Webbläsare visar automatiskt en kontur runt element som tangentbordet för närvarande är fokuserat på. Du kan inaktivera detta med outline:none, men det bör du verkligen inte göra. Detta är nämligen ovärderligt för dem som använder skärmläsare eller som har nedsatt syn och behöver ytterligare markeringar/fokuspunkter för att navigera.
Förbättra fokusindikatorn. Som vi nämnde ovan så är konturer runt markerade element viktiga för navigering för många människor. Standardkonturen är dock ofta knappt synlig. Du kan ändra detta så att den blir mer synlig genom att använda :focus för att ställa in en stil som drar mer uppmärksamhet till det som för närvarande är i fokus. Du kan göra något liknande med :hover för att förstärka omslagseffekter. Ett bra exempel på hur man ändrar :focus i praktiken kommer från en uppsättning riktlinjer för tillgänglighet från University of Washington:

a {
color: black;
background-color: white;
text-decoration: underline
}
a:focus, a:hover {
color: white;
background-color: black;
text-decoration: none
}

Det här kodutdraget gör att länkar visas som svart text på vit bakgrund men övergår till vit text på en bakgrund när de placeras under tangentbordsfokus (när användaren tabbar till elementet). Samma effekt uppstår även vid hovrande.

11. Implementera namngivningskonventioner

Det kanske verkar oviktigt för tillfället, men dina val för namngivande av saker i CSS kan ha bestående effekter. Det kan aktivt kosta dig tid och pengar i framtiden om du gör det på fel sätt. Innan du ens börjar att skriva CSS så bör du bestämma dig för en rad namnkonventioner och hålla dig till dem.

Detta kommer att spara mycket tid vid felsökning senare. Det blir nämligen mindre sannolikt att du hänvisar till fel element när du skriver din kod. Enligt FreeCodeCamp så är ett bra tillvägagångssätt att hålla sig till standardformateringen för CSS-namn, dvs. font-weight vs fontWeight.

Använd BEM-namnkonvention

Ett bra sätt att hålla namnen konsekventa är att använda BEM-namnkonventionen. Hela poängen med BEM är att dela upp användargränssnittet i komponenter som du kan återanvända om och om igen.

BEM står för Block, Element och Modifier. Men låt oss dela upp vad det faktiskt betyder.

Block: Ett block kan vara en del av designen på din webbplats, exempelvis en meny, rubrik, sidfot eller kolumn. Dina block bör ha namn som .main-nav eller .footer.
Element. Element beskriver de delar som ingår i varje block. Tänk på saker som typsnitt, färger, knappar, listor eller länkar. När du använder BEM-namnkonventionerna så identifieras element genom att det placeras två understrykningar före elementets namn. Om vi vill tala om typsnittet som används i rubriken på din webbplats så skulle det se ut så här i CSS med BEM-namnkonvention: .header__font
Modifieraren. Den sista pusselbiten i BEM-pusslet är modifieringen. Modifierare är sättet att fastställa stilen för elementet inom blocket. Det kan exempelvis handla om namn, vikt och storlek på typsnitt, färgvärden och värden för anpassning. Om du fortsätter att arbeta med exemplet ovan och vill ställa in typsnittsfärgen i rubriken, så skulle du skriva detta så här med elementet och modifieraren åtskilda med två bindestreck: .header__font-red

Om du följer denna namnkonvention – eller något annat som ditt team bestämmer sig för – kan det bli mycket trevligare att redigera och felsöka senare.

12. Undvik taggen !Important

En annan bästa praxis att införa i din CSS-arbetsrutin är att undvika överanvändning av !important-taggen så mycket som möjligt.

Även om den kan åtgärda problem så leder användningen av den ofta till att man förlitar sig på den som en krycka. Som ett resultat så kan det bli en röra av !important-taggar i hela koden som till slut kan förstöra din webbplats.

Vad detta egentligen handlar om är specificitet. Om en selektor är mycket specifik så kommer din webbläsare att avgöra att den är viktigare än om den är mindre specifik. Taggen !important kan användas för att identifiera egenskaper som är viktigare än andra.

Detta kan bli knepigt eftersom du ofta måste använda flera !important-taggar – var och en för att åsidosätta en tidigare tagg i specifika scenarier. Om du gör detta för ofta så kan detta leda till att din webbplats går sönder eller att stilar laddas felaktigt. Oftast så används den här taggen som en kortsiktig lösning. Den blir dock ofta permanent och kan sedan orsaka problem senare när det är dags att felsöka.

Det finns bara ett fåtal tillfällen när användningen av !important-taggen anses allmänt acceptabel. Det är exempelvis när slutanvändaren kan åsidosätta stilar för användning med skärmläsare och andra hjälpmedel för tillgänglighet. Det är även användbart när man har att göra med verktygsklasser.

13. Använd Flexbox

Du kan även få ut mer av Flexbox när du försöker att införa bästa praxis för CSS i ditt arbetsflöde. Flexbox är ett flexibelt sätt att skapa en webblayout och anpassa element på sidan, i stället för att använda det traditionella alternativet float.

Enligt CSS-Tricks så är Flexbox en flexibel boxmodul. Det är ett alternativt sätt att strukturera din CSS genom att uppmärksamma hur dina layouter är inriktade och fördelade i en container. Bäst av allt är att storleken på själva containern inte ens behöver vara känd. Egenskaperna i containern kommer att ”flexa” med den förändrade containerstorleken. Detta är ett utmärkt sätt att anpassa sig till mobila enheter.

En annan viktig skillnad är att Flexbox är ”riktningsoberoende”. Detta innebär exempelvis att dess layouter inte är strukturerade vertikalt eller horisontellt. Som ett resultat så blir detta ett bättre val för att utforma komplicerade webbplatser och applikationer som måste ta hänsyn till många ändringar av skärmens orientering. Standard CSS-layouter är blockbaserade och flexbox-layouter bygger på ”flex-flow”. Återigen så erbjuder CSS-Tricks en kortfattad ritning som illustrerar detta koncept väl:

Hur flexbox-layouter fungerar enligt CSS-Tricks

Elementen i flexboxen är placerade över huvud- och tväraxeln, där varje element och egenskap är utformade för att flexa och flöda baserat på flex-containerns storlek.

14. WordPress-tips: Ändra inte temafiler direkt

Den sista av de bästa CSS-metoderna som vi ska diskutera här i dag gäller specifikt för WordPress-användare. Det är aldrig en bra idé att ändra temats filer direkt. Varje uppdatering av webbplatsen kan radera ut dessa ändringar eller förstöra din webbplats. Det är helt enkelt inte värt risken.

Du kan istället använda alternativet Ytterligare CSS i Temaanpassaren för att göra de ändringar som du vill göra. Kom dock ihåg att detta injicerar en inbunden CSS och placerar den direkt i rubriken.

Om du endast vill göra en eller två ändringar så kan detta vara ett bra alternativ. Allt som du placerar i fältet Additional CSS kommer dock att finnas kvar även om du gör en temauppdatering, en webbplatsuppdatering eller till och med om du byter tema.

Om det behövs mer robusta CSS-ändringar så är det bättre att lägga till dessa från en egen CSS-formatmall eller genom att använda ett undertema där du ändrar filen style.css för undertemat direkt. Denna metod är även uppdateringssäker.

Sammanfattning

Att börja skapa en användbar och korrekt CSS kan kännas som mycket för en nybörjare. Om du tar dig tid att utbilda dig i bästa praxis så kan du dock spara mycket tid, arbete och huvudvärk senare.

Vi hoppas att den här samlingen av de bästa metoderna kommer att hjälpa dig in på rätt väg mot att bygga funktionella, användbara och tillgängliga webbplatser i många år framöver. Lycka till!

Salman Ravoof

Salman Ravoof är en självlärd webbutvecklare, författare, skapare och en stor beundrare av fri och öppen källkod (FOSS). Förutom teknik är han intresserad av vetenskap, filosofi, fotografi, konst, katter och mat. Lär dig mer om honom på hans hemsida och kontakta Salman på X.