Question

我通常使用样式表中定义的CSS类来查找经常重复使用的样式，以及CSS不能重复使用的内联样式。所有款式都应该放在样式表中吗？样式表由浏览器缓存，这是有帮助的，但似乎这会使页面更难以使用。

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

谢谢！

Answer 1

通常，是的，所有CSS都应包含在样式表中。有一些情况可以让CSS显示为内联（显示：无，电子邮件css等）。

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

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

Answer 2

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

例如，将唯一元素设置为style="width:50px;height:25px;"可能最好在该元素上完成，只要该仅该元素（例如用户控件，部分视图 - 某些内容）条块）。但是，style="text-align:center;可能最适合制作.centered { text-align: center; }类，然后您可以重复使用（并将其缓存在外部文件中）。

Answer 3

ID（＃）只应用于不重复的元素，如包装器，而类（。）应该用于反复使用的东西，如字体样式或颜色。

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

只有在需要一种风格时才能使用内联样式表，但大多数设计师认为这样做完全违背了CSS的目的。

外部样式表也受到限制，因此可以降低网站加载和节省带宽所需的速度。

Answer 4

使用结构和类来设置相似的部分和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 */}

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

Answer 5

就个人而言，我更喜欢在外部StyleSheets中拥有所有内容，因为它使其更具可扩展性。如果您希望在项目中稍后重复使用某个类，则只需键入它而不去搜索它。

唯一应该使用的＃是特殊元素。

Answer 6

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

Structre在HTML中，布局在CSS中。

使用类可以出现在网站上多个实例中的元素。
将ID用于每个页面中只能包含一个元素的元素。

我个人构建这样的CSS文件：

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

通过这种方式，很容易找到你想要的东西，越相关，越高越好。

所有CSS样式都应该在样式表中吗？

6 个答案:

HTML

CSS