CSS Beginners Do’s and Dont’s Part 1
Blog » Articles » CSS Beginners Do’s and Dont’s Part 1CSS Beginners Do’s and Dont’s Part 1
April 27th, 2009
As I mentor some friends who’s learning CSS, I tend to repeat myself when asked for some advice. Here are 5 things that I would recommend to better yourself as a designer and developer.
1. DO Crossbrowser Check Often (Very Often!)
There have been many incidents where someone asks for help regarding a crossbrowser bug and it ends up they didn’t bother crossbrowser testing until the end of the project. My rule of thumb is for every section of the website (header, side column, content, etc), check all of your major browsers.
DON’T move on until its resolved (unless you are pressed for time). When you build on top of an existing bug, it will be time consuming to go back and undo everything to fix or just to even investigate the issue. For us designers/developers, time is money, so let’s make sure we catch and terminate the bugs at an early stage.
Here are some articles I’ve written regarding this topic:
- Cross Browser CSS Fixes, Tools, and Hacks
- Debugging CSS – The Plan of Attack
- Beginner’s Checklist Before Debugging CSS
2. DO Aim for Perfection
Clean code and precision in your code makes life easier on everyone around you. Some people call it being anal, but its just doing your job to the best of your abilities. You don’t want someone painting your house spilling paint all over the place right?
DON’T get used to sloppy coding habits. Its easier to be lazy and leave sloppy code around, but doing so will only bloat your code and give you a headache in the long run. Read up on this article – “12 Principles For Keeping Your Code Clean” for good coding habits.
3. DO Subscribe to Blogs and Resources
One of the things I tell many novice designers/developers is to subscribe to designers/developers that you admire. 90% of the knowledge I have now is from reading blogs and articles online. If you are new to RSS Feeds, check out my previous article “Why Designers Should Subscribe to RSS Feeds“.
DON’T live in a bubble. Seek out new information and trends!
4. DO Ask Questions on Blogs & Forums
I never really took advantage of this when I was starting out but now a days there are plenty of strong communities that are willing to help out. Ask detailed questions with specific examples, links, and code. The more information you provide to them, the faster and easier they can scope the problem.
I would recommend checking out CSS-Tricks Forums, Smashing Magazine Forums, and Designers Talk Forums since its very active and a lot of talented designers/developers are willing to help out.
DON’T be shy and keep the confusion to yourself.
5. Do Experiment and Learn By Trial and Error
I developed my skills and knowledge mostly by trial and error. I think this is the healthiest way to get some real hands on experience. When you read a tutorial on how something is done, read it carefully, and experiment with it.
DON’T eat and run!
Great Articles for Beginners
- HTML & CSS – The VERY Basics
- 5 Tips For Design Students
- Preparing For Your Next Web Design Job
- CSS do’s and dont’s Part 1: CSS Selecting
- 8 Premium One Line Css Tips
- CSS tips and tricks, Part 1
- Top CSS Tips
- CSS Cheat Sheet
- CSS Shorthand Guide
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, April 27th, 2009 at 12:07 am and is filed under Articles. 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
Why should i make one CSS multibrowser file? with condition i can make a style for ie7 and FF, and one for ie6.
Nice website. Good works.
Awesome article!
This comes at a good time when I am trying to get my CSS skills up, I wish I would have read this a few years ago when I started out.
What’s up, Soh! Great article, btw. Thought I should bring Brian Cray’s article about targeting CSS in IE (anything). Here’s the article on that:
http://briancray.com/2009/04/16/target-ie6-and-ie7-with-only-1-extra-character-in-your-css/
I’ve tried it several times and it works for hacking and saves time on CSS validation on IE browsers. The only thing that creates heated discussions is validating the CSS using this technique (cuz it really doesn’t), and Brian makes a case for that.
Hope things finds you well!
David
That ‘not checking early and often’ used to get me all the time. I find now that I check often (any major layout change like floating a menu) I rarely run into problems and end up with IE stylesheets that are only a line or two to account for different levels of padding or margins. This really should be required reading for starters.
@Steo I don’t think he mentioned anything about single CSS files for crossbrower compatibility but was implying that not checking early and often just makes it harder to track down the CSS bug that needs to be corrected or adjusted for browsers. I heartily concur.
trial an error is the best method!
I completely agree. Rules you mentioned are important. I would also add, to use validator to check cross browser compatibility and to start validating sites as soon as possible.
@Steo , curtis basically summed it up for me. But if you could, you should be striving for one style sheet w/out any hacks. That would be the ideal way
People always forget about cross-browser issues..
Nice read, will check out the usefull links you posted.
Subscribed to your feed.
Great! I’m already excited for second part of this article.
And don’t use white type on a dark background. Makes reading laborious. Especially if it is tightly tracked, small or bold.
When is part 2?
?
good
I really struggle with css, but I’m getting better by reading such informative posts