WordPress Developers: Your Complete Guide to Conquering CSS in 2016

CSS can be a divisive technology…

For some, it’s a wonderfully flexible presentational technology that they love bending to their will.

For others, it’s a near incomprehensible series of fractal layout hacks that make accomplishing something as simple as vertically centering an element a cause for celebration.

Like it or loath it as a developer though, there’s no getting around CSS when it comes to making sure your site looks as ship-shape as possible for your users.

In this article, we’ll cover CSS in WordPress, look at the options you have for working with it in Kriesi themes, and run through some of the basics of best practice in 2016.

We’re writing for a non-CSS expert audience here, rather than those who spend their days sweating over the finer points of modular CSS architectures.

So, with that in mind, let’s kick things off with a quick look at the basics.

Some Brief Background on CSS

Cascading Style Sheets have been around as an idea since 1994, but the history of their development, implementation and adoption has been a long and tortuous one.

Successive waves of browser wars and specification wrangling have resulted in CSS causing more than its fair share of grief for developers and designers over the years.

The basic idea behind the technology remains simple, however: CSS exists to allow individual page markup elements to be styled according to your wishes.

The process by which new features come into being, by contrast, is arcane to say the least.

To cut a very, very long story short, most aspects of the CSS3 specification are currently implemented across modern browsers. New proposals for CSS4 are slowly grinding through the specification/implementation process.

Core CSS Concepts

Between worrying about specifications, modules, browser support and available properties, the level of baroque detail on offer with CSS can be intimidating if you’re new to it.

An excellent practical starting point for beginners – or those looking to brush up their skills – is Shay Howe’s Learn to Code HTML and CSS site.

Concentrate on understanding the following key concepts and you will be off to a good start:

The idea of separating the presentation from content.
Selectors.
The basics of the box model.
An understanding of positioning.
The role media queries play in responsive design.

In terms of nailing down which elements of CSS you can use in production, the incredibly handy Can I Use site has done a lot of the heavy lifting for you. Consult it wisely.

Getting Your Tools Organized

Grappling with CSS in the wild is going to be considerably easier if you arm yourself with a couple of key tools.

The first thing you need is a decent text editor for working with local files. The subject of which text editor makes the perfect tool is a famously fraught one, so we’ll confine ourselves to pointing out some desirable features:

Support for CSS syntax highlighting: This makes visually scanning your files considerably easier.
Code folding: This is an enormous help in moving around large files.
Support for project folders: Ideally, you should be able to perform all file system navigation from your text editor.
Support for live preview: The ability to see your changes in real time is a huge timesaver.

Pretty much any modern text editor should support all these features. Notepad++ is an excellent free solution for Windows. Mac users have long leaned towards tools such as BBEdit and Coda.

Two recent entries worth a mention are Atom from the team at Github, and Adobe’s Brackets. The latter is a particularly interesting option. It’s free and ships with a number of features designed specifically for CSS editing, such as preprocessor support and live preview.

The second thing that will make your excursions into CSS considerably easier is some sort of browser inspection tool.

These are tools which give you the ability to interact directly with CSS on live sites. They’re simply invaluable when it comes to development or troubleshooting and without them you’re essentially flying blind.

Google Chrome ships with Developer Tools by default. Firefox’s Page Inspector and the Safari Web Inspector perform similar roles. Get up to speed on using one or all of them and your day-to-day dealings with CSS will be that much less painful.

Getting to Grips with CSS in WordPress

Before going any further, it’s worth briefly reviewing some of the basics of CSS in WordPress itself.

Take a quick look through the Site Architecture section of the Codex and you’ll quickly notice that WordPress ships with a huge number of native CSS selectors by default.

All of these can naturally be over-ridden, or entirely deleted, in your own template files but it’s no harm investigating what you’re given right out of the box.

It’s beyond the scope of this article to go into individual options in detail but there’s a great intro piece over at CSS-tricks.com covering the essentials of native WordPress classes. WPBeginner also have a slightly more in-depth look at the basic classes on their site.

Take some time to use the tools we mentioned in the previous section to explore how key site elements such as menus, widgets, posts and pages are handled in the default theme.

Your CSS confidence will naturally start to grow and you’ll be that much more comfortable with how WordPress handles CSS under the hood.

CSS in Kriesi Themes

One of the main selling points of all Kriesi themes is of course how easy they make it to customize a site without having to dive into template or CSS files.

You have three main ways of handling CSS using a Kriesi theme. Let’s quickly step through them in ascending order of complexity:

