编写好的CSS有哪些技巧？

Question

几个月前我刚刚开始进行网络开发。我知道HTML并知道如何将页面标记为语义正确（不使用表格进行布局，正确使用HTML5中的新语义元素等）。我尝试坚持W3C设计建议。但是，我在编写“好”的CSS时遇到了麻烦。

我知道使用有效的选择器，例如子选择器而不是后代选择器等等。我的问题是我觉得我的CSS与我的标记的语义不匹配。 CSS应该是可重用的，这意味着同一个类可以用于多个页面上的多个元素。但是我编写的CSS类只适用于一些元素（通常只在一个页面上），并且永远不会再使用。对于很多课程，我经常写相同的风格，但变化很小。这与DRY的发展原则背道而驰。

我没有充分发挥CSS的潜力吗？有什么方法可以让我的样式重复使用，而不用像.right-align { } .blue-text { }那样的东西？

Answer 1

我目前最好的建议是看看Object Oriented CSS。这是观点的一点变化，但它是一个坚实的概念，绝对值得一看。

Answer 2

你无法用CSS坚持DRY - 你会得到重复。我喜欢做的是使用类来指定更多的一般主题元素，并在其上使用ID来区分。

您应该阅读：http://www.codinghorror.com/blog/2010/04/whats-wrong-with-css.html

Answer 3

  

但我编写的CSS类仅适用于少数元素（通常只在一页上），并且永远不会再使用。对于很多课程，我经常写相同的风格，但变化很小。这与DRY的发展原则背道而驰。

听起来DRY问题与设计有关，而不是你的编码。如果设计要求在每个页面上看起来不同的东西，则没有太多可重复使用的空间。

我通常发现有两种情况需要创建一个类：

1. 设计需要一个组件，例如登录面板，这在概念上是一回事（尽管它可能由多个HTML元素组成），并且需要自己的样式。那是我创建一个类log-in-panel。

的时候

2. 有一个相当复杂的风格（例如一个带有阴影，圆角，边框和渐变背景的盒子，它也必须在IE中看起来像那样），它在几个地方使用，没有特别的他们之间的概念联系。那是我创建像.box1这样的课程的时候。如果我在不同的盒子之间共享半复杂的代码（在IE 6中实现这些是我自由职业的公司最喜欢的噩梦任务）​​，我会把它分成像box这样的类。

如果你有几个使用类似风格的课程，那不一定是个问题。 CSS通常很简单。当一段代码的维护和错误修复不必在多个地方发生时，DRY非常有用。如果重复的CSS不那么复杂，那么就不用担心了。