看好裸体。

Question

CSS看起来像是一套技巧。每当我读到一些css技术时，它看起来更像技巧。当我编写CSS时，我经常需要调整html结构，我感觉很糟糕。

你们中有些人有一些启发并享受CSS zen吗？你是如何达到CSS zen的？

Answer 1

首先，完全分开内容和演示文稿，我的意思是完全所以...不再

<strong class="red">[...]</strong>

（可悲的是我看得太多了）以及所有其他的东西。

css类（和id）应该描述内容，而不是定义样式。例如，这是完全允许的：

<div id="question">
  <p>[...]</p>
</div>
<div id="answers">
  <div class="answer">
    <p>[...]</p>
    <div class="comment"><p>[...]</p></div>
    <div class="comment"><p>[...]</p></div>
  </div>
  <div class="answer">
    <p>[...]</p>
  </div>
</div>

你有足够的标签类和id来做某事，但里面没有分歧或表现逻辑。

记住......达到CSS zen最重要的是格式非常好的HTML而不会出现分歧

另外，如果您阅读了CSS技巧，通常不会进行非常优化。您给出的示例可能更通用，最后使用正常编码。然而，发现这个版本的人没有进一步追求它，因为他找到了他需要的东西。

最后一个注意事项是首先为内容进行设计，并在稍后包含HTML功能。

Answer 2

CSS重置非常有帮助。
过了一段时间，你会学习不同的错误（主要是在IE中）并避免它们。
mac上的CSSEdit更多地与我对CSS的了解有关。它简单而且令人惊叹。 Firebug在这里有一些相似的能力，但不是很棒。

我的大多数东西从一开始就适用于所有主流浏览器，即使我是在webkit中开发的。它只来自于做很多很多很多很多CSS。

CSS必须成为我最喜欢的开发部分。我不认为这是一个“技巧包”。这是一种经过深思熟虑的语言，能够执行任何布局。

它影响我的HTML的唯一时间是我需要做一些javascript效果（比如滑动抽屉等） - 而且通常只是意味着把东西包装好。

Answer 3

CSS zen是LESS CSS

LESS 是一个CSS扩展，它允许重用和封装值（例如颜色值），改进继承，允许更好地嵌套相关属性和操作。

LESS CSS有一个.NET Edition。

Answer 4

开始重复使用类，并在元素上堆叠类，并熟悉特异性规则，以便根据需要覆盖某些样式，你会很快看到实际有用的地方，而不仅仅是“技巧”。

Answer 5

那是因为很多“技巧”都是技巧或黑客攻击
无论你对CSS zen的意思是什么，你都可以通过工作来实现它。确切地说，如果要相信Gladwell，那就是10000小时的工作。

Answer 6

在css Zen Garden中闲逛？
www.csszengarden.com

Answer 7

了解CSS的基本布局模型。

基本单位是方框。块级HTML元素（如BODY，P，H n 等）对应于布局中的一个框。

框为矩形，默认情况下会水平扩展为可用宽度。它们是垂直堆叠的。盒装可以嵌套，例如一个P-box至少会嵌套在BODY-box中。

根据框模型，框可以有边距，边框和填充：http://www.timofejew.ca/2006/css-box-model-hierarchy/

因此，您有一个嵌套框的垂直堆栈（或列）。如果您希望某些方框移出主列，例如作为侧边栏，你浮动（float: left|right）它，它被移动到包含块的左边缘或右边缘，主堆栈环绕。

如果您希望水平（而不是垂直）布置框，则使用display:inline-block。

如果您需要一个网格，其中框的边缘在两个维度上对齐，则使用display:table。但由于版本8之前的IE不支持，您可以选择“作弊”并使用HTML标记表来创建网格。

如果你想放置一个完全独立于盒子流的盒子，你可以使用绝对定位，它会将盒子准确地放在你想要的位置 - 可能与其他内容重叠。

Answer 8

当您意识到CSS对于样式元素而言很好而awful for defining layout.时，启发之路即将到来。除此之外，对于复杂的跨浏览器布局，您永远不会想出一个像你希望的那样整洁和愉悦的解决方案。哦，除了IE6被放在地球上作为一种测试你的耐心去捕捉点的手段之外的启示也会有所帮助！

Answer 9

请记住，您所做的任何都可以被取代，并且您的网站必须适应性才能更改。

看好裸体。

内容为王。网站与书籍没有什么不同，因为它们以一种令人愉悦的视觉方式为读者设置文本格式，但如果删除包装器，网站仍然必须像文档那样流动。

知道你做对了的最好方法就是一旦你删除了所有的CSS - 这样你就可以获得信息层次结构的基础，如果一切看起来像是一切都有相同的权重那么就完成了错。

通过将HTML元素用于其语义含义，您所做的不仅仅是减少正在使用的div数量，而是为文档创建含义。搜索引擎对标题中具有搜索词而不是正文内容的页面赋予更多权重。屏幕阅读器强调标题，而不是因为它们显示更大，而是因为您已在文档中给予它们优先权。

