I’m always learning new ways to make better websites that load faster, which as regular readers of my blog will know is very important to the success of any website.
When you’re running a small business, it can be difficult to find the time for training. However, earlier this year I chose to make a conscious effort to sometimes step back from the constant juggling and review how I write code.
Learning more efficient ways of writing CSS
I’ve been using SASS (Syntactically awesome style sheets) to write CSS for maybe eight years, and I love it. It’s organised, fast to write, and easy to read, and compiles all your individual files into a single compressed file which loads super quickly.
On reflection, I discovered some bad habits I’d fallen into, such as over-nesting my CSS selectors. What this means is that while nesting is really easy to read within the source SASS file, the compiled CSS file can get bloated and can result in clashes between selectors. Which is not a massive issue on small websites (even for a perfectionist like me), however for larger scale projects I wanted to look at new ways of writing CSS which could scale more easily.
So this year I’ve moved towards using the BEM (Block Element Modifier) methodology. This works around individual elements having a descriptive class rather than inheriting styles from their parent block.
When I follow these rules, CSS selectors stay at one or two layers deep, which reduces the risk of style clashes. This is closer to writing CSS without SASS, although I do still write it in SASS for the variables, mixins and compression. It feels more structured and does make me focus more on how I write both my HTML and CSS in a more methodical way.
I’ve rolled out this way of writing CSS on several sites this year and have subsequently noticed a reduction in the size of my master stylesheets.
For example, applying this to PaulJardine.co.uk cut the size of the master style.css file to a mere 19kb when compressed which means my website loads faster than ever!
To add context to why this matters, I also had a look at demo page of the Divi WordPress theme which totaled over 3.7mb worth of CSS files and a considerable addition to the page load time.
To learn more check out BEM 101 on CSS Tricks.
Whilst jQuery is moderately easy to write, this comes at the cost of having to load in the additional jQuery library files which ultimately risk bloating your web page.
Building Shopify eCommerce websites
I’ve built a lot of eCommerce websites over the past five years. As I tend to build websites using WordPress, I’ve always used its brilliant extension WooCommerce when developing online shops.
Recently I’ve had a few enquiries for Shopify websites, so I’ve begun learning how to build Shopify themes from scratch. Again, I found a great Shopify Theme Development course on Superhi and I’m enjoying working with Shopify’s themekit and its programming language Liquid.
Working with WooCommerce has the benefit of accessing all of the other WordPress features, as most of the eCommerce sites I’ve built also have additional functionality such as appointment booking systems or events listings. However, for flatout shops, Shopify looks like a decent option and I look forward to using it for client work in the future.
Learning new skills over the past few months has been rewarding in a number of ways.
It has been fun to apply myself in this way, taking in new information, making sense of it and then applying it practically. It’s given me the tools to improve my own site, the performance of which I’m mildly obsessive about. And, most importantly, it has expanded the options I can offer clients: more platforms, different solutions, and – as always – more speed!
Get helpful advice and articles into your inbox once per month with the PJWD newsletter.