13 Training Principles of CSS Everyone Should Know
Your website’s Cascading Style Sheet defines the presentation of the document, but writing your CSS file can sometimes take a bit longer than you originally planned. Take a look at some of the following tips used by the CSS experts to ensure your CSS is being written both effectively and efficiently.
Give CSS classes a name that corresponds to what element it controls, rather than what the style actually does. Then in the future if you change the color or size then you’ll still know what element of the page the class controls. For example when using CSS to control a certain box:
.green-box { background-color: green; padding-right: 40px; } It would be better to call the class something like “top-box” especially as you might want to change the color of the box at a later stage:
.top-box { background-color: green; padding-right: 40px; } 2. Use Shorthand Coding TechniquesIf your still writing out each and every CSS declaration separately, then your probably wasting a ton of time. Not only is shorthand easier to write and edit, but it helps your pages load faster and more efficiently.
Font, Margin, Border, Padding, and many other properties can all be shortened.
Instead of writing:
p { padding-top: 20px; padding-right: 40px; padding-bottom: 30px;
padding-left: 10px; } You can write:
p { padding: 20px 40px 30px 10px; } For Padding, Margin, and Border; the order of values refer to the following:
1 value = p { margin: 20px; } = All four sides
2 values = p { margin: 20px 40px; } = Top/Bottom Left/Right
3 values = p { margin: 20px 40px 30px; } = Top Left/Right Bottom
4 values = p { margin: 20px 40px 30px 10px; } = Top Right Bottom Left
3. Know Your Audience & Support Their Browsers
The general rule of thumb is to only support the latest browsers. Spending countless hours trying to fix/hack your coding to support older software is NEVER fun. And usually there are good reasons these outdated browsers have been updated (or ditched altogether).
But this is sometimes easier said than done. If you are coding for a design website whose target audience are “techies” and “geeks”; then dropping IE6 support might be easy. But if your target audience is older folks or users in less developed countries, then a majority of your visitors could still be using outdated software.
Be aware of your visitors and cater to their browser needs.
4. CSS vs. Javascript
Trying to create something that is a bit too complex for CSS? Instead of cluttering your Style Sheet with a ton of coding that may or may not work on every browser, look into using Javascripts. Not only will your site run more efficiently, but it should take less time to code if done properly.
Even if you aren’t proficient in Javascript, check some of the following sites for some ready-made-scripts that might come in handy.
http://www.javascriptkit.com/
http://www.hotscripts.com/JavaScript/Scripts_and_Programs/index.html
5. Use Premade CSS Templates
Still having trouble getting ideas on integrating advanced CSS features into your site? Why not use some coding that has been written and tested by others. There are a handful of great websites with CSS round-ups to aid you in your CSS needs.
http://www.hongkiat.com/blog/50-nice-clean-css-tab-based-navigation-scripts/
http://intensivstation.ch/en/templates/
http://www.smashingmagazine.com/2007/01/19/53-css-techniques-you-couldnt-live-without/
6. Validate Your CSS
Whether you are still writing your coding and need to locate an error, or you have finished it altogether; validating your Style Sheet is extremely important. Not only can the W3C Validation Service help you fix errors and locate holes, but it ensures your coding is ‘web friendly’ and ready for the public.
W3C Validation Service:
http://jigsaw.w3.org/css-validator/
7. Use The Proper Doctype
So you have finished coding your site, validated the CSS and XHMTL, and still can’t get it to look right? Maybe your doctype isn’t set properly. This is often overlooked and determines how the browser is to read your website, thus making it extremely important. Again, make sure to use the W3C Validator to your benefit.
8. Use a CSS Compressor
Having trouble getting your Style Sheet to load and run efficiently? Try compressing it with some of the following compressors:
http://www.cssdrive.com/index.php/main/csscompressoradvanced/
http://developer.yahoo.com/yui/compressor/
http://csstidy.sourceforge.net/
9. Remember Case Sensitive Element Names
Remember that element names in selectors are case sensitive when using CSS with XHTML. It is sometimes recommended to use only lowercase to ensure the possibility for errors is minimized. Also, values of the class and id attributes in HMTL and XHMTL are case sensitive; so make sure to keep an eye on your “caps” when coding.
10. Download CSS Resource Guides
Whether writing your coding from scratch or using a CSS Framework; some of the following “cheat sheets” could come in handy for your CSS needs:
http://www.addedbytes.com/cheat-sheets/css-cheat-sheet/
http://yuiblog.com/assets/pdf/cheatsheets/css.pdf
http://www.digitart.net/blueprintcss/bluebrintcss.pdf
http://www.apple.com/downloads/dashboard/developer/csscheatsheet.html
11. Don’t Declare Default Values
Remember not to write “obvious coding”. Any declaration that is set by default doesn’t need to be written, such as the following:
body { font-weight:normal; } 12. Group Your Selectors
When several element types, classes, or ids share similar properties, you can group these selectors to avoid specifying the same properties over and over again. This will really help keep coding slim and efficient.
So, to specify the font family, font color, and padding for all heading elements, you can use the following:
h1,h2,h3 {font-family:Arial,Helvetica,Lucida,Sans-Serif; color:#000;
margin:1em 0; } 13. Simplify Your Coding
Last but not least, simplify your CSS. Many designers try to achieve original designs through complex solutions. Remember back in Elementary School when your teacher would say “K.I.S.S. = Keep it Simple Stupid”? Well that applies to CSS as well. By writing a CSS file that is too long, not organized, or contains too many “CSS Hacks”; you run the risk of coding a site that doesn’t display properly in the end. Not only can countless hours of wasted time be thrown away, but you could end up with a site that looks different in nearly every browser. And as the technology behind these browsers changes, your site could become worse looking as time goes on.
Labels: CSS
1 Comments:
Thanks mate for providing such a useful informations about the CSS. This will help ppl in general.
Post a Comment
Subscribe to Post Comments [Atom]
<< Home