Back to Blog

Abstracting CSS Styles for More Flexibility

Author

Here’s a post for all the front end code geeks out there.

Recently I’ve been designing and coding a lot of web applications that have repeating elements like subheadings, form inputs and modules like alerts or messages. Usually, setting up the style for these types of elements up in CSS is straightforward and only requires 1 set of attributes, but then in some cases you might want to apply a different margin to a subheading or block – or maybe make a few input fields wider or shorter than others.

Margins:

I’ve found the easiest way to have consistent margins but easily be able to override them is to simply define the attributes of the element once and then toward the bottom of the stylesheet paste a series of margin overrides that could apply to any element.

For example:
Here’s a stack of divs being displayed as block elements. Each has a bottom margin of 20px. But because the container has padding at the top and bottom, let’s say we want the last div to have a margin-bottom of 0 pixels.

Well, in the code you simply add an additional class of “mrg-bottom-0” and it overrides the standard margin of 20px.

Here’s a list of margin overrides I usually add to any stylesheet on a web application project:


#content .mrg-top-5 { margin-top:5px; }
#content .mrg-top-10 { margin-top:10px; }
#content .mrg-top-15 { margin-top:15px; }
#content .mrg-top-20 { margin-top:20px; }
#content .mrg-top-25 { margin-top:25px; }
#content .mrg-top-30 { margin-top:30px; }

#content .mrg-bottom-5 { margin-bottom:5px; }
#content .mrg-bottom-10 { margin-bottom:10px; }
#content .mrg-bottom-15 { margin-bottom:15px; }
#content .mrg-bottom-20 { margin-bottom:20px; }
#content .mrg-bottom-25 { margin-bottom:25px; }
#content .mrg-bottom-30 { margin-bottom:30px; }

#content .mrg-left-5 { margin-left:5px; }
#content .mrg-left-10 { margin-left:10px; }
#content .mrg-left-15 { margin-left:15px; }
#content .mrg-left-20 { margin-left:20px; }
#content .mrg-left-20 { margin-left:25px; }
#content .mrg-left-20 { margin-left:30px; }

#content .mrg-right-5 { margin-right:5px; }
#content .mrg-right-10 { margin-right:10px; }
#content .mrg-right-15 { margin-right:15px; }
#content .mrg-right-20 { margin-right:20px; }
#content .mrg-right-25 { margin-right:25px; }
#content .mrg-right-30 { margin-right:30px; }

Form Fields:

The same approach works pretty well for form inputs and textareas. In most cases, you could argue that a series of text inputs would be best designed if they were all the same length, but that may not be intuitive if you’re trying to capture a price or zip code. You could enter the character length of the input field but an easier way to keep inputs nice and consistent is to define all of your form inputs and textareas with either a default width or a width of “auto.” Then in the form code you could apply the overrides you want to make fields shorter or longer.

Below is an example of this applied to a sign up form, along with some abstracted values I usually paste into my stylesheets:


#content input.width-auto, #content textarea.width-auto, #content select.width-auto { width:auto; }
#content input.width-20, #content textarea.width-20, #content select.width-20 { width:20%; }
#content input.width-25, #content textarea.width-25, #content select.width-25 { width:25%; }
#content input.width-40, #content textarea.width-40, #content select.width-40 { width:40%; }
#content input.width-50, #content textarea.width-50, #content select.width-50 { width:50%; }
#content input.width-60, #content textarea.width-60, #content select.width-60 { width:60%; }
#content input.width-75, #content textarea.width-75, #content select.width-75 { width:75%; }
#content input.width-80, #content textarea.width-80, #content select.width-80 { width:80%; }
#content input.width-90, #content textarea.width-90, #content select.width-90 { width:90%; }
#content input.width-100, #content textarea.width-100, #content select.width-100 { width:100%; }

Fonts:

Font sizing and typography in general is coming along way. With the advent of Cufon a few years ago and the proliferation of TypeKit, there are tons of exciting new options for styling text on the web. In terms of font sizing, between pixels, points, em’s and percentages we have a pretty much boundless variety of sizes we can make a font. Most of the designers I know tend to use pixels which don’t allow for “half” sizes, although recent research suggests that sizing fonts in points might be the best for mobile devices – especially the with the new iPhone resolution complicating things.

A nice treatment I’ve recently been using is to define the size of a container holding the text you want to further customize – for example, a div fo “content” that will be containing multiple headings, paragraphs, and lists. For example, the div of “content” could have a font-size attribtue of 10 points. At any point, you might want to define your headings, paragraphs, lists, etc. to have specific sizes, but I’ve found you can customize the size of body copy like paragraphs as much as you want by just defining the font size of them in percentages.

So if the div of “content” is set to 10pt, you could then add an attribute in your stylesheet to target all paragraphs within “content” and adjust the percentage to, say, 105%. What you’re left width is a slight increase above the 10pt size without hitting 10.5 points.


#content {
font-size:10pt;
}
#content p {
font-size:105%;
}

Seems nitpicky, but sometimes you just want to play with the size of your copy until it feels right.

Hopefully these approaches will save you time when approaching front-end HTML/CSS projects.

Happy coding!

Author Alex Fedorov

Alex is a strategic thinker with a gift for information architecture, known for his ability to wireframe complex workflows and multiple states of applications at the speed of light. He is passionate about clean, data-driven design.

More posts from this author

How we work Process

Product Hero Talin Wadsworth