Written by Glen Stansberry

When it comes to CSS, there are lots of resources and supposed “expert tips” on the web. These are from unproven, self-proclaimed “gurus” who have no street cred in the design world. While they may have valid points, how is one to know whether a CSS tip is a valid resource or just an untested hack?

Instead of relying on unknown sources for advice, let’s look deeply into designers who have excellent design backgrounds and have walked the walk. These CSS tips are gathered from some of the most respected designers on the planet. They have the portfolios to back their advice up, so you’ll know that each tidbit of advice is of the highest quality.

Below are 10 excellent principles that any web developer or designer can find useful, meaningful, or challenging. Consider this sage advice from journeymen (and women) who have walked the long, hard road of design excellence. These are the true masters of CSS. Drink deep from their knowledge and take their wisdom on your next designing adventure.

1. Keep CSS simple - Peter-Paul Koch

What bothers me most about the mindset of CSS hackers is that they are actively searching for complicated solutions. Seek and ye shall be found, if you want complexity it’ll take you by the throat. It’ll never let go of you, and it won’t help you, either.

Peter-Paul Koch is a godfather of web development. While he’s an old-school developer and the bulk of his web portfolio was between 1998-2002, he’s worked with the likes of Apple and other heavyweights. He’s written a book on javascript, but don’t think for a second he doesn’t have anything to say about CSS.

The danger of CSS hacks

Koch has addressed something that every designer and web developer should follow with zeal: Keep your CSS simple. Simplicity is a hard thing to achieve, especially in CSS design. There are a myriad of CSS hacks that one can find for making all browsers look the same, regardless of version or type. Yet there’s a fundamental flaw with using many CSS hacks. As web browsers evolve, it’s much harder to keep up with the changes.

Koch makes an interesting point about developing for the web. The Internet as as whole is a very unpredictable place, and trying to second-guess the way it will work in the future is a very bad strategy.

The Web is an uncertain place. You’ll never be sure that your Web sites will work in the exact way you want them to work, not even when you apply all modern insights from CSS, accessibility and usability. Instead of seeking false comfort in hacks that seem all the more comfortable because of their complexity, you should accept uncertainty as a basic principle.

Browsers don’t have perfect CSS support; especially for people who’ve just started learning CSS, that can be infuriating. Nonetheless CSS hacks are not the solution. Acceptance of the way the Web currently works is the best way to go because it’ll keep your sites simple.

Peter-Paul has hit on something that rings true for not only CSS, but for web development as a whole. Simplicity is key for efficiency in coding.

2. Keep CSS declarations in one line - Jonathan Snook

Jonathan Snook is an incredibly popular designer from Ottawa, Canada who’s made his name in web standards and design. He’s spoken at prestigious conferences like SXSW and has published quite a few technical resources on design through Sitepoint.

One of Jonathan’s tenants to coding CSS is to keep declarations in one line.

The second one may look prettier but it sure doesn’t help me find anything. When looking for something in a style sheet, the most important thing is the ruleset (that’s the part before the { and } ). I’m looking for an element, an id or a class. Having everything on one line makes scanning the document much quicker as you simply see more on a page. Once I’ve found the ruleset I was looking for, find the property I want is usually straightforward enough as there are rarely that many.

Jonathan goes on to give an example for single line declarations that looks like this:

Good

