Styling

Add class to the most outer selector using Sass mixin

Write and maintain clean and scalable styles by adding CSS class or id to the most outer selector using Sass mixin

Use nested lists in Sass to organize CSS rules like padding and margin.

With Sass you can organize data into nested lists, scale data easily and create all the CSS rules with loops.

Start your JSS journey with the selectors cheat sheet.

A small cheat sheet of most popular JSS selectors I use the most and always forget

Pixel density and Resolution tool for CSS media queries

Open this page on whatever device or browser you want and check. It will show what pixel density or pixel ratio the device/browser has and it will create media queries for HD or Retina displays.

Center grid and align items on the left using CSS

If you think that it is a trivial task to center grid content and align its items without JavaScript, think again.

Eliminate render-blocking CSS in above-the-fold content, Part 3/3

This is an error that can take 30+ points from your score, but it could be surprisingly easy to fix even on a mature website.

Code Bites: style "previous" HTML tags or how to reverse the cascading selectors without JavaScript

Every time when you want to change any element which is above in the DOM Tree, try to target the parents.

Code Bites: simulate click events only with CSS

Often, I like to joke that you can program with CSS. In this case I’ll show you how to have click events without JavaScript.

Organize CSS Preprocessors like Sass or Less in Angular Cli

Angular 4 organizes its styles in a way that can make you fall in love again. But there is an issue that surfaces itself when I tried to use Sass or Less variables and partials.

CSS animations triggered when elements are visible on-screen

There are great ideas, and examples on the internet for CSS animations, but not so many explain how to make loading page elements appear smoothly and not before they are visible/scrolled.