Keeping it simple

When trying to improve front-end skills, we should improve our knowledge of HTML, CSS and JavaScript first and our knowledge of specific tools later.

Most of the web is written in three simple yet powerful languages: HTML, CSS and JavaScript. Terminology in job ads and portfolios comprises a lot more: LESS, Sass, grunt, Foundation, Bootstrap, jQuery and the like. They are mentioned alongside the big three, but they really are quite different. The former are the foundation of the web, the latter are ‘just’ tools to do stuff with them. Tools that have their merits, surely. But the only thing that constrains how effective one can use front-end tooling, is how effective one can use HTML, CSS and JavaScript.

An example: CSS preprocessors, like Sass en LESS. They can be incredibly useful and powerful tools for writing CSS, but they require knowledge of how box models, positioning, inheritance and specificity work. Limited understanding of these things can makes things worse if applied through a preprocessor (for instance, unintended nesting). Preprocessors provide power, but it is a kind of power that should be used wisely.

Bower is another example: it can help manage dependencies, and makes it very easy to add new dependencies. This may sound like an advantage, but it makes it too easy to bloat a codebase and complicate a project too soon. Whilst it was easy to add a CSS library through Bower, it is now hard to manage <button> styles as the CSS library does overly specific styling that is hard to override.

Tools like preprocessors and package managers have their merits, but to become a better front-end developer, one should focus on HTML, CSS and JavaScript.