Featured Posts

The Value of Feeling Appreciated as an Employee in... Whether you’re a new employee or the vice president of the company, everyone wants to feel valued, even appreciated, in the workplace. Not only does it improve morale and make the workplace a more pleasant...

Read more

The difference between classic and motion tweens in... Here it is: If you're used to doing things "the cs3 way" then you can continue to do so with the classic tween tool. It works the same way as you remember, using key frames as normal, but you cannot...

Read more

PHP: If (equal to AND not equal) - eliminate form spam... Just learned a great function of PHP thats already made my forms a lot better. A while back I wrote an article about eliminating form spam without captchas by using css to hide a text input box for bots...

Read more

Drop Downs, Fly Outs, and Accordion Site Navigation: This last week I was in a meeting discussing a client site. It was a typical business meeting that was going into overtime on a Friday afternoon, and then things turned for the worst... someone suggested...

Read more

twitter

Breaking News

  •  

7 Principles Of Clean And Optimized CSS Code

Category : CSS, Great Tutorials, Slick Code

http://www.smashingmagazine.com/2008/08/18/7-principles-of-clean-and-optimized-css-code/
This is another post from SmachingMagazine. The principles are a pretty good standard ruleset.

#1 (shorthand CSS) is key. I opt for the least amount of whitespace as I can as some of the CSS files I write for larger sites still have a few hundred lines. This is without the IE 6 hacks, which are in a separate CSS file, which they recommend in #2. This allows your code to validate and also be condensed. Both good things.

Thank you Tony White.
Enjoy!

Comments (2)

I have started looking at CSS frameworks and reset style sheets lately, and I have come to a basic conclusion.

Why reset? Set instead. Simply put, replace your reset style sheet with one that SETs all the basic styles to the defaults you would like to start from instead. You still get a good baseline across browsers by setting all your styles to a standard format. I just don’t see the point of doing something to force me to specifically undo it later. I would much rather start with a style sheet that has a reasonable starting point that overrides the differences between browsers while at the same time making elements appear as I would expect them to everywhere.

So how about we see the death of the reset style sheet and the birth of frameworks with set style sheets. I think I will work on creating my own set.css in the near future.

Interesting idea, but I think in most cases resetting the browser default styles will produce the set you are looking for.
Maybe you add some padding at the bottom of

and

    for formatting, but really most of the time I just want to strip out the crap and let me write semantic code.

    In addition to using a reset, I also have a “common css” class list I use in every project. Things like: text alignment, floats and clears, bold and italic font tags, I also have a few text properties on the font tag to keep things consistent (line height and color for instance). Below the common declarations I keep a hex list of every color im going to use in the project. I may not use every class in the list, but I know they are there and can use them at any time.

Post a comment