Better CSS

Lesson 4: Variations

In the con­text of CSS and front-end devel­op­ment, vari­ations (some­times referred to as muta­tions), are the ways in which ele­ments change slightly depend­ing on their con­text. They’re how we adapt UI to behave in dif­fer­ent ways.

In this les­son we’re going to cover:

  1. What con­sti­tutes a vari­ation.
  2. Extract­ing vari­ations from exist­ing styles.
  3. Strategies for man­aging variations.

What con­sti­tutes a vari­ation? #

A vari­ation is com­prised of three main ingredients:

Ancest­or-con­trolled vari­ations #

Now we know how to identi­fy vari­ations, let’s start look­ing at a few strategies for sens­ibly man­aging them.

Say we want to dis­play two but­tons on a page; we want them to look the same, except the second one should be red. If we decided to take an ​“ancest­or-con­trolled” approach, we might end up with some­thing like this:

See the Pen  abZGbdN by Joe For­shaw (@joeforshaw) on Code­Pen.

We have a rule­set that defines the default styles of a .button, and also a rule­set which changes the back­ground col­our of .button ele­ments when they’re nes­ted inside a .container. The ancest­or ele­ment acts as the hook that con­trols the vari­ation in ele­ments nes­ted inside it.

This meth­od is com­monly employed to man­age vari­ations at a page level. For example, adding a .home-page class to the <body> ele­ment, and using it as the ancest­or like in the above example could be used to vary ele­ments spe­cific­ally on the home page.

Advant­ages #

Lets look at some of the strengths of this strategy:

Dis­ad­vant­ages #

Although quite simple, this solu­tion has a few drawbacks:

Class-con­trolled vari­ations #

Class-con­trolled vari­ations are where we add ​“mod­i­fi­er” or ​“mutat­or” classes to our ele­ments to trig­ger the visu­al variations.

Advant­ages #

Dis­ad­vant­ages #

Extract­ing vari­ations #

This solu­tion does the job, how­ever it isn’t ideal as most of the styles are duplic­ated across the two classes. On closer inspec­tion, the only thing that var­ies between them is their background-color rules.

This is where vari­ation styles can help:

  1. First, we need to decide what our ele­ment should look like by default. Let’s say, in this scen­ario, our but­ton should be white.
  2. Double check the nam­ing of your ele­ments still makes sense. Let’s rename .white-button to a more gen­er­ic .button class, as it’s no longer the case the but­ton will always be white.
  3. Then we extract the sub­set of rules that vary into their own rule­set. We’ll grab the background-color: red; and put it in a new .red-variation class.
  4. We then hook the new vari­ation onto the ele­ments that we’d like to vary. We change the second button’s .red-button class over to the default .button class and also add the .red-variation class to hook up the variation.
  5. Next, we clean up any redund­ant styles that aren’t needed any­more. The .red-button class can now be deleted. Gen­er­ally, it’s import­ant to be care­ful here; make sure you’ve moved over all impacted ele­ments over to your vari­ation class before doing this.

See the Pen  pobLBgE by Joe For­shaw (@joeforshaw) on Code­Pen.

See the Pen  NWrYJjJ by Joe For­shaw (@joeforshaw) on Code­Pen.

Voila! We’ve taken two rule­sets, which were almost identic­al, extrac­ted what var­ied between them, and DRY-ed up our styles con­sid­er­ably. What’s more, we’ve made the but­ton styles more gen­er­ic, whilst main­tain­ing the flex­ib­il­ity to cus­tom­ise the back­ground col­our should we wish.

Lessons