Top 5 C.S.S. Mistakes To Avoid Before You Die
Part of the award-winning “Things to Programming Before You Die” series
I’m basically an expert at California Style Sheets, even if I’m an East Coast developer with back-end development training. I have been doing front-end development for a few minutes, though, and learned a lot in my adventures with styling content for apps in the Cloud. Like most 11x web developers, I was able to avoid making the mistakes 10x developers make when styling their web pages.
Here are the top five mistakes to avoid to save you time and embarrassment when Twitter users view your source because you’re making it really fucking hard to shop for health insurance.
1.) Not being specificitic enough.
First off, let me start by saying that HTML allows you to give your elements IDs and classes, but we use it in C.S.S. so whatever we’re going to call it C.S.S.
“HTML allows you to give your elements IDs and classes, but we use it in C.S.S. so whatever we’re going to call it C.S.S.” -Jenn Schiffer
You should be using IDs for everything, because everything on your page should be unique. Classes imply you have multiple types of that element and therefore your code is redundant. Take some computer science courses if you don’t think redundancy is a Big Ass Deal.
/*** Bad ***/
.pull-quote {
font-style: italic;
}/*** Good ***/
#first-pull-quote-about-pizza-with-sausage {
font-style: italic;
}
2. Not using real world units.
You may find yourself conflicted over the use of px vs pt vs em. Neither are real units that can be applied to real world objects.
What the fuck IS an em, even?
If you are a real programmer, you do everything object-oriented, so you need to keep your units conceptual to real world objects. If your image is three hot dogs laid end-to-end, it needs to be scaled from the actual width of three hot dogs laid end-to-end. It’s simple semantics, stupid.
/*** Bad ***/
img#first-image-of-three-hot-dogs-laid-end-to-end {
width: 50px;
}/*** Good ***/
img#first-image-of-three-hot-dogs-laid-end-to-end {
width: .5threehotdogslaidendtoend;
}
3. Not letting your IDs tell a story.
We are all responsible for building a more semantic Cloud and Web, so it’s important that our code tells the story of what our content is.
Content is not enough and your ID for an element, alone, is not enough. You need to nest IDs to tell the story that you’re trying to tell with your content, even if you don’t use those IDs in your rules or Jarviscripts. If you’re not telling the story, you’re not being accessible, therefore you are breaking the law.
Here’s an example:
/*** Bad ***/
<img src=”hotdogs.bmp” id=”three-hot-dogs-laid-end-to-end” />Why are the hot dogs laid end-to-end? Your user needs more info than your ableist-developer-ass is giving. Add more IDs to finish the story and put spaces between them to show the browser you have more than one, like Sir Tim Berners-Lee taught us all how to do.
/*** Good ***/
<img src=”hotdogs.bmp” id=”three-hot-dogs-laid-end-to-end because-they-fell-that-way after-my-cat-tripped-me” />4. Not letting your C.S.S. breathe.
Hobbyist programmers will suggest you keep all of your C.S.S. rules in the same document, or clustered together in one location. If that part of your cloud server is to fail, though, you would have no styling. This is the exact reason why you should spread your C.S.S. through different documents, in the HTML head elements, and even inline within your HTML document elements. Loosen up that markup belt and watch the oxygen flow through your minimal Swedish design blog template.
5. Not prioritizing your C.S.S. rules.
Just like when it comes to your children, some C.S.S. is more important than the others. Using !important lets the browser know that in case it is ever in a situation where it needs to pick which rule gets to live or not. If you’re not using !important then how is your boss supposed to know that the code you write is important to the project?
Jenn Schiffer is a hobbyist hot dog photographer.
