如何理解其他人的CSS架构？

Question

我对CSS相当不错。然而，当与其他人的CSS一起工作时，我很难在他们的架构中看到“更大的图片”（但我在使用我自己编写的CSS表时没有问题）。例如，使用Firebug来隔离和修复跨浏览器兼容性问题，或修复浮动问题或更改特定元素的高度时，我没有任何问题。但是，如果我被要求做一些激烈的事情，比如，“我希望页面A，B，C和D的右侧边框有一个红色边框。我希望页面E，F和G的右侧边栏有一个蓝色边框当且仅当用户将鼠标移过“时，我需要花费很长时间来绘制所有CSS继承规则以查看”更大的图片“。

出于某种原因，我没有遇到与后端代码相同的困难。在快速了解功能如何工作以及快速检查控制器和型号代码之后，我会对架构感到满意。我认为，“假设将有一个继承自Department控制器使用的Person类的Employee类是合理的”。如果我发现与整体建筑风格不一致的不方便细节，我相信我可以将事情重新安排到位。

对于其他人的CSS工作，我很难看到不同类之间的“关系”，以及何时以及如何使用类。当有很多继承规则时，我感到不知所措。

我无法清楚地表达我的问题和问题......我想知道的是，为什么在别人的CSS架构中看到与其他人的业务逻辑层相比更难以理解？

** CSS是否是一项相对较新的技术，并且没有很多流行的设计模式？

Answer 1

我会说，一般来说，大多数开发人员编写CSS的方式都没有“架构”（至少在我的经验中）。大多数人在需要规则时逐步构建CSS - 通常不会像代码体系结构那样提前计划出来。通常人们将相关规则与评论块组合在一起，或者可能在单独的样式表中，但实际上并没有很多既定的模式可供使用。

您最好的选择是使用一个好的CSS编辑器，它允许您直观地浏览工作表中定义的规则层次结构。

Answer 2

我认为很多时候人们只是在没有整体画面概念的情况下将CSS整合在一起。很多时候，他们只是添加东西，因为他们正在铺设的东西，很少考虑他们建立的任何“惯例”，他们的头脑中没有直接新鲜，导致各种命名冗余和差异。

我不认为CSS太新了，因为CSS通常是设计师的领域，而且在设计某些东西时，他们往往不会在架构上思考 - 一切都有些特别。

我知道，当我成为领导者时，我会为类命名和组织建立一套正式的约定，作为我做的第一件事，然后将其打入前端下属： - ）

Answer 3

首先，它是harder to read code that it is to write code.

其次我会说因为CSS允许松散的结构，所以人们会以复杂的方式设置它，所以我会说这是野兽的本性。

Answer 4

可能是因为CSS不是架构而是演示。架构是用HTML构建的。 HTML是引导您进入元素的。

Answer 5

开发人员面临巨大的压力，要确保设计在所有浏览器中看起来都是一致的，因此他们开始黑客攻击只会让CSS更难维护和理解。总是有好的做法可以遵循：

• 使用重置。
• 评论CSS。
• 使用现有的CSS框架而不发明 轮。
• 使用面向对象的设计 尽可能。

如果你遵循这些做法，任何人都可以使用firebug跟踪CSS。

Answer 6

是的..最大的问题是CSS没有任何流行的设计模式。这是我打破其他人的css的方式

• 通过萤火虫检查每个元素
• 尝试找到包装器
• 因为css总是顺序尝试找出哪个元素继承了谁
的属性

当我完成这个程序时，我通常会对他们完整的设计方法有所了解。

编辑：
最重要的是，如果您发现故障，请不要介意纠正已编写的CSS。它会为你省去很多麻烦。如果故障太糟糕，请继续寻找解决方法。

Answer 7

我在解决同样的问题时遇到了困难，发现通过别人的CSS来解决问题时，这很有帮助，专注于三个问题：

• 布局适用于大型结构内容，例如display:，position:和float:，或任何其他关于页面在课程级别结构的CSS
• 颜色是关于装饰的。背景图片和颜色等。
• 排版就是文字。

通过一些练习，获取一大块CSS并一次取出这些类别并不困难。您可能会发现将CSS放入文本编辑器并将规则重新排序为布局/颜色/排版（或布局/排版/颜色）顺序会有所帮助。完成此操作后，您可能会发现更容易推断出设计中发生的事情。

布局和排版之间可能存在一些重叠，如何使用边距和填充（有时是边框）。你需要根据具体情况来解决这个问题。

有趣的是，大多数“hacks”（通常是IE的解决方法）似乎属于布局类别，尽管你可能会遇到一个排版黑客，它涉及获得一致的基本字体大小。