Question

我知道CSS，我正在学习越来越多的常见模式。但是，我总觉得我是黑客而不是正确的方式。

例如，我尊重的一些人告诉我，使用css reset是不必要的，而其他人则为此而活。此外，有很多伟大的CSS框架（网格等）甚至认为我理解它们，我真的不知道何时使用它们。

所以，基本上，我的问题是：一旦你理解了CSS是如何工作的，那么优秀的Web开发人员是否会使用一种公认的“最佳”方法？在python中，应该尝试使用公共模式并阅读PEP 8.或者，在C ++中，在理解语法之后，阅读Meyer的有效系列是一个很好的“第二”读。

很抱歉花了很长时间来解释..我只是不想有这样的回答：阅读“开始CSS”，解释如何更改背景或如何设置字体。我真的在寻找一个好的标准方法。

我们应该使用重置吗？
我们每个网站只能使用一个文件吗？一个用于主页，一个用于其余部分？一个基本文件，每个大部分都有一个不同的文件？
拥有2k + css文件是不是很糟糕？这是否意味着它应该被重构并且包含很多重复？
我应该在顶部为正常的字体，颜色，h1等定义父级，然后，当它不同时，每个部分更改它...或者总是使用标准的并重新定义每个部分。
我应该在任何地方使用.class和#id，或者我应该尝试最小化它们，而是使用长描述符，例如：


  .content .main tr td span a 
  or
  span.classname a

谢谢！

TL / DR：

一旦你已经了解CSS但想以干净/专业的方式使用它，最好的“第二次”阅读是什么？

[编辑]

感谢大家的回答。我知道我问了很多问题..但它们只是真正问题的例子：一旦你已经理解了CSS但想要以干净/专业的方式使用它，最好的“第二次”阅读是什么。即，我希望阅读一本书，解释我提出的例子......但也会解释许多其他不是css语法的东西，而是更多css-best-professional-use。

Answer 1

人们会对这些问题有一系列答案，但以下是我将采取的方法：

<强>重置

如果您正在处理脆弱的布局 - 如果几个像素不在您预期的位置，则可能很容易破坏 - 请考虑使用重置。我会调查normalize.css。它不是完全覆盖浏览器默认值，而是消除了浏览器之间的差异。

如果您发现自己在样式表中添加了大量margin: 0;，也可以考虑重置特定元素。

拆分CSS文档

Google recommends splitting them up以便各个页面不会强制用户下载他们正在访问的页面上实际未使用的大量样式表规则。
Yahoo recommends combining files以最小化HTTP请求的数量
显然，找到平衡很重要，this SO question会影响一些利弊。

选择器的类和ID或长链？

我尝试将类和ID保持在最低限度（在我的HTML和CSS中）。当您构建其他人将使用WYSIWYG编辑器更新的页面时，它们往往更脆弱。我向页面的大块添加了一些ID或类，然后使用CSS来定位这些块中的特定元素。如果您尽可能避免在HTML中进行深度嵌套，这会更容易。

使用CSS预处理器（如LESS或SASS）可以帮助您编写更易读的样式表。在LESS和SASS中嵌套样式规则的能力帮助我避免了许多与特异性相关的问题。

但是，特殊性是一个很好的CSS主题：

CSS-tricks有a good article covering specificity
W3C's own documentation值得一读。

其他资源

就附加阅读而言......

SitePoint's collection of articles and tutorials on CSS是提供更高级CSS教程的绝佳资源，它们还提供了一些很好的文章，涵盖了CSS问题，这些问题比许多初学者级别的书籍更先进。

Answer 2

我可以根据自己的经验回答您的问题，而不一定是那里的最佳实践。

我重置某些标签，但不是像“CSS纯粹主义者”那样的所有标签。请记住，如果您正在使用某些CSS库，例如JQuery UI，Superfish菜单等。重置标签可能会使这些库UI变得混乱。
我通常有一个通用的布局/配置CSS文件，每个复杂的页面都有自己的CSS文件。因此，每个页面都包含这2个CSS文件以及我的UI库文件（JQuery UI等）。这使我更容易精确定位和维护它。
2K + ??是的，实际上非常糟糕。如果您的文件很大，则应该使用YSlow来查看加载该文件所需的时间。页面加载时间越长，用户离开网页的速度就越快，除非他们被迫使用它。：d
我总是喜欢通过添加#app前缀来“范围”我的CSS。这可以确保我的全局设置仅影响我的页面内容和布局，并且它们不会覆盖UI库。
以任何对您有意义的方式使用.class和#id。如果您知道此标记只存在一次，请使用#id。如果您知道它可能在页面中出现多次，那么唯一的选择是使用.class。

