Reader Patrick, an IT Software Architect, wrote in with a question I though was really interesting:
For my company, I am developing a scheme where our developers can check which level for a specific knowledge area they are on. For most areas we set 5 levels. One of these areas of knowledge (and skills) is CSS. Do you know some good online material that describe the knowledge levels in CSS? And preferably with examples so the developer himself can estimate if he/she is on that level?
A little searching around the web on this subject will bring up an article by Emil Stenström of Friendly Bit. This was an interesting take on things, but in this article Levels 1-4 are pretty much beginner and 6 is super-star. That leaves the rest of the CSS developing world all at a level 5.
I think if we all put our minds together, we can come up with a better system. My first thought is that if you don’t even know what CSS is, you don’t need a rating so we don’t need to take up a whole level just for that. We can designate Level 1 for beginner and Level 5 for a master. Now now we just need to break down exactly what makes up these knowledge levels and try to break up the remaining three into skills that make sense.
THIS IS JUST A ROUGH DRAFT TO GET STARTED. I’ll be taking whatever input anyone has on this and then developing it a bit further into a more fleshed out rating system. Then maybe I’ll put it up as a poll, that might be fun =).
- Sure I’ve heard of CSS, it’s used in web design.
- I have downloaded and used a CSS template before, I even figured out how to put our logo in it.
- I have poked around in CSS files making small changes like changing colors.
- I know that CSS stands for Cascading Style Sheets.
- It is used by web designers to style web pages with the purpose of keeping design and content separate.
- I have made extensive modifications to a CSS template.
- I have used a WYSIWYG editor to create CSS web page before.
- I have designed a reasonably complex website from scratch using only CSS for layout.
- I have a solid understanding of the structure of CSS, the CSS box model and CSS positioning.
- I have a basic understanding that different browsers render some CSS differently and that needs to be accounted for and tested.
- I have a growing collection of CSS resources to draw from.
- I have designed and been involved with the design of a large number CSS based websites.
- I am completely comfortable writing and editing CSS and feel like I could tackle any design idea.
- I have a solid understanding of cross-browser CSS. I know and have tried some CSS hacks and understand the advantages and disadvantages of using them.
- I can troubleshoot CSS quickly and efficiently.
- I write CSS mostly by hand and I have a great collection of tools and resources at my disposal for inspiration, debugging or reference.
- I have my own little CSS framework I start with.
- I have a complete working knowledge of all things CSS.
- I wake up in the middle of the night on weekends and jump over my computer to code an awesome CSS example my brain just dreamed up and then post it to my blog… which is about CSS. (kidding on this one, I’m not sure how to describe Level 5.)
So what do you think? What should we change? Can we make this into like a Mini Quiz somehow? Should there be more than 5 levels? Less?
I like how it looks so far, I think I am at level 3. Time to grind my way up to 5…
I would be about a Level 4.8. As such, I think there needs to be a level between 4 and 5. I’m a CSS nerd, but I don’t blog about CSS. It is a tool. I don’t blog about my hammers when I’m finishing my basement – I blog about the cabinets and home theater and what a pain drop ceilings are to install properly.
The real killer app would be a test that would accurately assess a user’s knowledge. That would be awesome when hiring a new employee or subcontractor. I’ve taken more than one hand-coded test to demonstrate proficiency to prospective employers, but the ability to customize a standardized test for applicants would be AWESOME. I’ll get right on it after the basement is finished…
I’m between 3&4, maybe 3.6, so maybe there could be one more level between 3&4 and between 4&5 for people who make fast progress in there css-skills and knowledge.
Thanks for your howtos again and again! They all would fill a whole book in a few month ;)
Greetings from Germany
Max
The difference between 3 and 4 may be a bit too drastic. Maybe “I have designed and been involved with the design of a large number CSS based websites.” Needs to be moved to 5 with something along the lines of “I have designed and been involved with the design of a several CSS based websites.” instead. I think I get where you are going with the difference between one and multiple sites but there seems to be a middle ground there somewhere.
How about throwing in something along the lines of “I have transitioned a site from using inline style to using style sheets.” Maybe throw it in under 2 to mix in a little application with the theory.
After a couple years taking Photoshop PSD’s and turning them into XHTML code, I can honestly say I’m at about 4.5 – 5 level. CSS isn’t an extremely difficult language — it’s pretty basic. I probably just feel that way because I’m trying to change the world with PHP every day…
This is a killer idea. I imagine I’d be a 3 – 3.5. In Level 4 you suggest, “I can troubleshoot CSS quickly and efficiently.” That seems a little subjective. How do you rate speed and/or efficiency? I’ve been hand coding CSS from scratch for a little over a year. I can accomplish most things I want to accomplish, but it can sometimes take awhile (i.e. days). I know I need to be faster than that, but I have no idea what I should be aiming for. I can look at exquisitely designed sites all day and learn a lot about technique, but there is never any indication of how long someone spent actually putting that site together. This is probably my biggest area of concern when I consider future job opportunities. I just recently discovered this site, by the way, and I added it to my feed immediately. Keep up the good work!
Hej Chris,
I am impressed by your analytic skills, this segmentation is much better, and realistic than in the suggested document. Thank you.
I guess it’s a mix of technical knowledge, understanding the CSS model, working experience, cross-browser awareness, frameworks etcetera.
Because I mainly develop intranet applications my cross browser awareness is not so great, so I am between 3 and 4.
For Level 5, maybe you can add, “Sometimes, I take a peek at CSS3 drafts and wish that they can be finalized and implemented into all browsers right away!”.
yeah im clueless on what to do about 5.
im a 4 unless 5 is figured out. seems like 4 is so close to 5 im not sure what constitutes as a master unless it was somethin like “ive done 100+ sites in csss, i give siminars, ive taught classes, i have a blog, i wrote a css book, im on the w3c css team” haha. somethin ridiculous like that.
right now 5 just seems pretty much like 4. im for sure a 4 but i could sneak my way into 5 and nobody would know really.
if youre gonna say master its gotta be out of reach for people like me bc im certainly no master but i definitely know what im doing.
as far as rating speed and efficiency i dont see that being a problem especially at 4 bc if youre doing freelance for example speed is a big part of that game. clients want thier stuff fast. if you cant trouble shoot your site fast then youre going to run into problems. i dont think you have to specify what that speed actually consists of. bc css isnt rocket science and its pretty straight forward, if my site is messing up in the sidebar, i obviously know its something in the side bar. then i quicky analise how its behaving and i offer my solution in code format pretty fast. around the office im often asked to fix others projects once theyve been frustrated for to long and 8 out of 10 i sit down and its done in 5 to 10 mins tops.
anyway. i dig the test. i think 5 needs to be much harder to get to though
my last suggestion is that i think the waking up in the night to write down a quick code is actually more common in the 3 area bc you understand it finally and all the ideas of what is possible are rushing through your head and its new. i would expect the vets are equally excited but they dont dream about it in the same manner and probably just execute a lot better. even if my analysis isnt correct im not sure dreaming and waking up to write it would just apply to the higher level.
Whoa I though I was a total CSS n00b but according to this I’m definitely 4. This is so cool.
I think one of the consensuses we have right now is that there needs to be a level in between 4 and 5 and potentially one between 3 and 4. I have no particular problem with expanding the ratings out a bit if there is a good reason for it.
One question I have is how to handle things like “I have designed a large number of CSS websites…” language. Should there be specific numbers for those? I leaned away from that at first, since it’s kind of arbitrary. I feel like you could be great at CSS and have only worked on 5 sites in your life or be terrible at it and have worked on dozens…
I’m also tempted to mention specifics in different levels. Like pseduo classes, attribute selectors, etc.
Nice idea! I’d say I’m between 3 and 4 somewhere. Think the only thing stopping me from being a 4 is:
“I can troubleshoot CSS quickly and efficiently.”
Sometimes I can sit for hours pondering why I’ve got an inconsistency between IE and Firefox and how to fix it, but sometimes it can be real quick
Psuedo classes and pseudo selectors, in my opinion, need to be at a 4 / 5 level. Unfortunately, IE6 sandbags on those so most developers can’t necessarily use them for core functionality. What I did with my employer’s site is use CSS pseudo’s coupled with some slick MooTools javascript.
I guess my point is that since most CSS pseudo’s aren’t completely usable in production, they need to be at a pretty high level.
It’s amazing how intertwined CSS and javascript are becoming….all thanks to IE.
I’m a 4.5. I think 5 needs to be alot higher, as others have said. the steps should grow in a exponentialy not evenly.
this would be my list
1: knows what CSS is. uses it for some text stylings. and maybe background colours and borders. tables for positioning (alot of back-end programmers seem to be here)
2: basic understanding of concepts related to positioning. (maybe not float). can read a ‘4’s CSS file and kind-of understand what’s going on (a nice tidy 4 anyway) uses hacks when something doesnt work, rather than trying to find the problem and work around. reverts to tables when things get too hard.
3: knowledge and implementation of graceful degredation/progressive enhancement, mostly gets the concepts (positioning, boxmodel, floats, dom, specificity)
4: following browser progress, and knowing where every browser is at along the selectors/properties/etc, and all the gotchas and inconsistencies, doesnt need to test so much because they know what each browser does with their code, completely gets the concepts
5: people whos names most css geeks will recognise. Zeldman, Jonothan Snook, Andy Clarke, Eric Meyer… etc (oh to be a geek celebrity, you’re treated as a god by a few and you still have your privacy.)
I don’t think having a blog should be a critera. maybe extra credit. some people just aren’t writers, and anyone at any level can have a blog about CSS, ive come across some that were level 2, and were mostly complaints.
and what’s all this about tools and frameworks? my framework is eric meyers reset. my tool is a syntax colouring text editor – possibly with autocomplete cos im lazy :P (I still havent picked between smultron, coda, dreamweaver, and textmate).
note: a customised eric meyer reset. quite customised. but still just a reset.
To me, this has nothing to do with actually building a site using CSS. I would adjust some of the wording and drop the word ‘design,’ perhaps replace it with ‘building’ or ‘developing.’
Another thing I just noticed, under #4 it says “I write CSS mostly by hand…,” I would hope by that point you are only doing handcoding. Maybe under #3 you are starting to do more handcoding and less WYSIWYG. Just my two cents…
I think I’m a 4. I once dreamed I was coding css, how would that rate?
@ Daniel….customized meyers reset? Care to share with the class?
Despite blogging occasionally about CSS, I don’t consider myself a 5 yet. 4.5?
Roberto, dreaming about CSS is a bad sign. I don’t think there’s a twelve step program for that sort of addiction yet.
In the spirit of full disclosure, I’ve dreamed about CSS too. It was something very surreal about walking through a forest, trying to change the CSS of trees. I figured it was a sign to take a few days off.
Great idea!
I, too, would argue that the jump between steps 3 & 4 is a little too great. I feel there’s a significant difference between having designed a single site using CSS and being able to implement any ol’ design a non-web-savvy graphic designer might throw your way.
Great follow-up Chris! My old article really needed something better. I would add: “I have found, fixed, and documented a couple of cross browser bugs myself” to the last level.
(Yeah, I have to brag too, I would call myself level 5 :)
It’s unfortunate that we think in base-10 because so many lists rating systems have 5 or 10 points. Just imagine, if we converted to hexadecimal, you could have 8 points an no one would blink an eye! If this were a base-16 list, I would be a Level 10h, but I guess my closest approximation would put me very close to 5.
Im about a 4 and close to a 5 I would say!
Its a good idea! Like most comments, it still could do with a bit of work but a very very good idea!
I would be almost a 4. This is a good rating system so far. :)
Very well thought out and categorized IMO. I created a code pen so we this rating and other skills to our own sites. http://codepen.io/nickspiel/pen/Eqfyx/ Would love some feedback on this too.