P’unk Avenue

View Archive » 04.A

Finding The Right Way To Enjoy Something You Thought You Hated

Ben Rosenbach

An extraorindary South Philadelphian, Ben casts his magic on our code while raising our collective appreciation of fine coffee.


Tue, Oct 7 2014


    • SG Styleguide

About six months ago I found myself with the opportunity to shift some of my development time away from one of our biggest and longest-standing projects and towards some more traditional client development. It was an exciting transition, filled with a handful of new challenges. One of those challenges was dusting off my front-end development skills. I hadn’t been using them much on the project I was working on, and I knew I had a bit of catching up to do.

Most front-end developers have a love/hate relationship with a particular part of front-end development: writing CSS. CSS is how you style the HTML content on the page to look like the designs. I have also had this love/hate relationship, and assumed I always would because it’s a convoluted and complicated part of the development process. Then I caught wind of a new process another team was trying out to transition from design to development on their client sites. Enter the style guide. It’s not a novel concept, but it’s something that a lot of developers might underestimate the value of. The style guide is a single HTML page where every design component can be seen in action. If it’s on the website, it’s in the style guide. I won’t go into too much of the technical details, but here are some of the benefits using a style guide offers:

  • Everything on the website is accounted for in the style guide
  • Collaboration between designer and developer prevents things from being “thrown over the fence”
  • Easier to anticipate moving targets or edge cases
  • Able to think critically about how components should be broken up
  • Front end tests - a place where all your CSS can be seen as “passing” or “failing”
  • Speed up site development - nearly plug and play builds

In addition to using a style guide on my next client site, I had also read up on some critical CSS best practices. I hope I’m not over exaggerating when I say the combination of these two things set me free! I was writing CSS that I was extremely happy with, and that provided a proper structure for preventing future headaches. I never thought I would get to place where writing CSS wouldn’t be frustrating to me, but I had. I always assumed it was an inherent problem with CSS, but it ended up being a problem with my process and my tools.

Suddenly, I was having a blast doing something I thought I’d always be struggling with. The implications were immediately obvious. What else do I hate, or think is broken, that I simply may not have found the right process or toolset for yet? It’s a powerful question, and it’s been seeping into other areas of my life. Areas like my self-management, self-care, and communication have been benefiting from this question. Everything may not have such a polarized change, but I’ve learned that there’s always room for positive change when willing to explore new habits.

For more technical details on style guides and CSS best practices, check out this article on Medium.

blog comments powered by Disqus