Digital marketing that brings

Creativity+Technology

together

Blogs

quadra blog 5 rules to optimise css code
Jack-Profile-New.jpg

This month at Quadra HQ our goal is to share some useful tools to help you on your journey to becoming a digital marketing wizard. Each member of our team will be sharing useful tips and tools with you over the next month. So dim your lights and find a comfortable chair, today you are morphing into a developer…

Optimisation of CSS is not only important due to speed, but also for maintainability and reusability. On many occasions I have come across a CSS file so large and unorganised that my will to live suddenly began to waver. Whether you are creating a site for someone else, contributing to a site or doing a quick fix for somebody… please think of others!

Rule 1: Use Sass.

For those of you who were thinking it, Sass doesn’t refer to the act of being ‘sassy’. Sass actually stands for ‘Syntactically Awesome Style Sheets’ and they really are awesome. Sass will allow you to nest your CSS code without repeating selectors constantly for specific styles. For example instead of

#homepage { background: #F0F0F0; }
#homepage #sidebar ul { padding: 0; }
#homepage #sidebar ul li a { color: #000000; }

You would have the ability to achieve this with the following

#homepage {
background: #F0F0F0;
#sidebar ul {
padding: 0;
li a {
color: #000000;
}
}
}

Not only is that a better structure, it is a lot easier to read among a gargantuan file packed with CSS.

That’s not all… there’s more! Sass not only improves CSS structure, it also allows us to use variables, mixins, style inheritance, maths and more!

Browsers do not read Sass as they don’t understand it, they will only read CSS which is why to use Sass you need a tool for compiling your SCSS to CSS. During this phase, your SCSS will compile to CSS in another file. This is where your variables will be converted to their values, the maths will be calculated, inherited styles will be created and delivered in a minified format (typically).

If you are using Ruby on Rails this tool will be built in but for others, I can recommend installing gulp with npm to achieve this. (Note that for the purpose of this blog I will continue to write in CSS not Sass!)

Rule 2: Write shorthand code.

When CSS is written there are a lot of properties that require or accept multiple values. For example, if you want to apply a border to an element you use the ‘border’ property. This property takes in multiple values and those values can be added at once or separately.

E.g.

#border-box {
border-width: 2px;
border-style: solid;
border-color: #F0F0F0;
}

That is the long way round. You could also write this CSS as

#border-box {
border: 2px solid #F0F0F0;
}

Can you see how much cleaner, easier to read and optimised that is? Of course you won’t want to do this in all cases for optimisation…
In this case you are using the border-color property on it’s own to only manipulate the colour.

.border {
border: 2px solid;
}
.border.grey {
border-color: #F0F0F0;
}
.border.black {
border-color: #000000;
}


Rule 3: Write to reuse.

Before you even begin writing CSS, I recommend you plan out your project and identify consistent designs throughout your site that you will use. If you find yourself using a box shadow on a lot of your elements and you are writing like this…

#section1 {
box-shadow: 1px 1px 1px 1px #D0D0D0;
}
#section2 {
box-shadow: 1px 1px 1px 1px #D0D0D0;
}

You are writing duplicate code, wasting your time, reducing maintainability and being quite lazy! If you find yourself consistently writing code like this then you should create a class that applies the desired styles, in this case…

.light-shadow {
box-shadow: 1px 1px 1px 1px #D0D0D0;
}

You can then apply that to each section and perhaps lose the need for the ID on the section too. The benefit of this isn’t just shorter code but also gaining the ability to edit a style in a central location once and seeing the changes throughout the site instantly, as opposed to having to change it 10 times to see the full effects and possibly missing one of the elements.

Rule 4: Important is not so important.

If you find yourself using ‘!important’ throughout your CSS code, it is usually an indicator you are doing something wrong. Important is usually applied to selectors that are being overwritten by other styles that they shouldn’t be overwritten by. The first thing you must ask is ‘why is it being applied?’

The style-overwriting problem is usually caused by either CSS order or specificity. For example, if you have a piece of code targeting ‘.content’ to make it blue, and further down you’re making it red, the colour blue will not be applied, making you wrongfully use important. If you want vary each colour its best practice to create a class of blue and another of red.

Bear in mind that your code may not be specific enough. For example, if you have the following code for #content…

.container #section p#content {
color: red;
}

But want the content to be blue, then running the following code will NOT work…

#section p {
color: blue;
}

You need to change the first rule so it’s not so specific. The first rule is usually due to old code being lost in the file meaning the new style doesn’t work.


Rule 5: Normalise your CSS

One important action I carry out before working on a project is creating the default CSS for the elements, classes and IDs I will be using.

I’m sure we can agree that a website with inconsistent headings is quite misleading and chaotic. I always create my styles in my ‘normalise.css’ file before moving on to anything else, this means all my base styles for use throughout the site are defined.

If you style all your h1, h2, h3, h4 , h5’s and your lists, paragraphs, body and html tags you can complete your site quickly and efficiently.

Imagine the prospect of readily available headings and paddings, margins, fonts, sizes and line heights all within reach without the nuisance of styling as you go (usually leading to duplicate code).

While speed and efficiency is always recommended, you shouldn’t rush your CSS. The additional time it takes you to organise your CSS, avoiding duplicates and unnecessary code will be well worth it when maintenance time is reduced. Establishing a process for creating your CSS will enable you to create great code and put you in good stead for your future as a developer!

To find out how our Jersey-based development services can benefit your business please get in touch! 

Jack Profile New quadra profile jack2
The Team

Jack O'Connor

FIND OUT MORE
Subscribe

Love our blogs?

Get the latest blogs and happenings straight to your inbox!.

love it? you might like these...

We use cookies to give a more efficient and personalised service to users of this website. By clicking 'OK', you agree to our use of cookies during your browsing experience. Please view our Privacy Policy to find out more.

OK