CSS Beginners Do's and Dont's

Well since today this morning I've been going around online looking for new things to learn to implement on my designs. Luckily, I was in twitter and found an account that had posted some sites with tutorials on JQuery and CSS.

I found this neat little website which had a LOT of great information, specially an 'Advice' section for CSS beginners with two great posts!

I thought I'd share;
http://www.sohtanaka.com/web-design/css-beginners-dos-and-donts-part-1/
http://www.sohtanaka.com/web-design/css-beginners-do’s-and-dont’s-part-2/

The website information on CSS and JQuery tips and Tricks is amazing and very interesting. I've spent the whole day reading! I can't do anything else anyways xD

 

I wonder how many of these rules I break every day?

 

Me too. Probably some they don't even list.

 

Haha, I know I break a lot of those rules, I'm a rebel anyways!

But I'm starting to dive in coding a template a little more and clean my CSS.

 

So i just read these "articles" and the first one only had one actual tip in it to do cross browser checks.... :frown:

The second article however, all the tips were actually tips regarding CSS :devil:

 

** bookmarked **

 

Thanks FMB!

I found another 'beginner' CSS site with tips for the absolute beginning of web design with CSS. Here's that link....

#58: HTML & CSS – The VERY Basics | CSS-Tricks

 

Nice, hadn't heard about CSS sprites yet

 

Man! I would watch it if I could. But my connection is the crappiest E V E R !

 

Very basic articles in my opinion. Though I guess they are for the very very beginning before you even know what CSS is really.

However I have to disagree with the classes and ID tip. This one:

It just needs to be reworked some. First Classes and IDs are not interchangeable as they suggest. They represent two different types of selectors with different functions.

IDs are for sectioning your site (header, footer, sidebar, article, comments, etc...). There should only be one of each ID per page. Shouldn't be hard to misuse since only one element of each of these should be on the page. e.g. <h1 id="pagetitle">

Classes are for styling your site and they are designed to be overloaded. Some of the best CSS techniques comes from overloading CSS classes. I'll agree they don't need to be on every element but they shouldn't be relegated to containers either. Their example should talk about this and give proper examples of overloading if they truly want to provide worthwhile content.

So I am not saying you need a class on every element but imagine their example with a class="current" on their sidebar navigation. A great way to provide visual clues to end users.

 

I always looked at "overloading classes" as preparing for the future. What if six months from now you realize you need to emphasize a particular area of your web page? If there's already a class in the HTML, all you have to do is add a new definition in the stylesheet. If not, you have to go in and add the class to your markup on every page. (Mind you, I wouldn't make a class for every little list element. But definitely every list.)