How I started thinking about my styles
- Published
If I had received a dollar for each time I intend to write the most maintainable CSS I had ever seen… We’ve all been there as front-end developers, right?
Since I started programming as a kid some years ago, let’s call it the table-layout era, things weren’t that hard. I created a single website with a single stylesheet and when it worked for me, it possibly worked for everybody. For real! Me and my friends were probably the only ones visiting the website anyway. And it was a fun and enjoyable thing to do.
So many years and the possibly the same amount of large projects later. I came to an understanding that writing CSS is possible one of the most difficult things to do in the web wonderland. Sure, naming things is quite hard and cache invalidation even more. But writing a good and maintainable CSS codebase is very hard and it doubles in complexity with every extra developer you need to work with. It even quadruples with every back-end developer who did some very !important styling fixes for his environment.
I got used to it, it seem to be the burden of the job, and thank god we don’t have to do anything for IE6 anymore. But it was that one day that I was wandering through my podcast subscriptions while commuting. It was a episode of the Full Stack Radio where David Hemphill was interviewed about a product he was working on called Beard. For those unaware (like me before hearing about it in the podcast), it is an atomic css framework, or as David calls it “a framework for people with better things to do”. And suddenly it all made sense. Sure, we all know how to do BEM, OOCSS or SMACSS. But somehow these solutions make a better fit for large projects with endless budgets, not for small freelance clients where you need to get the job done within an already tight deadline.
That’s exactly where a framework like Beard is a great fit, but may feel strange the first time you use it. Why? Because we’ve all have learned never do anything with inline styles. But instead of inline styles, you’ll have a lot of helper classes which can be customized for your project with a CSS preprocessor like SASS, or LESS.
With a preprocessor you can even use the helper classes as extends, which seems to be powering the styleguides behind the Marvel. And I must say that I like their fully written helpers somewhat more than the abbreviations used by Beard;
css
I can imagine that for new developers working on a project, the latter is easier to pick-up than an abbreviations and exceptions where abbreviations are overlapping.
And last but not least, it’s not a coincidence that in the React world a lot of great minds are thinking of similar techniques as well.
Should I use it for every future project? Probably! It’s always good to keep experimenting with new ideas and technologies 👍.