Write More Boilerplate
A slight rant on the infatuation with frontend frameworks, and a call for more boilerplate code
Frontend web development has become infatuated with frameworks of all kinds. Are they really the cat's meow? That depends on your needs.
It's so much fun to start a new project and get to use that cool new framework everybody's talking about! pic.twitter.com/QMUBQHMxu4— Practical Developer (@ThePracticalDev) April 18, 2016
The problem with (CSS) frameworks
In three bullet points:
- Styles you don't want
- Styles you don't understand
- Styles you don't need
Many, many, many websites use Bootstrap to great effect. Many others are only using Bootstrap for its button, form, and grid styles. And many times, even this is modified through custom styles or drop-in themes found on Bootswatch. What is the point?
Styles you don't want:
Endless typography styles and resets, box-sizing on EVERYTHING, including
Styles you don't understand:
Bootstrap is fairly easy to understand, but even I get confused when attempting to chain
Styles you don't need:
Honestly, who uses
.col-lg-push-x? What about
Do you need all 122KB of Bootstrap CSS on your site? Do you want any of it? Don't get me wrong, Bootstrap is an amazing framework. It is wildly popular, very simple to use, and covers almost everything under the sun. But developers have to realize that ease of use and ease of maintenance are two different things.
The solution: Build and reuse your own modules
Sure, for a full-blown web app with popups, forms, alerts and such, use Bootstrap or Pure or Foundation, etc. But should a website for Joe's Lunchbox look like a CMS backend or a Github static page? Of course not. Build your own modules to meet your needs. Save each one in GistBox, and add on as necessary.
Here's what I use for breadcrumbs, for example:
This is stupidly simple. Change the hover color, change the delimiter, change the font, whatever. This is boilerplate, which means you can change any or all of it without wasting bytes or development time.
The point is that you shouldn't use a shop broom to dust a mantle. Frameworks have their uses, but most cases they should be replaced by small, copy-and-pasted modules customized to fit YOUR needs.
The idea behind writing boilerplate code is to create a module which can be reused with minimal effort. Some good candidates for boilerplate include:
- dropdown menus
- horizontal menus
- pretty much any menu you can think of
- etc, etc
Boilerplate code has to be generic so that it will work for as many use cases as possible without customization. This is why your snippets should be saved separately from production code. Navigating to the source files for http://lonesomewhistle.com/ and copying the CSS for the super-awesome audio player will trip you up because it color scheme does not match the color scheme for http://calvarygospelchurch.com/.
Frameworks are a tool. Nothing more, nothing less. If you need a framework, by all means use a framework. But I posit that most websites can be built faster with less bloat by using boilerplate code customized to match the site.