Motives add reasoning to CSS, they help express intent.

The goal of a motive is to off-load information from our brain to the code itself. Externalizing information not only frees our mind, but makes collaboration easier.

Motives capture rationale in the moment a declaration is declared. This rationale helps explain the reason why a property exists, or justify its value.

Motives remove investing time & energy into understanding CSS, whilst indicating what impact changing / removing a declaration will have.

There are 6 kinds of motive:


Used to override inline CSS (either inlined in HTML or set via JavaScript).

<p class="status" style="display:none">
p.status {
  display<?overrule>: block;


Used to override 3rd party CSS.

For example the background color of a bootstrap button.

<button type="button" class="btn btn-default">
button.btn-default {
  background-color<?overthrow>: honeydew;

If the dependency (in this case bootstrap) is dropped we can confidently remove its overthrow rules.


Used to override user agent / browser default styles.

ul.contactList {
  margin-left<?veto>: 0;
  padding-left<?veto>: 0;


Used to denote fallback properties used for cross browser compatibility.

nav {
  background<?fallback>: grey;
  background: linear-gradient(white, black);


Used to justify the usage of a property, or reasoning behind its value.

The box sizing of section.newsFeed only exists to swallow its padding:

section.newsFeed {
  padding<immutable>: 20px;
  box-sizing<?because: swallowPadding)>: border-box;

main.content should be vertically aligned with nav:

nav {
  padding-left : 20px;

main.content {
    margin-left<?because: 'align content with nav'>: 20px;

The because motive is powerful since it helps depict and maintain dependencies between properties and or elements.

For example if the padding of is removed we can remove box-sizing. Likewise if the left padding of nav changes we know to change the left margin of main.content.


Used to denote temporary styles, usually related to a bug or feature that’s in progress.

The patch motive accepts a pointer to where more information is located. For example a JIRA ticket ID:

a.signIn {
  color<?patch: 'ENG-123456'>: cadetblue;

When the ticket ENG-123456 is resolved this declaration can safely be removed.



There are times when a type or modifier can be using in conjunction with a motive. In these cases notions are separated with a comma:

ul.contactList {
  box-sizing<immutable, ?because:swallowPadding>;

results matching ""

    No results matching ""