Keeping it simple

category: thoughts

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.

Comments & mentions (1)

Ramon 12 May 2014 18:09:35

Well said. I’m an advocate for Pre-processors, but one of my premises is for debs to know CSS before getting into them. Like I said in my slides about pre-processors (http://www.slideshare.net/ramono1/myths-about-css-pre-processors, slide 38).

Leave a comment
Posted a response to this?

This website uses Webmentions. You can manually notify me if you have posted a response, by entering the URL below.