Namngivning i kod

Namnge komponenter/element med namnkonventionen SUIT CSS som bas. I dokumentationen står hur klassnamnen ska anges, nedan följer en kort sammanfattning och beskrivning av hur SUIT CSS-metodiken används tillsammans med JavaScript:

Användning av SUIT CSS

Underelement eller delar som hör ihop med komponenten får sina namn med huvudklassens namn som bas.

.MyComponent {}
.MyComponent.is-animating {}
.MyComponent--modifier {}

.MyComponent-part {}
.MyComponent-anotherPart {}

En komponents delar namnges bara en nivå neråt, oavsett om de i DOM:en inbördes kan ligga djupare nästlat i varandra:

/* Gör såhär */
.MainNav
  .MainNav-list
  .MainNav-listItem
  .MainNav-link

/* Gör INTE så här */
.MainNav
  .MainNav-list
  .MainNav-list-listItem
  .MainNav-list-listItem-link

Namngivning för anrop i JavaScript

Använd prefixet .js- vid namngivning för att skilja styling ifrån JavaScript-funktioner. Exempel:

I detta fall ges klassen .Thumbnail styling medan vi binder JS till klassen .js-openGallery. Genom att aldrig styla .js--prefixade klasser eller binda JS till klasser med styling har vi minimerat risken att gränssnittet går sönder vid framtida ändringar.

Sätta state med SUIT CSS och JavaScript

Med hjälp av JavaScript-klasserna kan man enkelt nu sätta state-klasser för att tydliggöra status och t ex skapa CSS3-animationer.

Exempel:

var openGalleryButtons = document.getElementsByClassName('js-openGallery'); openGalleryButtons.forEach(function(element) { var img = element.getElementsByTagName('img')[0]; element.onclick = function() { img.classList.add('is-fullSize'); return false; }; });

ger: