Skip to content

Pseudo TDD

Jump to bottom
Leonardo D'Alessandro edited this page Nov 20, 2020 · 7 revisions

You've probably know about CSS pseudo classes before, but what is the "SCSS pseudo TDD methodology"? With this methodology, you organize your code in a highly scalable way and avoid many errors.

Think, reflect and act!

Let me explain with a practical example... In this case, we will use a simple vue.js template.

!! IMPORTANT !!

In order to fully understand this guide, it is assumed that you know how extend-array($ prefix, $ child ...) works.

For this reason, we recommend you to read this other guide before continue.

STEP 1: write markup

<template>
 <ul class="c-list">
  <li class="c-list__item--highlight">
    <h2 class="c-list__title">...</h2>
    <p class="c-list__author">...</p>
  </li>
 </ul>
</template>

STEP 2: write SCSS "RENDER" as a test

2.1 Write only you need

<template>
 <ul class="c-list">
  <li class="c-list__item--highlight">
    <h2 class="c-list__title">...</h2>
    <p class="c-list__author">...</p>
  </li>
 </ul>
</template>

<style>
.c-list{
  .c-list__item--highlight{
    .c-list__title{}
    .c-list__author{}
  }
}
</style>

2.2 Check if you can simplify

<template>
 <ul class="c-list">
  <li class="c-list__item--highlight">
    <h2 class="o-title">...</h2>
    <p class="c-list__author">...</p>
  </li>
 </ul>
</template>

<style>
.c-list{
  .c-list__item--highlight{
    /*.c-list__title{} => to remove... */
    .c-list__author{}
  }
}
</style>

2.3 Include extend-array() mixin

<template>
 <ul class="c-list">
  <li class="c-list__item--highlight">
    <h2 class="o-title">...</h2>
    <p class="c-list__author">...</p>
  </li>
 </ul>
</template>

<style>
.c-list{
  @include extend-array()

  .c-list__item--highlight{
    @include extend-array()

    .c-list__author{
      @include extend-array()
    }
  }
}
</style>

2.4 Define categories to group styles

For example, in this case, we will use only these two large styles group but, remember, you have maximum flexibility!!

  1. CATEGORY 1 => layout => height, width, position, display, margin, padding, flex, grid and all styles used for your layout.
  2. CATEGORY 2 => skin => color, background, font-size, border, line-height, cursor and all styles used for apparance effects.

So, hypothetically, we could have this situation:

  • .c-list => layout and skin
  • .c-list__item--highlight => only skin
  • .c-list__author => layout and skin

It means that we have assigned to each element/class 1 or more style group/category.

2.5 Define placeholder names

<template>
 <ul class="c-list">
  <li class="c-list__item--highlight">
    <h2 class="o-title">...</h2>
    <p class="c-list__author">...</p>
  </li>
 </ul>
</template>

<style>
.c-list{
  @include extend-array(”list-” , ”layout” , “skin”)

  .c-list__item--highlight{
    @include extend-array(”list-item-” , “skin”)

    .c-list__author{
      @include extend-array( ”list-author” , ”layout” , “skin”)
    }
  }
}
</style>

STEP 3: write your styles

<template>
 <ul class="c-list">
  <li class="c-list__item--highlight">
    <h2 class="o-title">...</h2>
    <p class="c-list__author">...</p>
  </li>
 </ul>
</template>

<style>
/* LIST BLOCK STYLES */
%list-layout{
  width: 200px;
}
%list-skin{
  color: #fff;
}

/* LIST ITEM ELEMENT STYLES */
%list-item-skin{
  cursor: pointer;
}

/* LIST AUTHOR ELEMENT STYLES */
%list-author-layout{
  padding: 20px;
}
%list-author-skin{
  font-size: 14px;
}

/* RENDER */
.c-list{
  @include extend-array(”list-” , ”layout” , “skin”)

  .c-list__item--highlight{
    @include extend-array(”list-item-” , “skin”)

    .c-list__author{
      @include extend-array( ”list-author” , ”layout” , “skin”)
    }
  }
}
</style>
Clone this wiki locally