Cascading style sheets, known more commonly as CSS, is a language used to describe the presentation or form of a document written in HTML, or other markup languages. It is an essential component of the WWW next to HTML and JavaScript.
After years of honing my skill as an engineer, I’ve found that grounding my CSS work around these five strategies has helped save valuable time and energy when working on production sites.
Tidy, semantic HTML creates the foundation for writing good CSS. Semantic HTML markup is the best-practice of writing and organizing your HTML in a way that bolsters the meaning of the content over its appearance. Here are some examples
<header>
When inside <body> it’s the website masthead.
When inside <article> it’s the most important information.
<main>
Primary content of the page.
<aside>
Secondary content not required to understand the main content.
<footer>
When inside <body> it’s the website footer.
When inside <article> it’s the least important information.
Check out Algonquin Designs HTML semantics cheat sheet for more examples.
2. Use Shorthand Properties
Learning CSS in 2003, I was a late adopter of using CSS shorthand properties, and I'm still working on making it a habit. Writing in shorthand is the most straightforward method to shorten the amount of code and time it takes when writing CSS.
Background properties are my favorite examples of this. An element with the following background properties ...
background-color: #000000;
background-image: url(assets/images/background.png);
background-color: #2d2d2d;
background-repeat: no-repeat;... can be written in shorthand in just one declaration:
background: #000000 url(assets/images/background.png) no-repeat center top;3. Revise Third-Party Frameworks and Libraries
Using a framework like Twitter Bootstrap or Zurb Foundation is a great way to kickstart a responsive project or minimum viable prototype, and while these frameworks may already be optimized, chances are you won't need 100% of the provided code.
Additionally, the framework or library may more succinctly solve some of your problems than what you may code custom. Knowing what's included in your framework will prevent you from accidentally duplicating rule sets.
4. Take Advantage of Image Sprites
Image sprites are great for reducing your CSS file size and page load time. It allows you to package multiple image files into one large (but optimized) .png file, which reduces HTTP requests, improving your pages load time.
Online sprite generators such as SpriteGen allow you to easily upload your image and output the CSS for you.
5. Minify Your CSS
Minifying CSS compresses your CSS into a file with little to no whitespace. There are many ways to do this depending on your development environment, or you can use an online tool such as Minify.
Browsers do not need spaces to read CSS code, but human-readable code is needed during development, so it's recommended to serve unminified CSS files during development and minified files on production environments.
Do you have any top tips you think we missed? Let us know by giving us a tweet at @pri_agency!
