Chris Webb

Front-end Engineer

Page 4

OOCSS & CSS Preprocessors (pt.2)

This post is a follow up to 2 prior articles: Scalable and Maintainable CSS Approaches and The Relationship Between OOCSS and CSS Preprocessors. As such, I assume some knowledge of both object-oriented CSS and processors such as SASS, LESS and Stylus. The code examples shown in this post reflect my preference for SASS but the concepts are applicable to any preprocessor.

 Guidelines for using a CSS preprocessor responsibly within an OOCSS context.

I ended pt.1 of this post by saying:

The goal is clean, scalable and maintainable CSS. Object-oriented CSS is an approach and methodology used to achieve the goal while a preprocessor is a tool to support the system.

As with any tool, CSS preprocessors need to be used thoughtfully. Without a thoughtful approach, it is easy to produce CSS that is deeply nested and highly repetitious. While repetitious CSS can feel easier to maintain with a...

Continue reading →

OOCSS & CSS Preprocessors (pt.1)

 The relationship between OOCSS and
CSS preprocessors

Recently I wrote a post (Scalable and maintainable CSS architecture) discussing object oriented CSS and Jonathan Snook’s SMACSS. There ensued a
conversation thread on Hacker News questioning whether OOCSS was really necessary given the existence of CSS preprocessors such as SASS and LESS. As a result of the conversation and as a supporter of preprocessors, I thought it would be worth writing a follow-up exploring OOCSS and preprocessors.

I’ve broken this into 2 parts. In part 1, I briefly explain and define how I view the relationship between preprocessors and OOCSS. In part 2, I will dive into the practicalities of using preprocessors and OOCSS together.

 OOCSS and CSS preprocessors solve
different problems

At their core, I believe that OOCSS and CSS preprocessors solve different problems. Preprocessors extend the CSS language...

Continue reading →

How to gain deep programming knowledge

It’s relatively easy to gain adequate knowledge of many topics. The Internet is full of quick tutorials and introductions. Want to learn CSS, there’s a tutorial for that.

I once had a job interview for front end developer at a very well-known company. During the interview I had to solve in-depth code problems without the computer. It wasn’t enough to solve the problem, I had to explain why the solution was best; backing it up with an explanation of how browser engines rendered CSS.

Deep knowledge involves solving problems but also knowing and articulating why the solution works. I didn’t get the job, but I learned something from the interview. I began the process of trying to articulate how and why code works.

Making the jump from knowing a solution will work, to articulating how and why it works in detail often requires studying and experimenting. It requires a depth of knowledge.


Continue reading →