OOCSS can be written in a semantic or non-semantic way, it is up to you to create modules likeerrorMod
rather thanbigRedModule
. I’ve chosen class names with a few goals in mind (in no particular order).
- Brevity – every byte counts, so I kept classes as short as possible
- Clarity – expected behavior/style should be immediately obvious
- Semantic – what an object is matters more than what it looks like. How will it be used in the site?
- Generic – the name should be true for most sites. Overly specific names reduce the number of use cases or cause semantic classes to be used in a non-semantic way.
The code and docs are a framework, an example of OOCSS. I can’t predict what you are going to put in leftCol. I could call it navigation, but that may not be true for your site. Sometimes these important goals are in opposition to one another. In those cases I’ve fallen back on pragmatism and made a judgement call. Nothing can replace a clever developer making the right choice in a given situation.
- Screen – Different views might be provided by mobile or print stylesheets, however they override the default screen view, so the classes chosen are screen specific when there was a conflict. This simplifies development.
The fifth point “Screen” is what I still don’t fully understand.
If it is context, is this still relevant now with Responsive Web Design? Or should we update this to read “View” or “Context”. If you are using a Mobile First approach, you may vary well author your styles with an initial context of a handheld device and then override them with desktop styles.
If it including the intended Screen as a reference within the class name, then maybe we should clarify this point on the FAQ.
I just want to clarify this particular point so that I can present the information accurately.
Thanks!
—Leban