Welcome, visitor! [ Login

10 Secrets No Other CSS Master Will Tell You

CSS Tutorial Guide 17/12/2012

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.

 

When it comes to sharing expert tricks on Internet, all of a sudden, self-proclaimed guru and other experts pop up to help you with their valid points, tricks, and resources. But over the years, I’ve found that these so-called gurus use untested CSS hacks that might solve the problem at hand, but when something major changes occurs, they cannot keep up with those changes easily.

That’s why, instead of depending upon unknown source for tips, let’s look at what the true veteran of the design world has to say. These CSS tips were accumulated through some of the most trusted designers on the internet.

 

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

So in this article, we’ll discuss 5 more amazing CSS tips from the Masters themselves that are not only useful, but also meaningful as well as challenging. You should listen to them because these are the people who have walked down the line of design excellence. So sit down and grab a coffee or something while I explain 5 more excellent principles of the CSS Masters.

6. Use Negative Margins

Dan Cederholm’s is the guy who’s the founder of SimpleBits. He has worked with corporate giants like Google, Blogger, MTV, and Inc.com among others sharing his knowledge to other budding web developer and designers. So when Dan talks, others listen. He’s like a digital Sherpa guiding you through pointy rocks in the design mountain.

As they say, it’s easier to deal with the exception rule sometime, rather than altering all the other elements around. So Mr. Cederholm explains that it’s easier to use negative margin sometimes to an element than add other declaration on elements around it.

Although using negative margin may seem counterproductive, ‘margin-left: -10px’ for example, however, it’s really a good idea.

7. Use Center Layouts

Many modern web designers depend upon the centered layout design, so learning how to center a layout could prove handy down the line for web designers.

There are several web developers, or beginners CSS designers that has one burning question that seems to always scream at the back of their mind – ‘How do I center my layout with CSS?’ – when they haven’t done it before. They frown and become frustrated as they don’t know the solution to the problem.

Dan, our Web guru, again make his name in this list twice, and I’m not surprised either. In order to center layout Dan figured out a tried-and-tested method that are supported by every browsers.

Here’s the code:

#container {

margin: 0 auto;

text-align: left;

width: xxxpx;

}

8. Using the Right DOCTYPE

Okay, so you’ve written down a valid XHTML and your CSS files pass the W3C standards. Yet, in few browsers which were designed to support these standards, your web pages still display incorrectly – probably you used a foul DOCTYPE.

Jeffery Zeldman, one of the CEOs of the excellent resource center at A List Apart, who actually co-founded the Web Standards, have written a book on web standards and designing where he explains why people have misconceptions regarding DOCTYPE – web developers using  either outdated and invalid DOCTYPE or sometimes following a depressing norms and standards of the late 1990s.

Zeldman highly stresses budding web developers to actually use a DOCTYPE by adding the following code in every web page you create.

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”

“http://www.w3.org/TR/html4/loose.dtd”>

We’ve covered a comprehensible article on major DOCTYPES you can deploy on your web pages.

9. Centering Elements via CSS

Centering elements inside web page is a frequent chore, but most beginners have a hard time figuring how to center a whole website in browsers besides IE. Wolfgang Bartelme, a web designer at the web design firm Bartelme Design, who has several elegant-blogs to his name, has written a comprehensive tutorial that will help to solve you the task of centering elements using CSS.

Although centering elements are extremely useful, nonetheless sometimes they can be difficult to achieve given the type of your design. But Mr. Bartelme ensures that if you choose the correct DOCTYPE, and tweak few codes using his CSS voodoo technique, centering will be just like a piece of cake.

10. Use Text-transform

Text-transform is one of the most important aspects of styling that is underestimated by web developers. Using CSS, you can set the transform property value to any text, without having to go over the text inside the pages manually. That means, when few months later when things change, as they normally do, you still have total control over the look and feel of your whole website. Simply change few codes inside a CSS file, and you’re good to go.

There are several transform property value for text-transform, including uppercase, lowercase, and capitalize. Each property value is self-explanatory and transforms text into either uppercase, lowercase, or turn the first letter of the word into capital.

Using CSS to define the look of the text gives you an extra advantage when things go sour with any text-editors used on your website. For example, let’s say that your text-editor forgets to capitalize first letter of the title, but if you’ve define the title tag to ‘capitalize’ then you stand corrected.

 

Summary of 10 Principles of the CSS Masters – Part 2

I wanted to share some insightful tips that CSS Masters always tell other budding web designer and developer so that they keep their CSS codes minimal, simple, yet effective to achieve really cool tasks with minimum fuzz. In this article, and the previous one, we discussed 10 major principles of several CSS masters.

No Tags

24 total views, 1 today

  

Leave a Reply