Maintainable CSS & SCSS for Buttons

In CSS and especially in SCSS modular, maintainable and reusable code is to the way forward. If you’re not yet convinced of the benefits yet then it may be time to open up your mind and your code workflow to a new way of doing things.

Well-known developers like Harry Roberts have been pushing the benefits of maintainable code for a while now and it has finally become more mainstream over the last year or so. Check out CSS Guidelines for more information on Harry’s stance towards modular code.

Below are some examples of how to code buttons in CSS, and also SCSS (Sass syntax), for a modular set of styles that are future-proof and maintainable.

You might also like: Modular, Maintainable & Reusable HTML/CSS

---

1.) Separate CSS Classes

This first example uses separate classes so every button has to have .btn applied to it and then the additional class which could be, for example, .large or .green.

<a class="btn" href="#">Button</a>
<a class="btn large" href="#">Button Large</a>

.btn {
	padding:10px 20px;
	display:inline-block;
	border-radius:3px;
	background:#ccc;
	font-size:16px;
	color:#333;
}

.btn.large {
	padding:20px 30px;
	font-size:22px;
}

---

2.) Separate CSS Classes (Again)

The thing I prefer about this method, as opposed to the first one, is that .btn-large is clearly defined as a button however simply using .large is very non-descriptive and could mean the text or the padding but not necessarily both. Remember, your code should be easily readable for future developers that work with your code base.

<a class="btn" href="#">Button</a>
<a class="btn btn-large" href="#">Button Large</a>

.btn {
	padding:10px 20px;
	display:inline-block;
	border-radius:3px;
	background:#ccc;
	font-size:16px;
	color:#333;
}

.btn-large {
	padding:20px 30px;
	font-size:22px;
}

---

3.) Using Sass @extends

The next example uses Sass @extends with only a single class and applies the styling to the button using some Sass magic. What we do here is simply take the styles from .btn and apply them to .btn-large which saves us from having to add .btn to every single button.

<a class="btn" href="#">Button</a>
<a class="btn-large" href="#">Button Large</a>

.btn {
	padding:10px 20px;
	display:inline-block;
	border-radius:3px;
	background:#ccc;
	font-size:16px;
	color:#333;
}

.btn-large {
	padding:20px 30px;
	font-size:22px;
	@extend .btn;
}

You might also like: 8 Handy Extends and Mixins for Sass

---

4.) Using Sass @mixins

This one is useful for larger sites with many different button styles. Here we can use optional parameters for each button style but all are taken from an original button() mixin.

<a class="btn" href="#">Button</a>
<a class="btn-large" href="#">Button Large</a>

The only problem here is that if we want to change the $font-color variable we also have to change the $border-radius and $bg-color variables.

I don’t recommend this method since you end up changing values you shouldn’t have to.

@mixin button($padding:10px 20px, $font-size:16px, $border-radius:3px, $bg-color:#ccc, $font-color:#333) {
	padding:$padding;
	display:inline-block;
	border-radius:$border-radius;
	background:$bg-color;
	font-size:$font-size;
	color:$font-color;
}

.btn {
	@include button;
}

.btn-large {
	@include button(20px 30px, 22px);
}

---

Conclusion

There are many, may different ways of coding up buttons and I’m always looking for ways to make my own code better. I’d love to hear in the comments how you or your team handles maintainable buttons across your projects.

Keep in mind that every ‘solution’ has its drawbacks so I advise testing out each method (as well as making your own) to see which one fits you best. Everyone I know writes their own version of ‘maintainable’ code so just keep that in mind when shopping around for ideas and perfect solutions. There are best practices you should stick to but don’t let that hold you back from always trying to write better code.

Here are some resources you may find valuable:

• Modular CSS naming conventions (Article)
• Modular, Maintainable & Reusable HTML/CSS (Article)
• Naming UI components in OOCSS (Article)