Refining Cart Customization:
February 04, 2016
SASS, BEM, & Low Specificity (v2.0 Code Journal)
We're progressively building a full v2.0 for our frontend shopping cart. In the "v2.0 Code Journal" entries, we'll expose some of our development tools and methods for doing so. Chances are this stuff will be useful to a dev or two out there. :)
Two weeks ago, we discussed how we use Gulp to optimize our frontend workflow. More specifically, we explained how we used four useful Gulp plugins to boost performance, productivity & task automatization. We gave you what I hope was an insightful look at our development methods.
But today we switch things up. Today we talk about how our recent work on Snipcart will facilitate yours.
Current pains with Snipcart's CSS and HTML
Our e-commerce solution offers a wide spectrum of flexibility for web developers. As a result,
we our marketing guy often brags about development freedom. And it's my job to make sure he can keep bragging with confidence.
Now the current version of Snipcart does offer a high level of customization. However, there's a bit too much friction involved in the process. Before refactoring our frontend cart, I identified the areas we needed to improve. Here they are:
- Very high specificity (partially to prevent conflicts)
- No modularity (even if the code is component-based)
- Classic CSS (no variables, one huge file)
- Too many obsolete styles
The result? Customization is hard to maintain. It's also more complex than it should be.
Let's see how using SASS, BEM & low specificity will ease these pains.
SASS is an extension language for CSS. It adds many useful features to classic CSS, like variables, mixins and functions, files inclusion, etc.
First, SASS will help us shatter Snipcart's single monolithic CSS file into smaller stylesheets. Developers will be able to adopt a much more modular approach when customizing their shopping cart.
SASS variables and mixins will also greatly accelerate basic cart customizations. I'll dive deeper into these in the next Code Journal entry. :)
BEM — Block, Element, Modifier — is a frontend methodology. CSS Wizardry published an excellent introduction to BEM a while back. Since their naming convention is close to ours, I'd advise checking it out.
To sum it up: Block is the main component element, Element is a descendant of Block, and Modifier is a different version of a Block or an Element.
Like SASS, BEM will also help us enhance customization modularity. We'll use it as a way to standardize our stylesheets, and make it easier for developers to maintain them through time.
And since we eventually want to open source our stylesheets, BEM will help users better understand their whole structure.
Why low specificity?
Specificity is the weight of a CSS declaration. For instance,
.class has a specificity of 1;
.class .class2, a specificity of 2. Highly specific selectors can easily break the cascade.
We re-wrote our stylesheets to lower their overall specificity. By doing so, they will be far easier to maintain and far more performant. Almost all elements will now share the same low specificity. And developers will have an easier time customizing Snipcart.
Nurturing our developer-first roots
With our brand new methodology, rules, and extension language, we have a cleaner base to handcraft our new CSS and HTML. It'll also help enhance the mobile shopping experience on our platform.
In a sense, this whole frontend refactoring is a statement. What statement, you ask? The same we wrote down 2+ years ago, in our first blog post, The Pledge:
- Deliver a beautiful and easy to integrate shopping cart platform
- Develop user-driven features based on real pains and requirements
- Provide out-of–this-world personalized support and help
- Always offer a developer-oriented product
And it does feel good to ship features and iterations in line with our core values. From the start, we promised to foster developer freedom. The v2.0 of our shopping cart will be a way to make sure we keep that promise.
In March, we'll be rolling out the new version. Nothing flashy will emerge at first: our modal cart will look a bit more flat, and run more smoothly both on mobile & desktop.
But taking its visual and behavioral aspects to whole new levels will be easier than ever. Crafting amazing cart customizations like our friends at Deux Huit Huit did will be much more accessible.
We're excited to see how far developers will push Snipcart.
If you enjoyed this post and found it valuable, please, take a second to share it on Twitter. As always, your thoughts and questions regarding BEM, SASS, low specificity & the upcoming cart v2.0 are welcome in the comments below!