<div class="heading">What I ate for breakfast</div>
<div class="paragraph">Cereal, orange juice, toast.</div>

即使这个从表现的角度来看，它的意义远不如此：

<h1>What I ate for breakfast</h1> <p>Cereal, orange juice, toast.</p>

更严格的是，你可以将我吃早餐吃的东西分解成无序列表，但对于这个简短的例子来说，这可能被视为过度杀伤。关键是通过使用HTML作为您的内容的描述，您将使每个人受益 - 您自己可以获得更好的搜索排名，并使用其他方法来显示页面。

不每个人都是一样的。

设计网页肯定不是为打印而设计的。你必须让他们的网站在他们决定使用的任何平台上看起来都很好 - Mac OS X，Windows，Linux，iPhone，移动设备等。在iPhone出现之前，移动浏览器吸吮。大多数人仍然这样做，在这些情况下，一旦你编写了语义正确的标记，你就可以相应地重新设置网站 - 所有CSS都支持许多不同的媒体，包括但不限于电脑屏幕，投影仪，移动，打印，屏幕阅读器等。

不是每个人的计算机都是相同的 - 颜色可能不同，安装的字体可能不同，嘿，他们可能使用IE6。永远不要让用户觉得他们拥有的浏览器不足以显示“您的浏览器已过期”的弹出消息。相反，适应。包括广泛的字体系列，涵盖与树下方常用的最新和最好的字体混合。逐步增强您的网站，以便您可以在IE中拥有一个出色的设计，并使那些使用CSS3多列或多个背景图像的Safari / Firefox用户更好。

明智的代码。

第三，我只想谈谈CSS最佳实践。认为您需要在HTML中为ID和类提供所有内容是错误的。除非您正在运行需要javascript的这些ID的页面，否则您应该始终不使用这些类并在以后添加它们。

利用后代选择器（如p em { }，子选择器p > em { }和相邻选择器p + em { }）来定位特定元素。可以很容易地预测文档样式的模式，并且您不需要仅仅因为'而创建类。我使用的一个好方法是element + * { }规则 - 它将样式应用于某个元素之后的任何内容，并且它对于清除浮动元素非常有用。

我更喜欢将许多常见规则合并为一个大规则，例如，如果我想要一堆不同的元素，我会使用这样的东西：

blockquote, a, h3 { color:red; }

这比给每个元素一个类更好，当然你以后总是可以覆盖样式。这是css的真正的美，任何一般规则都可以在以后用特定的规则取消。

这比我计划的要长一点。总结一下 - 编写不需要div的优秀HTML（除非你必须使用样式工作区），计划你的设计是跨浏览器记住每个用户的所有差异，并最低限度地编码。那里有更多的选择器，我在这里只涉及了一些 - 重点是没有类的代码，除非你真的需要。

Answer 10

我不太清楚我的意思是什么，但是，我的大部分HTML编码几乎都是由我的CSS决定的。它可能不是最好的方法，但我尝试不使用任何表格和尽可能多的div。从布局到外观和感觉以及我可以应用CSS的其他任何地方。

我认为CSS是一个很棒的工具，不仅仅是技巧。这是另一种看待事物的方式。

Answer 11

你使用CSS的次数越多，你获得的就越好 - 这就是它的全部内容。你可以每天阅读CSS技术，但在使用它之前你不会记住它。

CSS掌握不涉及了解特定情况的特定技巧（这就是互联网的用途），而是能够为新情况提出新技巧。

Answer 12

正如其他帖子所提到的 - CSS掌握与实践相结合（一些中小型项目应足以让您达到高级水平并更好地理解“框架”（引用因为我没有研究过有任何HTML框架，但这是我能想到的最好的词来描述当前开发人员使用的内容和样式的HTML / CSS分离）。

一些很好的资源供您查看W3Schools CSS Tutorial/Reference，当然还有一个普通的Google搜索，可以找到所有这些跨浏览器兼容性（或与盒子模型相关的）黑客攻击。

Answer 13

我读了一篇名为“Object-Oriented CSS”的精彩演示文稿，我希望在开始我最近的长期项目之前，我已经阅读了它。

2主要原则：

分离结构和皮肤
分隔容器和内容

演示文稿详细介绍了10个最佳实践和9个陷阱。

结合它教你使用Google PageSpeed plug-in for Firefox的充分利用。它将告诉您哪些CSS选择器可以更高效，以及如何提高它们的效率。

Answer 14

我发现CSS非常有用，可以重复使用和组织我的布局和代码。我无法想象在没有使用大量CSS的情况下开发网站，并且因为它是一种相对简单的语言，所以很容易快速更改一组元素而无需挖掘数千行代码。也许我只是天真，但我喜欢CSS。

我觉得我在用Javascript使用'技巧而不是tequniques'。虽然它对于任何动态站点来说都是必须的，但是它让我觉得很难将一组发送异步请求的函数（主要是）放在一起，因为它看起来很酷:)。

如何到达CSS zen？

15 个答案:

看好裸体。

不每个人都是一样的。

明智的代码。