Skip to content

Refactoring

Marie-Louise edited this page Dec 7, 2018 · 5 revisions

To refactor mean to change the way that the code is written with out changing it's how it behaves or what is is supposed to do.

Class composition

This is when re-used classes are put together in order to achieve a desired behaviour. Here's an example from ticket #2713

The existing classes are as follows:

.promo__list 

.link--list  

.link--standalone

This is a custom class that I've added during the refactoring process.

.link--lg {
  border-top: solid 1px $ruleAndSeparatorColour; 
  font-size: 20px;
  font-weight: bold;
  line-height: 1.81818;
  padding: 10px 0; // suggestion: one class
  text-align: left;
  }

So in future, I could separate each property into classes in order to work more efficiently. So for example:

.border_signature {
border-top: solid 1px $ruleAndSeparatorColour; 
}

or

.home_link_font-size {
font-size: 20px;
}

or

.home_padding {
padding: 10px 0; 
}

There are libraries which are specifically for class composition such as Tachyons

Clone this wiki locally