{font-size:18px; border:1px solid blue; color:#000; background-color:#FFF;}

Bad

h2 {
font-size:18px;
border:1px solid blue;
color:#000;
background-color:#FFF;
}

Not only does this approach help with quickly scanning your CSS, it also helps in keeping your CSS file smaller by removing unneeded spaces and characters.

3. Use CSS shorthand - Roger Johansson

Most people know about and use some shorthand, but many don’t make full use of these space saving properties.

Roger Johansson knows a thing or two about designing for the web. The Swedish web designer has been working on the Internet since 1994, and has a popular web design blog. When it comes to simple and elegant solutions, Roger is one of the most knowledgeable in his field.

Johansson has a very in-depth article on the importance of CSS shorthand, and gives quite a few examples of how to use it while coding CSS. Here’s an example:

Using shorthand for these properties can save a lot of space. For example, to specify different margins for all sides of a box, you could use this: margin-top:1em; margin-right:0; margin-bottom:2em; margin-left:0.5em; But this is much more efficient: margin:1em 0 2em 0.5em; The same syntax is used for the padding property.

While CSS shorthand reduces the size of the stylesheet, it also helps organize and keep the code simple. Beautiful CSS is simple CSS.

4. Allow block elements to fill space naturally - Jonathan Snook

Mr. Snook has another piece of crucial advice that every web developer should live by: allow block elements to fill space organically. If there’s one recurring theme in CSS development, it’s to not force the code to do things it isn’t meant for. This means avoiding CSS hacks and finding the simplest solution possible.

My rule of thumb is, if I set a width, I don’t set margin or padding. Likewise, if I’m setting a margin or padding, I don’t set a width. Dealing with the box model can be such a pain, especially if you’re dealing with percentages. Therefore, I set the width on the containers and then set margin and padding on the elements within them. Everything usually turns out swimmingly.

Jonathan’s rule of thumb is great for ensuring that your layouts won’t break and that the simplest approach is used when creating layouts with block elements.

5. Set a float to clear a float - Trevor Davis

Floating is probably one of the most important things to understand with CSS, but knowing how to clear floats is necessary too.

Trevor Davis may not be as big of a name as Zeldman or Snook in the design world, he surely deserves some mention just based on his excellent portfolio of web layouts. His blog is an excellent resource for any web developer wanting to brush up on his design chops.

Clearing floats

In Trevor’s flagship article The 6 Most Important CSS Techniques You Need To Know, he’s added a nugget that can save many headaches when using columns in your layouts.

I have created a simple page with two floating columns next to each other. You will notice in the example that the grey background does not contain the floating columns. So, the easiest thing to do is to set the containing element to float. But now, you will see that the container background doesn’t contain the content area.

Since the container has margin: 0 auto, we do not want to float it because it will move it to whichever side we float it. So another way to clear the float, is to insert a clearing element. In this case, I just use an empty p set to clear: both. Now, there are other ways to clear a float without markup, but I have noticed some inconsistencies with that technique, so I just sacrifice an empty p.

6. Use negative margins - Dan Cederholm

Sometimes it’s easier to deal with the exception to the rule, rather than add declarations for all other elements around it.

Dan Cederholm’s company SimpleBits is a powerhouse of a design company. Dan’s worked with the likes of:

• Google
• Blogger
• MTV
• Fast Company
• Inc.com

… and many other high-profile web companies. Fortunately, Dan passes on some of the knowledge he’s learned working with these massive names on his blog at SimpleBits. Here’s a rule of thumb for you web designers and developers: If Dan Cederholm says anything, you listen. Think of him as a digital sherpa, guiding you to the crest of your design mountain.

Negative margins

While it may seem counterintuitive to put a negative in front of any declaration (like margin-left: -5px), it’s actually quite a good idea. Mr. Cedarholm explains that using negative margins on elements are sometimes easier than having to change every other aspect of the design to make it align they way you want.

There are situations when using negative margins on an element can be the easiest way to “nudge” it out from the rest, treating the exception to the rule in order to simplifiy code.

You can see his example of proper negative margin usage here.

7. Use CSS to center layouts - Dan Cederholm

“How do I center a fixed-width layout using CSS?” For those that know, it’s simple. For those that don’t, finding the two necessary rules to complete the job can be frustrating.

It’s no surprise that Dan is going to make this list twice. Centered layouts are on the surface a very simple idea, but for some reason they don’t always work as easily as advertised. Centering layouts with CSS can be a frustrating endeavor for a beginner if they’ve never tried it before.

Dan’s got a tried-and-true method that he uses frequently to achieve centered-layout nirvana.

#container { margin: 0 auto; width: xxxpx; text-align: left; }

Many modern designs rely on centered layouts, so using this method will at some point come in handy for web developers and designers.

8. Use the right DOCTYPE - Jeffrey Zeldman

You’ve written valid XHTML and CSS. You’ve used the W3C standard Document Object Model (DOM) to manipulate dynamic page elements. Yet, in browsers designed to support these very standards, your site is failing. A faulty DOCTYPE is likely to blame.

Jeffrey Zeldman is one of the co-founders of the excellent resource site A List Apart, co-founded and ran The Web Standards Project, runs the Happy Cog design studio, and even wrote the book on designing for web standards. In short, Zeldman is in the upper-echelon of web designers.

DOCTYPE misunderstanding

The DOCTYPE of a web page is one of the most overlooked aspects of design. Using the right DOCTYPE is crucial, and Zeldman explains why.

Using an incomplete or outdated DOCTYPE-or no DOCTYPE at all-throws these same browsers into “Quirks” mode, where the browser assumes you’ve written old-fashioned, invalid markup and code per the depressing industry norms of the late 1990s.

Zeldman stresses the importance of a) actually using a DOCTYPE, and points out that you have to add an url in the declaration like so:

