YOYOCASO

1. Keep CSS simple - Peter-Paul Koch
1.保持CSS简单
"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."
"干扰我的主要是CSS骇客们的思想意识，他们是在积极寻找复杂的解决方案。寻找，就寻见（出自马太福音，意思是要找就找的到）。如果你想复杂，它则会扼杀你，不会放过你也不会帮助你。"
"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.“
“Web是一个不确定的地方。你将永远不能确定你的网站准确的工作在你所期望的方式下，甚至当你没有应用所有现代的CSS, 无障碍和可用性理念，而是寻求错误的安慰，这些hack因为它们的复杂性而显得更加丰富。你应该接受这种不确定性作为一项基本的原则”
”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."
"浏览器无法完美的支持CSS；特别对于初学CSS的人，很容易被激怒。即使这样CSS hack也不是解决方案。当前Web工作的最好方式是采取接受的方式，因为它会保持你的网站的简单，"
(这观点出自PPK03年发表的文章http://www.digital-web.com/articles/keep_css_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.
不仅仅是CSS，适用整个Web开发。简单性是高效编写代码关键。

------------------------------------------------------
2. Keep CSS declarations in one line - Jonathan Snook
2. 保持CSS声明在一行
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;
}
"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."
"第二个可能看起来更漂亮些，但是它肯定不能帮助我找到什么。当在样式表里找一些东西时，最重要的是规则集({和}前面的部分)。我查找一个元素，一个ID或一个Class。让一切在一条线检索起来快很多。"(示例图http://flickr.com/photos/jonathansnook/2800852816/sizes/l/ )
(出自jonathan06年的文章http://snook.ca/archives/html_and_css/top_css_tips/ )

------------------------------------------------------
3. Use CSS shorthand - Roger Johansson
3. 使用CSS简写
"Most people know about and use some shorthand, but many don’t make full use of these space saving properties."
“大多数人知道和会使用一些简写，但很多人没有充分使用这些节省空间的属性。”
(出自roger05年的文章http://www.456bereastreet.com/archive/200502/efficient_css_with_shorthand_properties/ )

------------------------------------------------------
4.Allow block elements to fill space naturally - Jonathan Snook
4.让块型元素自然填充空间
"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."
" 我的经验是，如果我设了宽，我就不设margin或padding。同样，如果我设了margin或padding，我就不设宽。处理盒模型时有这种痛 苦，尤其是处理百分比。因此，我在容器上设置宽度，在它里面的元素上设置margin和padding。一切通常证明很顺利。"
(出自jonathan06年的文章http://snook.ca/archives/html_and_css/top_css_tips/ )

------------------------------------------------------
5. Set a float to clear a float - Trevor Davis
5. 设一个浮动清一个浮动
"Floating is probably one of the most important things to understand with CSS, but knowing how to clear floats is necessary too."
"浮动可能是理解CSS最重要的东西，但了解如何清浮动同样重要。"
"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 div 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 div."
" 因为容器有margin: 0 aut，我们不能浮动它，因为它会移动到另一边。因此，另一个办法是插入一个清除元素。在这个例子里，我正是用了一个空div设为clear: both。现在还有一个办法不需要标签清浮动，但我注意到使用这个技术有一些不一致的地方，因为我只能牺牲一个空div。"
(出自trevor08年3月的文章http://trevordavis.net/blog/tutorial/the-6-most-important-css-techniques-you-need-to-know/ )

------------------------------------------------------
6. Use negative margins - Dan Cederholm
6. 使用负margin
"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."
"有些情况在一个元素上使用负margin是最容易的“微调”方式。"
(出自http://simplebits.com/notebook/2005/05/23/negative.html )

------------------------------------------------------
7.Use CSS to center layouts - Dan Cederholm
7. 使用CSS居中布局
(出自http://www.simplebits.com/notebook/2004/09/08/centering.html )
针对初学者。

------------------------------------------------------
8. Use the right DOCTYPE - Jeffrey Zeldman
8. 使用正确的DOCTYPE
"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."
"使用一个不完整的或过期的或根本没DOCTYPE－都会将浏览器抛入"怪癖"模式，浏览器会假设你写了老式的，无效的和上个世纪九十年代未的令人沮丧的工业标准的代码。"
(出自jeffrey02年的文章http://www.alistapart.com/articles/doctype/ )

------------------------------------------------------
9. Center Items with CSS - Wolfgang Bartelme
9. 使用CSS控制项目居中
(出自05年的文章http://www.bartelme.at/journal/archive/centering_items_via_css )
针对初学者。

------------------------------------------------------
10. Utilize text-transform commands - Trenton Moss
10. 使用文字转换命令
(出自05年文章http://www.sitepoint.com/article/top-ten-css-tricks )
我觉得没什么用。

（原文：http://nettuts.com/html-css-techniques/10-principles-of-the-css-masters/ ）