Refactoring a Webflow site’s CSS
Hi all! I’ve decided it’s time to refactor the CSS to a site I made with Webflow.
Currently, I’ve named the elements using BEM: e.g. there’ll be a class like “.hero_image” that defines things broadly, and then a subclass/“.hero_image .__contact” that defines things more specifically.
I’m finding that, over 2 years, that this has led to a lot of DRY (don’t repeat yourself) violations. Currently, there are a lot of aspects like padding, font color, &c., that are consistent across elements that I think could be made their own class and applied where needed.
Are there recommended resources out there for how to carry out a CSS refactor and what to look for in terms of anti-patterns/bad practices?
Note 1: I’m happy to share snippets of the CSS here as needed.
Note 2: I’m considering moving the site to astro.js, in which case I’d likely use sass to create the css, and I’d also be free to use var and similar CSS features currently not in Webflow. For the time being, however, the site will remain in Webflow.
Thanks!
0 Replies