If you’re finding unexplained problems with your layouts, odds are the DOCTYPE could be the problem.

9. Center Items with CSS - Wolfgang Bartelme

Centering items is a frequent task when designing websites. But for people that are new to CSS it’s mostly kind of enigma how to center for example a whole website in browsers other than IE.

Wolfgang Bartelme is a web designer with Bartelme design, a web design firm. Bartelme has one of the most elegantly-designed blogs, and continually creates excellent icon and design work. He’s done design work for the blogging platform Squarespace, as well as the popular software event MacHeist.

Wolfgang has created a tutorial that helps with the complicated task of centering elements with CSS. Centered elements are insanely useful, but are sometimes hard to achieve given the design. Bartelme’s tutorial ensures centered alignment by choosing the right DOCTYPE and making adding his CSS voodoo. The code nothing fancy and gets the job done, and falls directly in line with striving for simplicity in CSS.

10. Utilize text-transform commands - Trenton Moss

Trenton Moss knows web usability. He has his own web usability company that trains people in usability training and web writing. He also writes for sites like Sitepoint. Trenton gives excellent tips based on his experience as a web usability expert.

It’s a simple fact that designs change over time, especially in the way text is displayed on websites. The best thing a web designer can do is plan for the future to make sure that instead of having to manually change the way text is displayed, it’s best to use CSS to change the appearance of the text. Trenton Moss shows us how to achieve this through the use of a simple, underused CSS command called text-transfom.

One of the lesser known, but really useful CSS commands is the text-transform command. Three of the more common values for this rule are: text-transform: uppercase, text-transform: lowercase and text-transform: capitalize. The first rule turns all characters into capital letters, the second turns them all into small letters, and the third makes the first letter of each word a capital letter.

By using CSS to display the appearance of text on the site, it allows for change in the future and keeps things consistent over time.

This command is incredibly useful to help ensure consistency in style across an entire Website, particularly if it has a number of content editors. Say for example your style guide dictates that words in headings must always begin with capital letters. To ensure that this is always the case, use text-transform: capitalize. Even if site editors forget about the capitalisation, their mistake won’t show up on the Website.

While text-transform is a small thing to add to add to a css layout, it can make a world of difference in the future when changes need to be made.

Glen Stansberry is a web developer and blogger who’s struggled more times than he’d wish to admit with CSS. You can read more tips on web development at his blog Web Jackalope.

• 0 Comments

Collected by Digital Photography School

Photo by seto_supraenergy

Photo by joe holmes

Photo by Elsie esq.

Photo by http://flickr.com/photos/reutc/278685448/

Photo by Echo9er

Photo by YardSale

Photo by Leorex

Photo by Leorex

Photo by pingnews.com

Photo by wvs

Photo by ChrisStylewalker

Photo by darkmatter

Photo by Shivayanamahohm

Photo by ~Prescott

Photo by Roadsidepictures

• 0 Comments

• 0 Comments

一次世界性的全运会在春晚舞台上胜利闭幕，接下来让别人去翻字典讨论究竟是“无与伦比”还是“相当独特”还是“无以伦比”吧。

金：51：银：21 铜：28
51+21+28=100

512128+100=512228

5月12日，2：28

• 0 Comments

写篇三门问题的终结版。欢迎补充材料。

三门问题，亦称为蒙特霍问题（英文：Monty Hall problem），最初的表述形式：

参赛者会看见三扇关闭了的门，其中一扇的后面有一辆汽车，选中后面有车的那扇门就可以赢得该汽车，而另外两扇门后面则各藏有一只山羊。当参赛者选定了一扇门，但未去开启它的时候，节目主持人开启剩下两扇门的其中一扇，露出其中一只山羊。主持人其后会问参赛者要不要换另一扇仍然关上的门。

问题是：换另一扇门会否增加参赛者赢得汽车的机会率？

很老的问题了，不过在任何时候都能引起激烈的争论，更神奇的是无论直觉派，概率派等都认为自己的答案有道理。维特根斯坦认为世界上多数问题归根结底都是语言问题。三门问题的争论其实也是语义上的。正确答案应该是