Answer 3

重置：我想是的，有些人不喜欢他们，所以由你来决定你喜欢哪一个
拆分与统一文件取决于。两者都有优势（合唱：优势，优势！）一个CSS文件更容易浏览，您可以在一个文件中清楚地找到关系。然后，如果您已经规划了站点的结构，正在开发分区小部件，或者有很多人在处理CSS提交文件，那么分散的方法可能会让您受益。使用多个CSS文件，您始终可以使用压缩器将它们作为单个文件提供给客户端，因此它更像是一个维护问题。
大文件/行数：你是说你有2000个CSS文件（神圣废话！）或2000行CSS文件？两者都不是很好，虽然后者可以在IDE中轻松管理，为您提供轮廓和处理继承。前者......好吧，至少你有工作保障。
家长定义：同样，没有正确答案。小型站点的CSS规则与企业级站点的差异很大。一个好的起点可能是检查jQueryUI如何处理样式，然后从那里形成自己的意见。
正确选择者：Steve Souders talked about optimizing CSS selectors，得出的结论是，对于您的普通网站来说，这是不值得的。因此，忽略CSS优化并基于您的示例，我会说第二个更容易维护，最终更容易预测。如果您的HTML稍有变化，第一个会快速破坏。第二个不会，而且更便携。

你可以在CSS中做些事情，让你的生活更轻松。我强烈建议使用网格系统进行布局（blueprint，960GS等）。我个人喜欢使用重置，因为它使像素完美的设计更容易管理。除此之外，研究人们喜欢Eric Meyers或网站喜欢alistapart.com或smashingmagazine.com的人对该主题的看法。

tl; dr - 没有正确答案，但绝对是一些不错的选择

Answer 4

与许多事情一样，没有真正的权利和错误，更多的是偏好和可管理性。

我在某些元素上使用CSS重置，我更喜欢空白画布开始，而不是找到未知默认值的负载。

我不认为文件大小确实是一个问题，最容易管理的内容实际上更重要。如果符合逻辑则拆分文件。

考虑优化并尽量避免不必要的重复。我喜欢在为最常用的样式调用父类字体/样式时定义它们，然后根据需要定义其他字体/样式。

就个人而言，我喜欢定义一些常见的类，我不确定它是否是最佳的，但它非常实用，例如：

.bold {font-weight: bold}
.clear {clear: both}
.red {color: red}

如果您针对常见要求执行此操作，则可以使用

之类的代码

<p class="bold red"></p>
<h2 class="red"></h2>
<br class="clear" />

Simples！

Answer 5

使用标签。让它更容易看到。另外我更喜欢使用.classname而不是#id。我的一个网站的一段CSS的例子：

body {
                font-family: Arial,Helvetica,sans-serif;
                font-size: 11px;
                background-color: #99D9EA;
            }

            .lcategorie {
                background-image: url('http://images.alphenweer.nl/i/gradient-menu-left.png');
                background-repeat: no-repeat;
                padding-left: 2px;
                text-align: left;
                color: #FFFF00;
                font-weight:bold;
                width:200px;
                height:20px;
                display:block;
                cursor:pointer;
            }

            .rcategorie {
                background-image: url('http://images.alphenweer.nl/i/gradient-menu-right.png');
                background-repeat: no-repeat;
                padding-right: 2px;
                text-align: right;
                font-weight:bold;
                color: #FFFF00;
                width:200px;
                height:20px;
                display:block;
                cursor:pointer
            }

Answer 6

除了上面的好答案之外，您刚才在问题中描述的内容也称为Learning Curve。

我们都经历过。据我所说，这是不可避免的。

最好的方法可能是充分利用可用的大量资源，然后将其过滤掉。这是一种随着时间的推移而发展起来的诀窍。

我认为没有捷径。虽然，我确实同意，有一个指导手可以帮助我们避免陷阱和浪费时间，并告诉我们所有最佳实践。

但是，即使是那些也可以在那里获得，感谢一些非常热情，专业的博客。

所以探索性是我的建议。

Answer 7

如果你有幸拥有Mac或Hackintosh ......那么我强烈推荐使用CSSEDIT（不幸的是只能在Mac上使用）。它将使您快速了解CSS。我意识到这不能回答你的问题，但是如果你尝试一下，你会理解为什么它对学习曲线如此重要。可悲的是，Windows上的其他任何东西都没有了。我99％的时间使用Windows并切换到我的mac for CSSEDIT。

使用CSS的最佳方法是什么？（不学习但真的使用）

7 个答案:

使用CSS的最佳方法是什么？ （不*学习*但真的*使用*）

7 个答案:

使用CSS的最佳方法是什么？（不学习但真的使用）