Last week somebody asked what CSS mistakes would make it obvious to the other developers at work that he was a “newbie”. Even though his employer knew that he was learning as he went and was okay with that, he felt like he was sure to make classic beginners mistakes that would make him look dumb.
Which I could totally relate to.
For me, being a beginner at something has always been an exercise in humiliation and frustration. My biggest fear was looking foolish, asking a dumb question, and making beginner mistakes.
So I wrote a little cheat sheet for him of things to look out for when learning to write CSS, not necessarily in order of importance.
Newbie CSS Mistakes
1. Don’t over-specify elements. Let the “cascading” part of CSS do the work. Learn about how to calculate specificity so you can figure out which selector takes precedence.
2. Don’t use the !important declaration to solve hierarchy problems. Using it when targeting ID’s in your markup for styling is a particular headslap- you’re creating markup that can only be used once since you can’t have 2 ID’s with the same name.
3. Not understanding floats and how to use clears. Bonus: get familiar with the Clearfix Hack.
4. Designing for only one browser type. Different browsers use different rendering engines and are rife with inconsistencies and quirks in how they handle CSS declarations. Later on, when you are up to speed with the basics, you can use a css"postprocessor for handling vendor prefixes like Autoprefixer.
Learn: [https://speckyboy.com/cross-browser-css-styling-tips/] https://modernizr.com/docs/#using-modernizr-with-css
5. Overly convoluted CSS structure. Watch out for creating style elements and classes for uncommonly used components and use IDs only when really warranted or needed.
Make sure your indenting style is consistent all the way through your files. This will make your code easier to understand when (not if) you have to come back and change something.
6. Avoid Frameworks like Bootstrap, 960 Grid System, Skeleton and Foundation. Learn and master the basics of CSS first. You can worry about streamlining your workflow later on. But if you go around name-dropping buzzwords like SASS, Semantic UI and Susy without knowing how to design a site or app from scratch, you will regret it.
7. Not using an external style sheet. In-line styling or internal is ok for learning the first baby steps of CSS or maybe even for rapid prototyping. But it is also important to learn about separating your presentation (CSS) and your content (HTML).
8. Divs for no reason. This is surprisingly common even with more experienced developers. Do you really that sub-div inside a div inside a container inside a wrapper?
Like I said, my biggest fear used to be looking dumb at something I was starting to learn.
So how did I learn to not be afraid of being laughed at?
Or at least it used to be, until I began to learn Aikido. Usually I able to guesstimate or bluff my way through the first introductory lessons of something until I start to get the hang of it. God forbid someone should laugh at me.
But with something physical like Aikido, that is just not an option. Either you are able to do a move or not. Luckily the first thing you learn, as in many martial arts, is how to fall down.
But the best thing I learned was to laugh at myself. Okay, I totally suck at this, I thought. So what? It’s normal. If you knew how to do it already, you wouldn’t be taking lessons. Plenty of time for refinement and grace in good time.
And that brings me to the final tip:
9. The worst CSS (or any) rookie mistake you can make is to be dishonest about your skill set when learning job skills. Both for you and your employer, be as honest as possible. It will make learning so much easier.