Mindful CSS with PostCSS

The world is governed by the duality of nature; good and bad, light and dark. Competing forces exist in nature and within all of us, and so it does in PostCSS. PostCSS is gaining ground and well deserves the new fan following. It’s definitely one of the best things that has happened to CSS and its community. But looking at the ease at which things can be done with PostCSS leads me to believe that poor, under-optimized CSS can be written with the same ease. Lets look at some examples where usage of PostCSS is this beautiful embodiment of the opposites.

Color shorthand + Color collision detector

There are several fantastic color shorthand plugins offered by folks contributing to PostCSS. Lets take a look at one of them: postcss-color-function

Input

.test-box1 {
  background-color: color(hsla(125, 50%, 50%, .4) saturation(+ 10%) w(- 20%));
}

.test-box2 {
     background-color: color(hsla(125, 50%, 50%, 0.35) saturation(+ 14%) w(- 20%));
}

Output

.test-box1 {
  background-color: rgba(0, 204, 17, 0.4);
}

.test-box2 {
  background-color: rgba(0, 209, 17, 0.35);
}

The real output

Perceivable difference between colors, sure if you wink hard enough; necessary color variations, no. These color shorthands make it easy to create several variations of these colors and litter them throughout your application. If these colors are allowed to be created anywhere in the application in the CSS, we could result with tons of color collisions, redundant lines of CSS.

The plugin that helps you catch this problem: colorguard

css-colorguard: /Users/archanas/Documents/postCSS-plugin/src/sample1.css:15:3: rgba(0, 209, 17, 0.35) collides with rgba(0, 204, 17, 0.4) (4:16)

Oh yes, there she is: catching all color collisions.

What can one do? Proactively, we can use these color functions on specific files that define your brand. Use the selectors or variables from this color file for your brand, throughout the application. Yes, that is a styleguide.

colors.css

.bg-green {
  background-color: color(hsla(125, 50%, 50%, .4) saturation(+ 10%) w(- 20%));
}

(or)

colors.sass
$bgcolor-green: color(hsla(125, 50%, 50%, .4) saturation(+ 10%) w(- 20%));

(or)

boxes.css

.green-box {
  background-color: color(hsla(125, 50%, 50%, .4) saturation(+ 10%) w(- 20%));
}

PostCSS has this phenomenal plugin mdcss to help you create your styleguide.

General shorthands + CSS complexity

I created the flexbox plugin for PostCSS in December. This plugin makes it super easy to create a wide variety of layouts with just a few lines. Lets see an example.

Input CSS

.section-1 {
  box: horizontal middle center wrap;
  width: 200px;
  height: 300px;
  background-color: yellow;
}

.section-2 {
  box: horizontal middle center wrap;
  width: 130px;
  height: 40px;
}

.section-3 {
  box: horizontal top center;
}

Output CSS

.section-1 {
  width: 200px;
  height: 300px;
  background-color: yellow;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

.section-2 {
  width: 130px;
  height: 40px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

.section-3 {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: center;
}

It does initially appear like a few lines of CSS, but when PostCSS converts them to the final CSS, there are tons more lines of CSS generated for you. Look at the amount of repetition. What optimizations one can do! Well, its like a ripe mango hanging at arm’s length: reusable selectors. The mindful thing to do is create reusable selectors for these options using the shorthands.

Example

.horizontal-box.align-absolute-center {
 box: horizontal center middle wrap;
}

.horizontal-box.align-top-center {
 box: horizontal top center wrap;
}

.section-1 {
 width: 200px;
 height: 300px;
}
.section-2 {
 width: 130px;
 height: 40px;
}

HTML
<section class="horizontal-box align-absolute-center section-1>
...
</section>
<section class="horizontal-box align-absolute-center section-2>
...
</section>
<section class="horizontal-box align-top-center>
...
</section>

And … The Yin to this Yang: postcss-cssstats

aggregates:{ selectors: 7,
declarations: 27,
properties:
[ ‘color’,‘backgroundColor’,‘borderColor’,‘width’,‘height’,‘display’,‘flexDirection’,‘alignItems’,‘justifyContent’,‘flexWrap’ ],
mediaQueries: [],
color: { total: 4, unique: 4 },
backgroundColor: { total: 3, unique: 2 },
borderColor: { total: 2, unique: 2 },
width: { total: 2, unique: 2 },
height: { total: 2, unique: 2 },
display: { total: 3, unique: 1 },
flexDirection: { total: 3, unique: 1 },
alignItems: { total: 3, unique: 2 },
justifyContent: { total: 3, unique: 1 },
flexWrap: { total: 2, unique: 1 },
idSelectors: 0,
classSelectors: 7,
pseudoClassSelectors: 0,
pseudoElementSelectors: 0 } }

It brings to light the complexity of your CSS files. There are only two possible flexDirections and as you can see there are three declarations of it.

Take away

Lets always remember that at the heart of it all: CSS size matters, reusability matters and most of all, performance matters.