JavaScript-hooks i uppmärkning

Av APSIS

2016-02-08

Lägg till ”js-” till alla dina JavaScript-hooks, oavsett om det är en klass eller ett ID.

APSIS Blog: JavaScript hooks for everyone!

 

Att döpa något anses vara en av endast två svåra moment inom datorvetenskapen. Ibland kan något så enkelt som selektorer orsaka heta debatter bland engagerade utvecklare. Ska selektorer vara semantiska? Är det klokt att gruppera dem visuellt i uppmärkningen? Ska de vara läsbara för människor eller endast kunna tydas av maskiner?

Många har åsikter om detta, och jag borde verkligen bidra med mina egna. Istället tänkte jag dock ta upp en mer specifik, men ändå relaterad, fråga.

En av mina strikta regler är att aldrig använda ID för styling (det grafiska utseendet). De är helt enkelt för kraftfulla för att kunna bevaras. Å andra sidan är ID perfekta selektorer för den som vill styra ett element med JavaScript. De är otroligt specifika och snabba. Faktum är att de är skapade för just detta syfte. Ett ID kan dock bara användas en gång, även om man ibland behöver märka mer än ett element. I de flesta fall används klasser, och ofta väljer man en klass som redan används på elementet i fråga, t.ex. ”Button”. Även om kommandot ”document.querySelectorAll ('.Button')” garanterat omfattar alla knappelement på sidan medför det också en del merjobb och frustration. Vad du gör är nämligen att ge klassen ytterligare en arbetsuppgift, utöver att bestämma utseendet. Därmed bryter du mot principen om att hålla olika aspekter åtskilda, och det är en dålig idé (oftast i alla fall).

Min lösning, som har inspirerats av den briljante Harry Roberts, är att alltid använda separata klasser för JavaScript-hooks och alltid lägga till prefixet ”js-”. För att styra knappen ovan skulle jag alltså ge den ytterligare en klass i stil med en js-knapp. På så sätt är det enkelt för den som läser min uppmärkning att skilja stylingklasser från klasser som styrs av script. Och eftersom konsekvens och standard är viktiga faktorer när det gäller att skapa en kodbas som är välfungerande över tid ser jag alltid till att använda samma konvention, även om jag använder ID.

APSIS Hampus Persson Front End Developer

Av Hampus Persson, APSIS Front End Developer.

Vill du se hur vårt utvecklingsteam jobbar? Filmen nedan visar hur de hanterar stora, omvälvande idéer och omvandlar dem till färdiga funktioner, produkter och kodsträngar.