Designing Your Stylesheets

Front-end Designers spend vast amounts of time working to achieve pixel perfection. They sweat the details until each pixel is in just the right place on the web page. But in doing so they often overlook one of the most critical pieces to truly great web design – adding a level of stylesheet design.

In my experience, I tend to see this repeated pattern: A beautiful website accompanied by a “horrendous” stylesheet. Poorly organized stylesheets may not affect user experience in the short term. However, improper stylesheet design most certainly results in a degraded user experience as even small code changes bubble up as elements on the page “break.” As designers and front-end developers, we need to do a better job designing beautiful interfaces backed by robust CSS design.

Here are a few things we at LaunchPad Lab do to help create elegant and robust stylesheets.

Create A Common Language

One of the biggest problems teams face is coming to a consensus on a common coding language. Should you develop the application with vanilla CSS, should you use LESS or SASS? My advice is to use the language that makes sense to your team.

Vague. I know. But each application is different and calls for a different stack. At the Lab, we make every attempt to design our products with SASS. The structure and versatility of this language made it a no-brainer for our team.

That’s not to say that it was an easy transition. We have iterated several times on our best practices and are continuing to find new ways to improve our workflow.

The one thing though that has stayed consistent is our use of SASS. We agreed early on to use it and have not looked back since.

Think Big And Go Small

As applications grow and scale, it becomes critical that stylesheets are easy to read and maintain. At LaunchPad Lab we think “big” before honing in on the “small” details that each feature contains. What does this mean exactly?

During the inception period of a product, we identify HTML elements that share similar attributes. These are anything from blocks of content that appear multiple times throughout an application or simple elements such as links that share colors. By identifying these elements early, we can better create global styles that can be re-used throughout the application.

This process allows us to create one stylesheet that shapes the structure of each view in the application’s interface. Rather than creating a specific stylesheet for each view, we develop a global page view file. This file exists for one reason—to contain common page elements to keep our code reusable and flexible.

Agree on the minor details

Making sure your entire team is on board with syntax is important. At LaunchPad Lab we agreed that our class names would be written with a dash if needed, not an underscore or camel cased. We have found this technique is vital when working on multiple projects at once. Designers and developers no longer need to manage personal preference styles or worse, mixing syntax styles.

Sweat the small stuff

I am a stickler for clear, readable code. If I had more room on my business card, my role would expand to Style Officer.

Be consistent.

At LaunchPad Lab we order CSS properties alphabetically. This way developers and designers know exactly where to find a specific property to update. When moving from project to project, this consistent style has allowed our team to move fluidly between projects without having to study the application’s code structure.

Closing

Designing a stylesheet is not an easy task and requires buy-in from you and your team. We know. But we have found that stylesheet design vastly improves code maintainability and provides a consistent and reliable user experience.

×

Subscribe to Our Newsletter

If you made it this far, you should sign up for our monthly newsletter. Get our latest articles and insights delivered each month.

First Name*

Last Name*

Email*