How I write my CSS day to day

May 27, 2019

3 minute read

Here are some of my personal must haves when writing CSS day to day.

Braces on new lines

Personally it keeps the best readability. I use the same brace style in other languages, so actually doing it in my CSS with SASS makes everything as familiar and neat.

.foo {
	color: #000;
}

/* Preferred! :) */
.foo 
{
	color: #000;
}

Ordering CSS properties in a class based on their impact

When reading CSS I like to know the most impactful parts first. The less impactful properties of a CSS class usually go towards the bottom. (Of course this can vary based on what you deem impactful to the class.)

In any project my CSS will have the position or display towards to the top if an element needs it, usually followed by width and height, then followed by padding, margin and colours.

.foo 
{
	color: #000;
	width: 100%;
	position: relative;
	padding: 5px 0;
	display: flex;
	height: 100%;
}

/* Preferred! :) */
.foo 
{
	position: relative;
	display: flex;
	width: 100%;
	height: 100%;
	padding: 5px 0;
	color: #000;
}

Grouping similar CSS properties

If an element has a width and height, I would always expect those properties to be together, never separated. If I also had display: flex for example, I would also want to see any properties associated (e.g align-items: center) placed directly below it.

.foo
{
	align-items: center;
	height: 100%;
	display: flex;
	width: 100%;
	flex-direction: column;
}
/* Preferred! - Nicely grouped! */
.foo
{
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	height: 100%;
}

Avoid SASS nesting

Just because you can nest your CSS with SASS doesn’t mean you should, at least not everywhere.

Yes it can be useful and on occasion I’ve used it for components around different states…BUT you can go overboard and sink your code into an unreadable mess if you’re not careful.

Nesting 3 or 4 levels deep with SASS is going to create some big readability problems. You may think it looks “OK” to you, and “YOU” can understand it fine, but other developers seeing it for the first time may struggle.

Take some high-level example code I once came across in a project.

.container 
{
	 .content 
	 {
		 .btn 
		 {
			/* btn styles */
			display: block;

			/* special .content styles */
			color: #fff;
			> span 
			{
				color: #000;
			}
		}
	 }
}

So the above works. Right?

<div class="container">
	<div class="content">
		<button class="btn"></button>	
	</div>
</div>

Ok, so what if we now needed a button out outside of the container class? Oh there’s the derp.

I’ve often inherited code where nesting levels were so deep, either finding what everything did became a nightmare, or something was so nested up and relying on other CSS classes it was comical.

In short the way I ended up refactoring the above example was to:

  • Seperate out the button styles so it became it’s own standalone component.
  • The button class was then only imported at a top level with other SASS imports.
  • I then took what was needed to style the button specific to the content element.

It then ends up looking like:

/* Button component has its own import at top level */
.button 
{ 
	/* button styles*/ 
}

/* Specific styles to this button inside .content */
.container .content .button
{
	color: #fff;
}
.container .content .button > span
{
	color: #000;
}

Now based on above, I was then able to have a button not relying on anything and could be used anywhere.

<button class="btn"></button>
<div class="container">
	<div class="content">
		<button class="btn"></button>	
	</div>
</div>

Taking what’s shown in the inspector tool, straight to my project search bar

Dev tools showing the CSS for a specific element is great. I take the CSS line its referring to and search for it directly in my project. It’s quick and easy and gets me to the line of code in seconds. Of course that’s only really possible if I avoid nesting. If that’s not your thing, then of course source maps will be your friend.

.foo 
{
	div 
	{
		h1 
		{
			/* h1 style */
		}
	}
}

/* Preferred! - Nicely searchable! */
.foo div h1 
{
	/* h1 style */
}

What do you do?

I’m really interested in hearing how you write your CSS in your SASS projects. Do you also have a set of preferred ways things are layed out?


Grant Bartlett

Front end JavaScript lover, more specifically TypeScript and React. Give us a follow - @grant_bartlett