1. 如果主持人事先知道哪个门里有山羊并且他特意选择了有山羊的门打开了，那么参赛者应该换另一扇门，这可以将他胜利的概率从1/3升到2/3。
2. 如果主持人事先不知道哪个门里有山羊或者他只是随机的选择了一个门，但事实发现里面恰好是山羊。这时候参赛者没有换门的必要，胜利概率总是1/2。

上面答案中的假设条件并没有在问题中明确指出，从而导致这个问题的巨大争议。所以最后的问题“官方”表述将问题严格确定下来(来源：三门问题@wikipedia)：

• 参赛者在三扇门中挑选一扇。他并不知道内里有什么。
• 主持人知道每扇门后面有什么。
• 主持人必须开启剩下的其中一扇门，并且必须提供换门的机会。
• 主持人永远都会挑一扇有山羊的门。
  • 如果参赛者挑了一扇有山羊的门，主持人必须挑另一扇有山羊的门。
  • 如果参赛者挑了一扇有汽车的门，主持人随机在另外两扇门中挑一扇有山羊的门。
• 参赛者会被问是否保持他的原来选择，还是转而选择剩下的那一道门。

这时候问题被限制在答案的第一种情况，这时候参赛者总是应该选择换一个门。

要正确理解三门问题，可以再看两个三门问题的翻版：

女孩的概率

1. 你结交一位新朋友，问她是否有孩子。她说有，有两个。你问，有女孩吗？她说有。那么，两个都是女孩的概率是多少？

答：三分之一。

因为生两个孩子的可能性有四种等可能：BB、GG、BG、GB（即男男、女女、男女、女男）。 因为我们已知至少有一个女儿，所以BB是不可能的。因此GG是可能出现的三个等可能的结果之一，所以两个孩子都是女儿的概率为三分之一。

这对应了三门问题的第一种情况。

2. 你结交一位新朋友，问她是否有孩子。她说有，有两个。你问，有女孩吗？她说有。第二天，你看见她带了一个小女孩。你问她，这是你女儿吗？她说，是。她的两个孩子都是女孩的概率是多少？

答：二分之一。

这似乎非常奇怪，因为我们所拥有的信息看起来并不比第一种情况时多，但概率却不同。但是这里的问题其实是，那个你没见过的孩子是女孩的概率是多少？这个概率和生女孩的概率相同，二分之一。

这对应了三门问题的第二种情况。当然这里也有语言问题，必须假定这位母亲不是特定带出一个小女孩来给你看的。也就是说你只是碰巧发现了它是位小女孩。

你得到的答案依赖于所讲的故事；它依赖于你是如何得知至少一个孩子是女孩的。

三囚犯问题

亚当、比尔和查尔斯被关在一个监狱里，只有监狱看守知道谁会被判死刑，另外两位将会获释。有1／3的概率会被处死刑的亚当，给他母亲写了一封信，想要获释的比尔或查尔斯帮忙代寄。当亚当问看守他应当把他的信交给比尔还是查尔斯时，这位富有同情心的看守很为难。他认为如果他把将要获释的人的名字告诉亚当，那么亚当就会有1／2的概率被判死刑，因为剩下的人和亚当这两人中一定有一个人被处死。如果他隐瞒这信息，亚当被处死的概率是1／3。既然亚当知道其他两人中必有一人会获释，那么亚当自己被处死的概率怎么可能会因为看守告诉他其他两人中被获释者的姓名后而改变呢？ 

正确的答案是：看守不用当心，因为即使把获释人的姓名告诉亚当，亚当被处死的概率仍然是1／3，没有改变。但是，剩下的那位没被点名的人就有2／3的概率被处死（被处死的可能性升高了）。

这位看守显然很有趣。对他来说，这三个人死不死的概率是不变的：1、0、0。有一个必死，两个必活。

我们旁观者认为亚当会死的概率是1/3,那是因为监狱里有3个人，会死1个。现在看守说出一个名字后，我们旁观的人知道是2个里面死1个，亚当在内，则亚当会死的概率上升到1/2。凭什么说在旁观者看来，亚当会死的概率不上升？

以上两问题均出自《随机性》，美国 Bennett D.J.著，吉林人民出版社，2001年。

---

© zhiqiang for 阅微堂, 2008. | 链接 | 9 条评论

• 0 Comments