CSS Beginners Do’s and Dont’s Part 2
Blog » CSS/XHTML » CSS Beginners Do’s and Dont’s Part 2CSS Beginners Do’s and Dont’s Part 2
June 8th, 2009
This is the second part to my previous article “CSS Beginners Do’s and Dont’s Part 1“, if you haven’t checked it out yet now is a good time. In part one, I went over general tips and reminders, in this article I would like to go over more of the technical aspects of CSS.
1. DO use Class/IDs Appropriately (Don’t whore your Class/IDs!)
Beginners typically have the tendency to create a new class or ID for every element on a page. When you end up packing your stylesheet/markup with redundant and unnecessary class/IDs, you start to defeat the purpose of CSS. The beauty of CSS is that it allows you to separate design from markup, so lets keep the class/ID overload to a minimum!
BAD Example
<div id="sidenav" class="left">
<p class="side-heading"><strong class="green">Side Navigation Title</strong></p>
<p class="sidenav-menu1"><a href="#" class="blue-link">Home</a></p>
<p class="sidenav-menu2"><a href="#" class="blue-link">About</a></p>
<p class="sidenav-menu3"><a href="#" class="blue-link">Services</a></p>
<p class="sidenav-menu4"><a href="#" class="blue-link">Portfolio</a></p>
<p class="sidenav-menu5"><a href="#" class="blue-link">Contact</a></p>
</div>
Good Example
<div id="sidenav">
<h2>Side Navigation Title</h2>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
2. DO Keep Your Styles Clean and in Your Stylesheet
I’m sure most of us do this from time to time (I’m guilty of this too!), but don’t leave inline styles on your markup. It’s a sloppy habit and it creates potential inconsistency in the long run. As beginners its very important to get in good habits by taking all styles off of your markup and neatly organize them into your stylesheet.
Bad Example
<h1 style="font-size: 20em; font-weight: normal; font-family: arial; color: red; padding: 10px; margin: 10px;">H1 - Heading</h1>
Good Example
HTML
<h1>H1 - Heading</h1>
CSS
/*------Global Heading Properties------*/
h1 {
font: 20em normal arial;
color: red;
padding: 10px;
margin: 10px;
}
3. DO Learn Tricks and Limit Hacks
There are a lot of tricks out there that can fix cross-browser issues without using any hacks. Do learn to use these instead of hacking up your stylesheet. Below are some great resources to learn tricks you should get very familiar with.
Helpful CSS Resources
- All About Floats
- The CSS Overflow Property
- IE CSS Bugs That’ll Get You Every Time
- Using CSS to Fix Anything: 20+ Common Bugs and Fixes
- 15 CSS Tricks That Must be Learned
4. DO Optimize Your CSS
There are various ways you can optimize your CSS. Check out my previous article
“5 Step CSS Weight Loss Program” to get some ideas and tips on what you can do to avoid stylesheet bloating.
5. DO Learn How to Use Absolute Positioning Properly
I sometimes run into sites where every element on the page is using an absolute positioning. Absolute positioning is powerful and useful but should not be abused in this way. Do learn the correct methods of creating layouts using a combination of floats and block elements, don’t abuse absolute positioning!
Helpful Articles Elsewhere
- 70 Expert Ideas For Better CSS Coding
- 10 HTML Tag Crimes You Really Shouldn’t Commit
- Smashing Magazine Articles – CSS
Similar Posts:
Subscribe via RSS ,by email, or by twitter to get all upcoming
tutorials and articles delivered straight to you.
Bookmark or Share this Post!
Tags: css, For Beginners
This entry was posted on Monday, June 8th, 2009 at 10:17 pm and is filed under CSS/XHTML. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.
Popular Posts
Recent Comments
Nice post. It certainly helps to start learn css the right way.
Both of these articles have been especially helpful. CSS is very valuable once the concepts are understood. Thanks for the tips.
Its helpful, ths for share
Yeah I think that absolute positioning one is a biggie. I find beginners often pick up the opinion somewhere that it is bad to use it, and thus never really understand it’s proper use. I find as I’ve matured as a designer I use it A LOT.
Both articles good like beef noodle!
Learn alot and work more not to suck at CSS – that’s what it is about.
Yeah. I wish I had a resource like this when I was first starting.
This article kept with lots of good and relevant information. This is a good resource for the newcomer to get lots of information from here.Keep up the good work.
very good advices. too bad, that there weren’t such posts 6 or 7 years ago
CSS changed the web design industry in such a dramatic way. Yet you still see people not really using it to its full potential. It’s a tool, sure. But it’s also a mindset, a way of designing.
Great post again! I think you should write more article like that. Thanks a lot!
I’m a newbie with CSS looking to learn. Very helpful. Thanks!
Very informative post. I need to clean up my CSS a bit I think! By the way, your blog has great CSS design. One of my favorites out there. Thanks.
Tanks. Its helpful for beginners.good advoice.
This is some good information that I, too, wish was around when I was learning. Thanks!
Nice information post and it is too helpful for beginner learner of CSS.
Thank you
i would add:
6. DON’T use !important unless you really really have to. then, still don’t.
7. DO learn how cascading and specificity work. if you make a selector too specific, you won’t be able to override it without using !important.
8. DON’T use !important.
Awesome tips!! Really helps out beginners…
Sometimes it’s needed to add classes for navigation elements, because they use different images. But if you may drop legacy browsers, you may use :nth-of-child(n) instead.