Don't like this style? Click here to change it! blue.css

Class 10: Principles of Great Code and CSS Preprocessors (by way of Stylus)

One of the main goals of this course is to look at the principles of good software engineering and teach them in the context of visual web design. That is a new (in 2016) idea which is powerful and needs students like you to spread. Here is a list, "Principles of Good Programming", which I am stealing from Christopher Diggins but they are all well-known amongst good developers:

The heart of this course

Typically CSS for a project is hacked together. Also JavaScript is so forgiving and simple that things can just work and ignore almost all of these principles. What does it mean to to "minimize coupling" for a CSS design? If you were able to just get your JS code working did you bother to go back and start applying the single responsibility principle?

Reflection Task 1: Which of these did you violate in the projects you turned in yesterday? If I were to ask you to make major changes to the heart of your game how little could you get away with. Make a text file with your answers, including most honored principles and least honored principles for project 2.

Reflection Task 2: How did your CSS project violate these principles? Which of these did you try to consider in your CSS? Which did you least consider? Add this to your text file and email me the reflections for both projects in a single email to .


The SMACSS system (the first book in our list of books) is a loose set of guidelines which encourage you to rethink your CSS rules in a more modular and well-engineered way. Specifically he encourages classifying/categorizing your rules into five categories. Then use a naming convention to make it clear what category your rule is:

I'm not looking to dogmatically assert these rules on you, but I do want you to have some structure to your rules. Also you should think about them a little differently from the perpective of the above principles.

Refactor Task 3: Head to the CSS file for your first project. How are your CSS rules grouped? (My guess is that many are based around the particular elements they are targeting.) Try to pick a couple of rules and refactor them into base, layout, module, and state rules. How many classes did you have to add to the HTML element to get it back to looking correct?

SMACSS from the source Task 4: Head to a page of the SMACSS book and inspect his source and classes. Find his modules, look at his CSS source, see how fine-grained his philosophy is.

SMACSS in the Wild Task 5: Head to and inspect his source and classes. This guy has gone on record as a SMACSS promoter so let's see how his classes look and if the rulesets are reusable.

CSS Preprocessors

I now want to show you some of the amazing powers possible with a CSS Preprocessor and also warn you to only use these when they are absolutely needed. There are two main reasons for this:

So why learn these things?

The benefits are this (besides less verbose code):

Stylus as an example

I like Stylus because it ships with npm and I like Node more than Rails (SASS ships with gem). You can try other preprocessors on your own and play to your heart's content.

Hello Stylus Task 6: Head to Codepen. In the CSS gear icon select the "Stylus" preprocessor. Now use the docs to make a horizontal nav bar.

Stylus Level 2 Task 7: Now split into 5 groups. Each group select one of the bullet points from my list of awesome things about Stylus. Master it, make a sample, share it in chat, present to us what you did.