Like many others, my portfolio site was born out of necessity. During the second half of 2019 I was preparing to embark on a job search, but I felt I couldn't begin looking at job listings before having a portfolio that was ready to send at a moment's notice. I turned to Webflow, got my bearings with a no-code website builder, and began writing the copy and creating visual assets for the projects I wanted to showcase. The time pressure I was under ended up being helpful for making decisions on superficial stuff, like how I'd style the website. I decided on something simple: “dark mode” with pink accents. Dark mode because a lot of the imagery I was creating was quite dark, and I preferred the edges to blend into the background. Plus it's trendy. Pink accents, because I disliked pink as a child for no good reason, so I wanted to try using it.
As I was building the site it became a bit of a mess under the hood. I was working so quickly to just get something up and running that I wasn't giving a lot of thought to how I was naming my CSS classes. I was also really determined to just get it done; not once did I backtrack on the visual style or structure of the site. It took me about a month to get to a publish-ready state, and four months later I accepted a job offer. My portfolio site, although not perfect, had served its purpose.
After the first few weeks into that new job I went back to update the blurb on the home page of my site. But coming back to see the messy styles that I stitched everything together with made me cringe. I had gone into all this effort to organize my job-search process, but my styles were all over the place. I decided to scrap everything and rebuild the site with the same content and the same look and feel, but this time using BEM naming conventions. B-E-M stands for "Block", "Element", and "Modifier." Blocks being big chunks like “navigation” or “footer” or “case study introduction.” Elements are the pieces that make up those blocks. And modifiers let you make adjustments to an element when it’s base state isn’t enough (like maybe all your text Elements are colored black, but sometimes you need green text. That’s a modifier). My goal was to move away from having all these big, poorly named CSS classes that had a lot of declarations within them, to having more classes with fewer declarations. The latter would be easier for me to update because instead of tinkering with a really complicated class that was only applied to one or two elements, I would be able to stack and remove a bunch of simpler classes that we’re already built. The idea reminds me of atomic design, and how I set up symbols in Sketch. Here's an example:
You can see above how much more flexible the smaller classes in the second snippet are compared to the big one in the first. Without looking at their declarations, the class names themselves give away how rigid and flexible they are. Even if the declarations in "Project name link" also work for a "Merchandise Item Title", that class name would be confusing to place anywhere except a project name link. But those smaller classes, they’re named in a way that allows them to be attached to anything regardless of that elements function!
I went from having 165 classes to 181. That's only a difference of 16, which surprised me—I thought the number would increase by like 25%. Plus, some of these additional classes are specific to the Style Guide page I'm maintaining, meaning they’re not on any public facing page.
If you peek behind the curtain you’ll probably see what I have isn’t perfect, but I’m proud of the progress I’ve made. I could do a few more rounds of refinement on my stiles to make it even more efficient, and I suspect the going will be much easier from here forward since I’ve built a strong foundation for myself.
If you'd like to be notified of when I publish a new blog post, joining my newsletter is a great way to keep up. My readers enjoy bonus behind-the-scenes insights on every post!
