- Key Takeaways
- What Are Helper Classes?
- Margins and Padding
- Width and Height
- Position and Z-index
- Floated Elements
- Aligning Elements
- Visibility Classes
- Typography
- Colors
- Lists
- Borders
- Display Values
- Conclusion
- Relevant Library Links
- Further Reading
- Frequently Asked Questions on Using Helper Classes to DRY and Scale CSS
You are starting a new web project and looking for a new CSS methodology that will help you scale your code. A growing set of techniques for writing modular CSS are available, including SMACSS, BEM, and a number of other similar methodologies, all based on Object-oriented CSS (OCSS). As you can see, there are lots of techniques to write and organize CSS.
Besides all these methodologies, there is something that can help us write DRY, less repetitive code: Helper classes (also called utility classes).
This concept was discussed some time ago in Thierry Koblentz’s article on Smashing Magazine, but I thought I would explain the method in my own words here.
Key Takeaways
- Helper classes, or utility classes, can help remove repetition in CSS by creating a set of abstract classes that can be used repeatedly on HTML elements. This makes the code more reusable and scalable for future additions.
- Helper classes are responsible for doing one job and doing it well. When creating a new component, you simply need to combine some classes together to build it.
- Helper classes can be used to manage margins and padding, width and height, position and z-index, aligning elements, typography, colors, lists, borders, and display values.
- Helper classes can be used in combination with CSS preprocessors like Sass or Less, making it easier to create and manage these classes.
- While helper classes offer many benefits, they can lead to HTML bloat, as you may end up applying multiple classes to a single element. This can make your HTML code harder to read and maintain.
What Are Helper Classes?
Helper classes can help remove repetition by creating a set of abstract classes that can be used over and over on HTML elements. Each helper class is responsible for doing one job and doing it well. Doing this will make your code more reusable and scalable for many features that will be added in the future. So whenever you want to create a new component, you’ll just need to combine some classes together to build it.
“Treat code like Lego. Break code into the smallest little blocks possible.” — @csswizardry (via @stubbornella) #btconf
— Smashing Magazine (@smashingmag) May 27, 2013
Let’s see a simple example of what utility classes look like and how we can use them. Look at the following snippet of code:
.left { float: left; }
.right { float: right; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.text-center { text-align: center; }
Here we’ve created a set of CSS rules that we can use later when building new components. For example if you want to align some content to the left you can use the text-left
class. Likewise, you can use the left
or right
classes to float elements in the needed direction.
Let’s see another example of a box that needs to be on the left with its inner content centered.
We usually do something like this:
<div class="box">
</div>
With this CSS:
.box {
float: left;
text-align: center;
}
Instead, we can achieve the same thing using reusable and single-responsibility helper classes:
<div class="left text-center">
</div>
Notice how I removed the box
class and instead added our predefined classes left
and text-center
.
If you want to change the float and align directions, instead of doing this on the non-reusable .box
class, you can use other helper classes:
<div class="right text-right">
</div>
The grid system is a good example of helper classes in use. Here is an example from Foundation’s grid:
<div class="row">
<div class="small-2 large-4 columns"></div>
<div class="small-4 large-4 columns"></div>
<div class="small-6 large-4 columns"></div>
</div>
Foundation provides numerous classes that can be used and combined together to create a grid system with different widths for different screen sizes. This flexibility helps developers create new customized layouts faster, without editing any CSS for the grid itself. For example:
.small-2
and.large-4
classes will set the width of an element based on the screen size.- The
.row
class sets the width of the container that holds the columns. - The
.columns
class sets the padding and floats.
Now that you understand what helper classes are, let’s take a look at some reusable classes we can add to our projects, presented below in different categories. Note also that the example will use some Sass variables, but naturally these are not necessary.
Margins and Padding
Margins and padding are probably the most used properties in our CSS. Adding some abstract classes that can handle this will DRY our code.
We start by defining a variable (using Sass) for the base space unit for our design. Let’s start with 1em
and on top of that we can create classes for different space sizes.
$base-space-unit: 1em;
// Top margin
.margin-top-none { margin-top: 0; }
.margin-top-quarter { margin-top: $base-space-unit / 4; }
.margin-top-half { margin-top: $base-space-unit / 2; }
.margin-top-one { margin-top: $base-space-unit; }
.margin-top-two { margin-top: $base-space-unit * 2; }
// Top padding
.padding-top-none { padding-top: 0; }
.padding-top-quarter { padding-top: $base-space-unit / 4; }
.padding-top-half { padding-top: $base-space-unit / 2; }
.padding-top-one { padding-top: $base-space-unit; }
.padding-top-two { padding-top: $base-space-unit * 2; }
We can alternatively choose short class names, as in the example code below from Basscss
.m0 { margin: 0 }
.mt0 { margin-top: 0 }
.mr0 { margin-right: 0 }
.mb0 { margin-bottom: 0 }
.ml0 { margin-left: 0 }
Choose what works for you and your team. The long names will obviously make your HTML elements larger, but they are more readable in contrast to the short names, so you may need to look at your CSS to figure out how things work.
Width and Height
Imagine you want to set a section to be full height in different places on your website. The traditional way we did this was something like this:
<div class="contact-section">
<!-- Content here... -->
</div>
And our CSS:
.contact-section { height: 100%; }
For other sections we would repeat the code:
<div class="services-section">
<!-- Content here... -->
</div>
And the CSS:
.services-section { height: 100%; }
But we can reduce all of this with one class called full-height
:
<div class="full-height">
<!-- Content here... -->
</div>
Below are some similar examples, including the full-height
class used above:
.fit { max-width: 100%; }
.half-width { width: 50% }
.full-width { width: 100%; }
.full-height { height: 100%; }
Position and Z-index
Position-related properties can be combined with other properties like z-index
to create a complex layout. We can create a set of classes to set the exact position of any element in relation to the viewport or an ancestor element (right, left, top left, etc):
.fixed { position: fixed; }
.relative { position: relative; }
.absolute { position: absolute; }
.static { position: static; }
.zindex-1 { z-index: 1; }
.zindex-2 { z-index: 2; }
.zindex-3 { z-index: 3; }
.pin-top-right {
top: 0;
right: 0;
}
.pin-bottom-right {
bottom: 0;
right: 0;
}
The “pin” helper classes are inspired by Mapbox’s CSS.
Let’s extend the full-height example to contain an element positioned at the bottom right.
<div class="full-height relative">
<div class="absolute pin-bottom-right padding-one">
Text to bottom right
</div>
</div>
By combining more than one class, we can get the required result in less code. If you want to position the inner element at the top right, you can use the pin-top-right
instead of pin-bottom-right
. You might have noticed in the above code I also added another helper class: The padding-one
class ensures the element isn’t flush against the edge of the container or viewport.
Floated Elements
Floating elements left or right can be done using left
or right
classes. The well-known clearfix class can be used on the parent element to clear floats, shown below using Sass’s parent selector:
.left { float: left; }
.right { float: right; }
.clearfix {
&:before,
&:after {
content: "";
display: table;
}
&:after { clear: both; }
}
Aligning Elements
We can make text and other content align to any direction, using align-based helper classes:
.text-left { text-align: left; }
.text-right { text-align: right; }
.text-center { text-align: center; }
.text-just { text-align: justify; }
.align-top { vertical-align: top; }
.align-bottom { vertical-align: bottom; }
.align-middle { vertical-align: middle; }
Visibility Classes
Visibility classes control the visibility of elements, depending on the screen size, device orientation, touch screen, or other factors. These can come in handy in responsive designs.
We could have the following classes inside of our media queries:
.hide-on-small { display: none; }
.show-in-large { display: block; }
And in our HTML:
<div class="hide-on-small show-in-large">
<!-- content here... -->
</div>
The above element will be hidden on small screens but will be visible on larger screens.
We can also use these classes to control elements on touch devices:
.touch .show-for-touch { display: none; }
.touch .hide-for-touch { display: inherit; }
In the example above, the .touch
class would come from the classes added to the <html>
element by Modernizr.
A good example of visibility classes are the ones in Foundation and Bootstrap’s responsive-utilities.
Typography
In typography you can create classes for things like font weight and text manipulation, like ellipsis text.
.bold { font-weight: bold; }
.regular { font-weight: normal; }
.italic { font-style: italic; }
.ell {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.break-word { word-wrap: break-word; }
.no-wrap { white-space: nowrap; }
Colors
Every application has different guides and brand rules which we can define in classes that essentially ‘skin’ our interface. This would include text color, backgrounds, and more.
Lets see how this can be translated to code. First let’s define our variables with Sass:
$white : #fff;
$gray : #2c3e50;
$dark-gray : #95a5a6;
$dark : #2c3e50;
$notice : #3498db;
$success : #1abc9c;
$alert : #e74c3c;
Then we define our helper classes, based on the variables:
// Colors
.white { color: $white; }
.gray { color: $gray; }
.dark-gray { color: $dark-gray; }
.notice { color: $notice; }
.success { color: $success; }
.alert { color: $alert; }
// Backgrounds
.white-bg { background-color: $white; }
.gray-bg { background-color: $gray; }
.dark-gray-bg { background-color: $darkgray; }
.notice-bg { background-color: $notice; }
.success-bg { background-color: $success; }
.alert-bg { background-color: $alert; }
Two good examples of using color and background helper classes are found in the Mapbox and the Google Web Starter Kit projects.
Another use case is the notification component. Let’s see how we can style this with background helper classes.
<div class="white p1 mb1 notice-bg">Info</div>
<div class="white p1 mb1 success-bg">Success</div>
<div class="white p1 mb1 alert-bg">Alert</div>
Lists
How many times have you wanted to get rid of the bullets and padding from the ul
element? A class called list-bare
, as used in inuitcss, can do that for you.
.list-bare {
padding: 0;
list-style: none;
}
Borders
Helper classes can be used to add borders to an element, whether for all sides or one side. So your CSS/Sass might look like this:
$border-color: #f2f2f2;
.border-all { border: 1px solid $border-color; }
.border-top { border-top: 1px solid $border-color; }
.border-bottom { border-bottom: 1px solid $border-color; }
.border-right { border-right: 1px solid $border-color; }
.border-left { border-left: 1px solid $border-color; }
Display Values
The following helper classes give us the ability to use the different values for CSS’s display
property:
.inline { display: inline; }
.block { display: block; }
.inline-block { display: inline-block; }
.hide { display: none; }
.flex { display: flex; }
Conclusion
Following this principle of abstraction might be a much different approach from what you are accustomed to when authoring CSS. But based on my experience, and that of others I can say this is a very good approach to consider on your next project.
You can check out all the helper classes from this post in a new library I created called css-helpers.
Relevant Library Links
You can learn from and explore the structure of the following projects:
- Mapbox styleguide – base.css
- Basscss
- Foundation Utility classes
- Bootstrap Helper classes
- Uikit utility classes
Further Reading
Frequently Asked Questions on Using Helper Classes to DRY and Scale CSS
What are the benefits of using CSS helper classes?
CSS helper classes offer numerous benefits. They promote the DRY (Don’t Repeat Yourself) principle, which is a fundamental concept in programming. By using helper classes, you can avoid repeating the same CSS properties and values across your stylesheets. This not only makes your code cleaner and more readable but also reduces the file size, leading to faster load times. Additionally, helper classes can be reused across different elements and components, enhancing the scalability of your CSS code. They also facilitate easier maintenance and updates, as changes only need to be made in one place.
How do I create a CSS helper class?
Creating a CSS helper class is straightforward. You simply define a class in your stylesheet and assign it the desired properties and values. For instance, if you frequently need to center text, you could create a helper class like this:.center-text {
text-align: center;
}
You can then apply this class to any HTML element to center its text.
Can I use multiple helper classes on a single element?
Yes, you can apply multiple helper classes to a single HTML element. This allows you to combine different styles and effects without having to create a separate class for each combination. For example, if you have helper classes for centering text and changing its color, you can use both on the same element like this:<p class="center-text red-text">This is some text.
What is the difference between helper classes and utility classes in CSS?
The terms “helper classes” and “utility classes” are often used interchangeably in the context of CSS. Both refer to classes that serve a specific, single-purpose function. However, some developers make a distinction between the two. In their view, helper classes are more complex and may contain multiple properties, while utility classes are simpler and typically contain only one property.
How can I use helper classes to improve my productivity?
Helper classes can significantly boost your productivity when writing CSS. By encapsulating common styles in reusable classes, you can reduce the amount of code you need to write and make your stylesheets easier to manage. This can save you a lot of time, especially on larger projects. Furthermore, helper classes can help you maintain consistency in your design, as they ensure that the same styles are applied in the same way across different elements and components.
Are there any downsides to using CSS helper classes?
While helper classes offer many benefits, they also have some potential downsides. One of the main criticisms is that they can lead to HTML bloat, as you may end up applying multiple classes to a single element. This can make your HTML code harder to read and maintain. Additionally, over-reliance on helper classes can result in a lack of semantic meaning in your classes, which can make your stylesheets harder to understand for other developers.
Can I use helper classes with CSS preprocessors like Sass or Less?
Yes, you can use helper classes with CSS preprocessors like Sass or Less. In fact, these tools can make it even easier to create and manage helper classes. For instance, Sass allows you to use mixins, which are like helper classes that can accept arguments. This enables you to create more flexible and reusable styles.
How can I use helper classes to scale my CSS code?
Helper classes can play a key role in scaling your CSS code. By encapsulating common styles in reusable classes, you can easily apply these styles across different elements and components. This makes your code more modular and scalable, as you can add, remove, or modify styles without affecting other parts of your code. Furthermore, helper classes can help you maintain consistency in your design as your project grows.
What are some examples of commonly used CSS helper classes?
There are many commonly used CSS helper classes. Some examples include classes for text alignment (e.g., .text-center), display properties (e.g., .d-block), margin and padding (e.g., .m-0 or .p-0), and visibility (e.g., .hidden or .visible). These classes can be used to quickly apply common styles without having to write the same CSS properties and values over and over again.
How can I organize my CSS helper classes?
There are different ways to organize your CSS helper classes. One common approach is to group them by function. For instance, you could have one section of your stylesheet for typography-related classes, another for layout classes, and so on. Another approach is to use a naming convention that indicates the function of each class. For example, Bootstrap uses a naming convention where the first part of the class name indicates the property (e.g., “m” for margin), and the second part indicates the value (e.g., “0” for 0 units). This makes it easy to understand what each class does just by looking at its name.
Ahmad Ajmi is a self-taught front-end developer passionate about the Web, open source, and programming.