This post originally published on the Mr Frontend Community Blog!
This is the second episode of the “Frontend Workflow” series. In this episode, I will use GulpJS, some plugins and Browser-sync to show you how you can automate your CSS development in your workflow.
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 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"> <ul> <li><a>Home</a></li> <li><a>About</a></li> <li><a>Blog</a></li> </ul> </nav> CSS selectors And beside that you have this in your stylesheet:
RTL, no it is not the dutch television channel! RTL stands for right-to-left, websites with Arabic visitors want to support their natural way of reading online. I’m used to LTR (left-to-right), so I never thought about supporting RTL.
But now I needed to build a page that supports RTL. That was interesting to investigate. The website that gave me a very quick help was the all time favorite “CSS Tricks”, the have a article about RTL / the CSS direction property.
Have you ever have empty space below a DIV element with an image inside of it? No? Lucky you! I had this problem. But this image had no margin or padding below it. So it was really weird.
But I never thought about what kind of type of display (CSS), an IMG element was. And what I saw, it was a “display: inline”. So that helps a lot to find a solution (after a hour searching, checking and reloading hahaha).