10 Secrets No Other CSS Master Will Tell You – Part 1

When it comes to revealing the top 10 secrets of CSS, all of a sudden pops up self-proclaimed gurus and experts to help you discover them. The fact is those so-called gurus had never walked down the street of the design world ever in their life, and that annoys the heck out of me.
I know those types and I call them an unappreciated Plato of a bookstore stockroom. It seems that they have the soundest tricks all over their sleeves, but ask them for any advice on how to tackle a particular problem, and suddenly they have to attend a meeting or they’re off on a vacation on Thailand for a couple of week.

10 Secrets No Other CSS Master Will Tell You – Part 1
While they may have few valid points, but most of the time my hunches tell me whether these CSS tricks are really valid as they claim to be or simply an untested CSS hack.
So instead of relying on anonymous sources, let’s dive into what the real and influential CSS developers have to say. Not only they’re walked the walk, but they’ve actually sweated out devoting most of their time in web development just to find some of the most valuable tricks on the planet. Moreover, their portfolio serves as a convincing evidence to back up their advice.
With that said, I’ll reveal you top 10 amazing CSS practices that you and every other web developer will find meaningful, useful, and challenging. Trust me on this as they are revealed by the true CSS masters. Simply soak it up through their time-tested knowledge and wisdom for your next venture.

1. Keep it Simple, Buddy!

What annoys me is the mentality of CSS hackers who are constantly and actively seeking complex solutions for simple problems. If you’re seeking complexity, then that’s what you’ll get – as the law of attraction says – ‘seek and you shall get. It will never let you go, and never help you in the long run, either.
When it comes to web development, Peter-Paul Koch is the guy you should listen to. Not only he’s worked with Apple and other bigger giants, but he’s also written several books on JavaScript. But don’t underestimate him when it comes to CSS.
Koch said something that every designers and developers should heed: Keep your CSS simple. Well, keeping CSS simple might not seem a regular job, but keeping your CSS free of CSS-hacks will benefit you in number of ways. First, as web browsers develop, you’ll be able to keep up with it easier. Second, accepting the web as it is the only best way to go as they’ll keep your website minimal and simple. Third, as web is such an unpredictable place, simplicity is often the key to code for higher efficiency.

2. Declare Your CSS in Single Line

Here’s what Jonathan Snook said, “Keep declarations in one line.” Before I explain, let me tell you that when Jonathan speaks, everyone in the Web development community listens. The Canadian has imprinted his name in the Web design and standards. He’s the authority figure who have spoken on various conferences, SXSW for example, and published several technical resources on Sitepoint.
After his background briefing, I really find it meaningful when he suggests us to use one-line CSS declarations in our stylesheet. Just consider this. If you’re looking for an element, id, or even a class, having everything organized in one line only makes scanning that much quicker and simple. Once I’ve found the ruleset, finding out the property is often straightforward as there are rarely that many.
Here’s a good example of what Jonathan wants to say:
The Pros

p {font-size:12px; border:1px solid #444; color:#333; background-color:#ff0000;}

The Cons

p {
font-size:12px;
border:1px solid #444;
color:#333;
background-color:#ff0000;
}

While it might not seem out-of-the-box trick, trust me on this as I say this. Using CSS in single line not only help you quickly scan your CSS scripts, but they’ll also keep the CSS file size smaller by throwing out the unnecessary spaces and whitespaces out of the window.

3. Utilize CSS Shorthand

Most of the intermediate CSS developers might know a thing or two about using CSS shorthand, while others completely disregard its full use thereby cramming their CSS file with space consuming property values.
Roger Johansson, a Swedish born designer, who has been working on the internet since 1994 has written an in-depth article on the significance of using CSS shorthand. He have illustrated his points with many examples there, but here’s one I would like to share with you, now!
Instead of using separate margin values for each side, use the CSS shorthand code to save a lot of space and avoid having to retype texts.

padding-top:2em;
padding-right:1em;
padding-bottom:0;
padding-left:0.5em;

Here’s the shorthand code that basically mean the same as above, but much more efficient.

padding:2em 1em 0 0.5em;

This trick avoids retyping, reduces the file size, help you organize things up, and more importantly keep the scripts clean and simple.

4. Let Block Elements to Fill Space Organically

Here’s another tip of the trade that Mr. Snook has to share with you guys – allow block elements to fill their space naturally. What does it mean anyway? Well, if you’re setting a width to an element, then don’t use margin or padding. Similarly, if you’re setting its margin and padding, then don’t use width property. In other words, if I’m setting the width of a division box, then I would only set the margin and padding values to the container inside it.
This method ensures that your layout won’t break and this method is often the simplest way to create layouts and elements for your designs.

5. Set a float to clear a float

It’s imperative to understand how floating works, but understanding how to clear it is also necessary.
While Trevor Davis isn’t a big name as Snook or Zeldman, but her surely deserves some credit based on his brilliant portfolio. If you’re looking to horn on your web development skills, his blog is what you should be checking out most of the time.
If you want to clear a float, the best way to do it is to introduce a clearing element for it. For example, I use an empty div with a ‘clear: both’ property for it. Now, there are several other ways to clear a float, but I’ve noticed few inconsistencies with those techniques, so I use an empty div instead.

Summary of 10 Secrets No Other CSS Master Will Tell You!

It makes me furious when most so-called gurus ask their readers to use CSS hacks to quickly get around CSS problems. But these CSS hacks are what their name imply, they simply can’t keep up with the ever-changing browser version, let alone CSS standards and practices. But there are several true masters of CSS who have really walked down the line coding CSS and those are the people you should look up to when it comes to learning the best tips, tricks, and trade of CSS.
In this article, we covered the first 5 top secrets that CSS Masters use in their daily life. In the next article, we’ll cover five more tips that will help you keep you CSS simple, clean, and minimal.