1

我通常将样式表中定义的 CSS 类用于我经常重用的样式，并将内联样式用于我不重用的 CSS。所有样式都应该在样式表中吗？样式表由浏览器缓存，这很有帮助，但似乎这会使页面更难处理。

如果所有样式都包含在 CSS 文件中，它们应该引用元素名称（如“#myElement { styles...}”）还是使用类？

谢谢！

4

6 回答 6

3

通常，是的，所有 CSS 都应该包含在样式表中。在某些情况下，CSS 可以内联显示（display:none、电子邮件 css 等）。

有许多 CSS 方法可以帮助您发现最佳实践，我使用这个： http ://smacss.com/

我更喜欢在我的 CSS 样式表中使用类，并为 jQuery 使用保留 ID。

于 2012-04-17T19:16:36.787 回答
2

我认为这取决于您的实现，但是使用 CSS 完成的大多数事情都可以重构为最终会（并且可能应该）放在外部文件中的样式。

例如，将唯一元素设置style="width:50px;height:25px;"为可能最好在该元素上完成，只要它仅用于该元素（例如，用户控件，部分视图 - 划分的东西）。但是，style="text-align:center;可能最适合制作一个.centered { text-align: center; }可以重用的类（并缓存在外部文件中）。

于 2012-04-17T19:17:07.190 回答
1

ID (#) 只能用于不重复出现的元素，例如包装器，而类 (.) 应该用于反复使用的元素，例如字体样式或颜色。

同样，当您只需要使用该样式表一次时应该使用内部样式表，而当需要在整个站点中使用样式时应该使用外部样式表。一些设计师仍然喜欢使用外部样式表，即使他们只使用一次，这样更容易检查或复制到另一个站点。

仅当需要一个样式时才应使用内联样式表，但是大多数设计师认为这完全违背了 CSS 的目的。

外部样式表也会受到影响，因此它会降低站点加载和节省带宽所需的速度。

于 2012-04-17T19:16:17.207 回答
0

使用结构和类来设置相似部分的样式，并使用 ID 来设置非重复元素的样式（但它们之间应该相距甚远）。例子：

HTML

<!DOCTYPE html>
<html>
<head>
...
</head>
<body>
<div id="wrapper">
<article>Main Article</article>
<aside>
<div class="some-widget-type"><h1>Title</h1></div>
<div class="some-widget-type"><h1>Title</h1></div>
<div class="some-other-widget-type"><h1>Title</h1></div>
</div>
</body>
</html>

CSS

h1 {/* Base styles here */}
.some-widget-type {/* Styles here */}
.some-widget-type h1 {/* Styles here */}
.some-other-widget-type {/* Different styles here */}
.some-other-widget-type h1 {/* Different styles here */}

它允许您在相似元素和整个页面之间保持一致的样式。

于 2012-04-17T19:17:20.297 回答
0

就我个人而言，我更喜欢将所有内容都放在外部样式表中，因为这使它更具可扩展性。如果稍后在项目中你想重用一个类，你只需输入它而不是去搜索它。

唯一应该使用 # 的时间是用于特殊元素。

于 2012-04-17T19:19:02.083 回答
0

所有 CSS 都应该在样式表中，仅仅是因为您不必访问源代码来编辑布局/样式。

结构在 HTML 中，布局在 CSS 中。

  • 对可以出现在网站上多个实例中的元素使用类。
  • 对每个页面中只能有一个的元素使用 ID。

我个人的 CSS 文件结构如下：

  • 第一部分：全局元素（h1、h2、a、p、body 等）
  • 第二部分：布局类/ID（#footer、#header、#logo、.navigation 等）
  • 第三部分：页面特定的 CSS 结构在一起

这样很容易找到您要查找的内容，相关性越高，层次越高。

于 2012-04-17T19:19:24.877 回答