Buttons – It is the Little Things…

Bryan was having a discussion yesterday with a customer and explaining some of the behind the scenes work we do, and they were surprised by all the stuff they never see. Also yesterday, we released new buttons. It really was a consolidation project. When you develop software for 10+ years, you have different approaches over time, and to have good software, sometimes you just need rewrite and reorganize.

The benefit of this project is that we cut down our style sheet size by 8 KB. It also helps with consistency for accessibility. Doesn’t sound like a lot, but when your webpages are hit 200 Million+ times per year it adds up. And we are obsessed trying to keep your websites fast. The other benefit is that our developers will be able to be a bit more productive having a single style to maintain. Again, this is all hidden work, but little stuff like this adds up to having a technology service our customers can count on.

We thought it would be fun to share the details from an internal email below for tech geeks:

I am in the process of updating our buttons across the site to a new class structure.They look the same, but have a different structure.

Updated design system documentation on the new syntax.

The new classnames rely on the rsuBtn– prefix as a replacement for btn-[note the double-hyphen as per modifiers in BEM]

Important! Note that the new naming convention relies on a standalone rsuBtn to set shared styling; this is the main benefit of this change.All modifiers exist under the new prefixes, but most be updated to match the new prefix.

Example of a medium-sized primary button using the new classes:<button type=”submit” class=”rsuBtn rsuBtn–primary rsuBtn–md”>Save</button>

The new buttons offer the following benefits:
 ~8 kB of saved CSS compilation, approximately ~10% on most stylesheets
– enforced <button> or <a> elements only; this standardizes accessibility of buttons going forward to get us fully away from span onclicks, which are horrendous for screenreader users
– separate required dynamic styles from static ones that can be shared.
– drop-in replacement from the old one
– BEM syntax- lightweight modifiers / styles [we should be able to add lots of colors without a lot of worry about bloat]
– different naming convention that will allow the homepage to use native Bootstrap in the future (there is currently a conflict with btn-primary).

Note that they are only applicable for <button> or <a> elements only:<button type=”submit”> is the replacement for <input type=”submit”>.<button type=”button” onclick=”…”> is the replacement for <span onclick=”…”>.

These only apply to the “dash buttons”, not circle image buttons, button dropdowns, etc.

Although I am in the process of updating them site-wide, they are available for use going forward.If you are working on new functionality, please use the new classes.I am not removing the old classes immediately, but I will do so sometime next week. (I will probably remove the lesser used ones this week, but leave the common ones for a period of time as to not interfere with pull requests).

Thanks to Darren and Kiesel for listening to me rant about buttons (again..), and for helping me with the new naming convention. And thanks to Stephen who is stuck reviewing my changes.

Leave a Reply

Leave a Reply

%d bloggers like this: