Workflow: componenten

Componenten benoemen

Componenten kunnen we gaan benoemen in HTML met logische classes.

<article class="card">
  <h3>Card title</h3>
  <h4>Secondary title</h4>
  <p>Greyhound divisively hello coldly wonderfully marginally far upon excluding.</p>
  <a href="...">Action 1</a>
</article>

Met dezelfde CSS kunnen we dan componenten gaan hergebruiken.

.card {
  border: 1px solid #333;
  padding: 1rem;
  background: #FFF;
}

.card h2 {
  font-size: 2.5rem;
}
 
.card h3 {
  font-size: 2rem;
}

Een variatie wordt dan geïdentificeerd door een extra class.

<article class="card card--green">
  <h3>Card title</h3>
  <h4>Secondary title</h4>
  <p>Greyhound divisively hello coldly wonderfully marginally far upon excluding.</p>
  <a href="...">Action</a>
</article>

.card--green {
  background-color: green;
}

Als we een stapje verder gaan kunnen we ook de kinderen van een component een goeie classname geven. Let op: niet elke child moet noodzakelijk gekoppeld worden aan een component. Bvb: als je button overal hetzelfde is dan moeten we die hier niet koppelen aan het component.

<article class="card card--green">
  <h3 class="card__title">Card title</h3>
  <h4 class="card__subtitle">Secondary title</h4>
  <p>Greyhound divisively hello coldly wonderfully marginally far upon excluding.</p>
  <a href="..." class="button">Action</a>
</article>

.card {
  border: 1px solid #333;
  padding: 1rem;
  background: #FFF;
}

.card__title {
  font-size: 2.5rem;
}
 
.card__subtitle {
  font-size: 2rem;
}

Class naming convention

Een naamgevings conventie wanneer we onze classes schrijven:

• Maakt je selectors meer verstaanbaar door gewoon de naam te lezen.
• Maakt duidelijk op welke plaats je classes kunt hergebruiken in HTML.
• Het maakt de relaties duidelijk tussen classes.

BEM

Als je design componenten maakt zal je verschillende classes nodig hebben. De BEM (block, element, modifier) techniek geeft je een makkelijke manier om die te groeperen.

/* De wrapper van je component */
.my-component { 
  padding: 1rem;
} 

/* Een variatie van je component: --rounded wordt toegevoed. 
We gebruiken 2 dashes om de variant aan te geven. */
.my-component--rounded { 
  border-radius: .3rem;
} 

/* Een element van je component */
.my-component__title { 
  font-size: 2rem;
}

<article class="my-component">
  <h2 class="my-component__title">Titel</h2>
</article>

<article class="my-component my-component--rounded">
  <h2 class="my-component__title">Titel</h2>
</article>