Use the Template Builder and Style Generator to avoid having to touch the CSS at all.
Add your own small tweaks either via the Quick CSS box or by editing custom.css. Instructions for doing both are available in the online Kriesi documentation.
Use a child theme to cleanly separate your own CSS content and ensure future theme upgrades are hassle free.

If you’re making substantial CSS changes, option three is very much the one to go for. Detailed instructions on how to get started are in the video below and in the online documentation.

Best Practices in CSS

Okay, so far we’ve considered some CSS basics in the context of both WordPress and Kriesi themes but what are the best practices when it comes to actually writing your own stylesheets?

To an extent, this is a matter of personal preference but there’s no doubt that your overall CSS workflow will benefit considerably from the adoption of some kind of standards to help organise your code.

Due to their lack of inherent structure, CSS files can very quickly degenerate into unmaintainable swamps of randomly placed minor adjustments over time if you’re not careful.

Even taking some basic decisions on naming conventions and syntax will help but there are also a number of excellent existing guidelines out there to take more detailed inspiration from.

Here are two to get you started:

What Do Preprocessors Offer?

As you start to sharpen your CSS skills, you’ll naturally start leaning in the direction of using CSS preprocessors.

Using a preprocessor allows you to take advantage of features such as variables, nesting and mixins to bring a level of structure and order to your code that CSS natively lacks.

The main contenders here are Sass and Less. You can find a detailed breakdown of the differences between the two over at Hongkiat.

Be aware that both will potentially require some additional tooling via either Ruby or Node.js to add to your workflow. The potential payoff is tremendous however and, overall, taking advantage of the power of a preprocessor is highly recommended.

The good folks at DevTips have a great overview of their usage which we’ve included below. Their entire CSS Basics series is also an excellent general resource.

Are Frameworks Worth It?

Another option you will run into at some stage in your CSS career is the question of whether to use a CSS framework.

The basic idea here is similar to that of other frameworks such as Ruby on Rails or Django – pre-prepared scaffolding can save an awful lot of time and effort. Rather than re-inventing the wheel on every project, you start with a core set of functionality in place.

The best known example in the CSS world is Twitter’s Bootstrap project which has been around since 2010.

The Foundation project from Zurb is another fully-featured framework that’s gaining increasing traction with developers.

A common critique levelled at many frameworks is that they add an unnecessary level of bloat to projects. The Bones framework was designed specifically with WordPress in mind and offers a stripped down starting point for further exploration.

Depending on the exact nature of your project, making use of a framework may or may not be overkill. They’re definitely worth researching as a developer however, even if it’s purely in terms of keeping up to speed with current front-end trends and best practices.

CSS Roadmap in WordPress

The subject of CSS in WordPress is long overdue for some serious core team attention and the last year has seen signs of nascent interest from that quarter.

Core developer Helen Hou-Sandí laid out the first steps of a vision for how to take things forward in WordPress with her article Core CSS: A potential roadmap to sanity back in late 2014.

It’s early days in the project but the list of proposed initiatives such as improved documentation, establishing a pattern library, nailing down naming conventions and refactoring existing code is very much to be welcomed. This is one to keep an eye on going into 2016.

Further Resources

Working with CSS can be a frustrating experience but resources for learning it have radically improved in recent years. Check out some of the following suggestions if you’re looking to further up your game:

Courses: As mentioned at the top, How to Learn CSS and HTML is a wonderful starting point. Sites such as Lynda, Treehouse, CodeAcademy and O’Reilly also all have well-structured, detailed courses covering the basics and beyond.
Books: CSS3 for Web Designers by Dan Cederholm and Hardboiled Web Design by Andy Clarke are both excellent resources. It’s also hard to go wrong with anything from their respective publishers at A Book Apart and Five Simple Steps.
CSS sites: Css-Tricks will keep you up to speed on techniques and CSS Winner is a great source of design inspiration.

Conclusion

CSS is often considered a necessary evil by developers but getting to grips with its usage is more than worth the effort involved. Let’s briefly recap some of the steps we covered:

Make sure you’re solid on the basics of CSS.
Invest in your tooling.
Get familiar with WordPress’ core CSS classes.
Get comfortable with slinging your own CSS via child themes.
Pick a set of CSS guidelines and stick to them.
Take advantage of the power of CSS preprocessors.
Investigate CSS frameworks.
Never stop learning.

We’re curious to hear your thoughts on working with CSS. Is there a particular aspect of its use in WordPress that drives you crazy? Or a future feature set you can’t wait to try out?

Get in touch in the comments below and share your thoughts.