7 Tips to Speed Up CSS Development

As a developer, it’s important to always be looking at ways to make your workflow and process more efficient. One way to do this is to write less CSS; make it more concise. In doing so you’ll be able to finish your projects faster. You’ll also reduce loading times and make future edits more manageable.

7 Tips to Speed Up CSS Development

Another way to speed up development is to use tools which make it quicker and easier for you to code. This includes text editors, preprocessors, and plugins like Emmet which help improve workflow.

7 Tips to Speed Up CSS Development

Most of these tips are incredibly simple to implement and will speed up your CSS development instantly.

Use a CSS preprocessor such as Sass

7 Tips to Speed Up CSS Development

Credit: Sass

A preprocessor such as Sass allows you to use features not currently available in CSS. This includes variables, nesting, mixins, and inheritance. Using these features with Sass can produce the same output as traditional CSS, but with far less code having to be written. This means you can write something like this, for example:

$font-stack: Helvetica, sans-serif

$primary-color: #333

body

font: 100% $font-stack

color: $primary-color

What’s happening in this case is the font and primary color are determined once at the top of your CSS file. From thereon in, this value can be pulled simply by typing $font-stack or $primary-color. It saves typing values in over and over again, and also allows you to update all instances just by editing the original variable.

This is the output that would be generated from this Sass code sample:

body {

font: 100% Helvetica, sans-serif;

color: #333;

}

Use CSS shorthand

Shorthand refers to using simplified and shorter ways of producing the same CSS output. The most common example is the way in which margins and padding can be simplified from:

margin-top: 10px;

margin-right: 5px;

margin-bottom: 15px;

margin-left: 10px;

to:

margin: 10px 5px 15px 10px;

Most developers use elements of shorthand. However, there are some examples which are less well-know and can speed up development. These include:

1. Fonts

font-style: italic;

font-weight: bold;

font-size: .5em;

line-height: 2;

font-family: Arial, sans-serif;

…which can be shortened to:

font: italic bold .5em/2 Arial, sans-serif;

2. Outlines

outline-width: 1px;

outline-style: solid;

outline-color: #111;

…which can be shortened to:

outline: 1px solid #111;

3. Transitions

transition-property: opacity;

transition-duration: 3s;

transition-delay: 1s;

transition-timing-function: ease-in;

…which can be shortened to:

transition: opacity 3s ease-in 1s;

Use a framework such as Bootstrap for more complex projects

Using a framework is not always suitable, for example with small and simple websites. For medium to large scale websites, a framework such as Bootstrap can provide a great deal of value in terms of speeding up CSS development.

7 Tips to Speed Up CSS Development

Credit: ThemeKeeper Elements

Bootstrap integrates with Sass and has an integrated responsive grid system. That means you can bypass much of the repetitive CSS required when building from scratch. It also contains a library of prebuilt components. Layouts and individual components such as navigations and content sections are ready-to-go.

Use a CSS reset

A CSS reset reduces browser inconsistencies for aspects including margins, font sizes, and line heights. Using a reset allows for this aspect of CSS to be predetermined, rather than be constantly adding fixes throughout your stylesheet. By using a reset such as this one by Eric Meyer, it applies resets to everything within a small number of lines of CSS. Applying fixes to individual tags would take longer and extend the length of your stylesheet.

html, body, div, span, applet, object, iframe,

h1, h2, h3, h4, h5, h6, p, blockquote, pre,

a, abbr, acronym, address, big, cite, code,

del, dfn, em, img, ins, kbd, q, s, samp,

small, strike, strong, sub, sup, tt, var,

b, u, i, center,

dl, dt, dd, ol, ul, li,

fieldset, form, label, legend,

table, caption, tbody, tfoot, thead, tr, th, td,

article, aside, canvas, details, embed,

figure, figcaption, footer, header, hgroup,

menu, nav, output, ruby, section, summary,

time, mark, audio, video {

margin: 0;

padding: 0;

border: 0;

font-size: 100%;

font: inherit;

vertical-align: baseline;

}

/* HTML5 display-role reset for older browsers */

article, aside, details, figcaption, figure,

footer, header, hgroup, menu, nav, section {

display: block;

}

body {

line-height: 1;

}

ol, ul {

list-style: none;

}

blockquote, q {

quotes: none;

}

blockquote:before, blockquote:after,

q:before, q:after {

content: ”;

content: none;

}

table {

border-collapse: collapse;

border-spacing: 0;

}

Use a text editor with syntax highlighting

Using a text editor such as Sublime Text allows for a number of neat shortcuts and features to improve workflow with CSS.

7 Tips to Speed Up CSS Development

Credit: CSS-Tricks

You can use the Multiple Selections feature to change many lines or variables at once. The Split Editing mode allows you to edit your CSS while also viewing your HTML or JavaScript. But one of the most useful features is Syntax Highlighting. It groups common tags, operators, and more, and color codes them to make it easier to find certain points within your CSS.

7 Tips to Speed Up CSS Development

Credit: Atom.io

Atom is another great editor which similarly has features such as Sass Syntax Support and Smart Autocompletion.

Use Emmet text editor plugin

7 Tips to Speed Up CSS Development

Credit: CSS Love

Emmet is a plugin for popular text editors like Sublime Text, Atom, and Coda. It’s also supported in JSFiddle and CodePen. It allows for super-fast CSS coding using abbreviated syntax and dynamic snippets. To show just how much it can speed up coding, see the following example:

#page>div.logo+ul#navigation>li*5>a{Item $}

This code snippet is written to build the header section of a web page, inclusive of a logo and navigation list. By using Emmet, with one click it is transformed into this:

<div id=”page”>

<div class=”logo”></div>

<ul id=”navigation”>

<li><a href=””>Item 1</a></li>

<li><a href=””>Item 2</a></li>

<li><a href=””>Item 3</a></li>

<li><a href=””>Item 4</a></li>

<li><a href=””>Item 5</a></li>

</ul>

</div>

The same effect can be used throughout CSS. View these abbreviation examples below to understand the simplicity and conciseness it brings to your code.

  • #1 → #111111
  • w100p → width: 100%;
  • fw400 → font-weight: 400;
  • m10 → margin: 10px;

Download and adapt a CSS boilerplate

A boilerplate is great way to speed up the CSS development process. It’s more suitable for smaller projects or those that don’t require a large framework such as Bootstrap. There are some really simple boilerplates like Skeleton. It’s incredibly lightweight at just around 400 lines. This includes a CSS reset and styles for elements like buttons, type, tables, and forms. It also includes a simple-to-use 12-column grid which is fully responsive.

An example of a responsive site built using the Skeleton boilerplate

7 Tips to Speed Up CSS Development

Credit: Skeleton

By implementing a boilerplate of some variety into your workflow, much of the repetitive nature of CSS coding can be eradicated. This saves you time and allows you to spend longer on the important aspects such as styles and content layout.

These are just a few ways you can look to speed up your CSS development. With the adoption preprocessors and frameworks, CSS coding is constantly being refined and improved. It’s saving developers more and more time, allowing them to output websites and products in a shorter period of time.

More CSS resources: