Handle PostCSS (with plugins) with NPM scripts

PostCSS becomes more and more popular these days. And yeah, why should we develop in these weird file extensions for Sass, Scss or Less. With PostCSS, we just stick to CSS extensions.

That’s what I love about PostCSS! There are currently loads of plugins for to do the same magic as we were used to in Sass/Scss! PreCSS is my favorite! You can use Variables, Conditionals, Loops, Mixins, Extends, Imports, Property lookup, Root and so much more! Autoprefixer and Color functions are also very cool!

You can choose your favorite tool/task runner to handle PostCSS. Gulp, Grunt, PostCSS CLI, NodeJS. But more and more people want to stick to NPM scripts, people like me!

I like the idea to do everything with NPM scripts. Just use your already created package.json, drop in your CLI commands in the scripts object, and of we go!

Step 1
Let’s create a package.json (if you didn’t have that already) with npm init.

Step 2
Start with a few commands to install the dependencies:
npm install postcss normalize-css precss --save-dev. And install postcss-cli globally on your system: npm install postcss-cli.

Step 3
After the installation create a CSS file (style.css) in a folder CSS.

Step 4
On the first rule of the CSS file set this @import: @import "../node_modules/normalize-css/normalize.css";.

Step 5
Let’s create an postcss-options.json.

Step 6
Add this content to the postcss-options file:

"use": ["precss"],
"input": "./CSS/style.css",
"output": "./CSS/final.css",
"local-plugins": true

Read more

5 CSS Tips for Junior Frontend Developers

HTML & CSS are the basic skills for Frontend Developers. But basic will not always say it is easy to write clean CSS code. So from the things that I’ve learned in all these years as a Frontend Developer, I’ll like to share some tips for writing clean CSS and not spaghetti CSS.

1. Think before you write

Think before you write sounds logical. But a lot of Frontend Developers choosing weird class names that don’t make any sense to others, even worse, after a while it doesn’t make any sense to themselves.

So take a moment and think about your class name, because naming classes are the hardest thing in CSS.

Tip: Think of components, modules or other segments. Separate your HTML in modules. A module could be:

  • Main navigation
  • Social media bar
  • Search box
  • Google maps
  • Subscription box
  • Facebook messages widget

2. Keep CSS Specificity as low as possible

When I review CSS of Juniors, a lot of times I see selectors like these: nav ul li a, #logo, .navigation ul li a, html body div#pagewrap ul#summer-drinks li.favorite. The thing with these selectors is that the CSS Specificity is too high! The higher CSS Specificity of a selector is, the more difficult it is to overwrite on a later moment.

2.1 What is CSS Specificity score?
CSS Selectors gives different Specificity scores:

Selector: `nav ul li a` gets the score: ““ Selector: `.navigation ul li a` gets the score: ““ Selector: `html body div#pagewrap ul#summer-drinks li.favorite` gets the score: ““

2.2 How is CSS Specificity score calculated?

CSS Specificity can be divided into 4 categories. Each category gives a number for the score.

Inline styles The first number in: “”An inline style lives in your HTML document. It is set directly to a HTML element like this:
<h1 style="color: #fff;">
ID selectors The second number in: “”An ID can be set directly to a HTML element like this:
<div id="page-header">

In the CSS you use it lik `#page-header`.

  • Classes, attributes and pseudo-classes.
    The third number in: “”An class can be set directly to a HTML element like this:

    <div class="main-navigation-container">

    Read more

  • CSS Performance: We write CSS selectors wrong!

    So today, I want to dive into CSS Performance. Especially I want to talk about, how you can make you selectors faster to render in the browser. So let’s start with an example that every (Frontend) Webdeveloper used once in CSS.

    HTML structure

    So imagine that you have this html structure:

    <nav class="main-navigation">

    Read more