If you work on the front-end of a site in any capacity – be it for a plugin, a theme, or even something outside of WordPress – you’re likely working with minification tools.
The benefits are obvious, right?
- it lessens the payload,
- it allows us to focus on development on our local environments
But one of the features that come with working with these technologies and that’s the ability to generate source maps.
And this raises a question (or maybe two): What are source maps? And are they even needed?
You can claim it’s late to the game to talk about this, but there are always people entering the industry that may not know this material.
So why not cover it?
I mean, yeah, CSS is part of the deal as is HTML, but it’s expected these days, right?
So if there was ever a quick tip for me to offer regarding CSS, this is it (though maybe I should write more?). It’s hard when Chris does such an awesome job running CSS Tricks, but I digress.
Anyway, here’s the problem and the solution.
When it comes to the various CSS preprocessors that are available today, I think one of the dangers that we – as developers – face is using certain features that were not previously possible in vanilla CSS as a sort of crutch.
By that, I mean that I think that we have a tendency to fall back on things that we’re used to in our server-side environments as opposed to practices that are more preferential on the client side.
For example, I there are things that we used to do – or should be doing – with class names as opposed to mixins, but may not end up falling back to using mixins as opposed to more general classnames.
In software development, there’s this set of principles called the SOLID principles. As with most things in computer science, it’s yet another acronym in which each letter stands for the following:
- Liskov Substitution
- Interface Segregation
- Dependency Inversion
Though these ideas are geared towards software engineering and object-oriented design, there’s one principle that I think is relevant to front-end web development (well, actually a few but I digress for now).
Specifically, I think the idea of the single-responsibility principle is applicable to CSS – namely, within the popular LESS and Sass preprocessors.