代码之家 › 专栏 › 技术社区 › MotoWilliams

如何理解别人的CSS架构?

architecture design-patterns css

MotoWilliams · 技术社区 · 7 年前

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

出于某种原因,我在使用后端代码时没有遇到同样的困难。在快速了解特性的工作原理,快速检查控制器和模型代码之后,我将对该体系结构感到满意。我认为,“可以合理地假设将有一个Employee类继承自部门控制器使用的Person类”。如果我发现了与整体建筑风格不一致的不方便的细节,我有信心我能把东西锤回原处。

在其他人的CSS工作中,我很难看到不同类之间的“关系”,以及类的使用时间和方式。当有很多继承规则时,我感到不知所措。

我很难表达我的问题。。。我想知道的是,为什么我在别人的CSS架构中比在别人的业务逻辑层中更难看到全局呢?

**它是否与CSS是一种相对较新的技术,并且没有很多流行的设计模式有关?

7 回复 | 直到 16 年前

Brian Moeskau 16 年前

我想说的是,一般来说,大多数开发人员编写CSS的方式没有“架构”(至少以我的经验是这样)。大多数人在需要规则时以增量方式构建CSS——通常不像代码体系结构那样预先规划好。通常人们用注释块对相关规则进行分组,或者在单独的样式表中进行分组,但实际上没有太多可遵循的既定模式。

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

vikramjb 16 年前

我认为很多时候人们只是把css拼凑在一起,而没有一个整体概念。很多时候,他们只是在布局时添加一些东西,很少考虑他们建立的任何“约定”,这些约定在他们的脑海中并不直接新鲜,从而导致各种各样的命名冗余和差异。

我不认为CSS是新的,因为CSS通常是设计师的领域,而且在设计东西时,他们通常不会从架构的角度来考虑——一切都有点临时性。

我知道当我是一个领导的时候,我首先要为班级命名和组织建立一套正式的惯例,然后把它灌输给前台的下属:-)

Ólafur Waage 16 年前

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

Rob 16 年前

可能是因为CSS不是架构而是表示。架构是用HTML构建的。是HTML将您引导到元素。

Srikar Doddi 16 年前

开发人员承受着巨大的压力来确保所有浏览器的设计看起来都是一致的,因此他们开始进行黑客攻击,这只会使CSS更难维护和理解。总有一些好的做法可以遵循,例如:

使用重置。
注释CSS。
使用现有的CSS框架而不发明轮子。
只要可能。

ZX12R 16 年前

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

通过firebug检查每个元件
试着找到包装纸

当我完成了这个程序,我通常得到了他们的完整设计方法的窍门。

最重要的是,如果你发现了问题,就不要介意纠正已经编写好的CSS。这会让你省去很多头痛。如果故障太严重,就去寻找解决方法。

Dave W. Smith 16 年前

我与同一个问题作斗争,并发现在处理其他人的CSS时,将问题分为三个方面是很有帮助的:

对于大型结构,如 display: , position: float: ,或任何其他有关页面在课程级别的结构的CSS。
排版都是文字。

通过一点练习,一次一个地挑选一大块CSS并梳理出这些类别并不太困难。您可能会发现,将CSS放到文本编辑器中并将规则重新排序为layout/color/playprography(或layout/playprography/color)顺序会有所帮助。一旦你做了这件事,你可能会发现这是更容易的原因是什么正在进行的设计。

在如何使用边距和填充(有时还有边框)方面,布局和排版之间可能有一些重叠。你需要逐案解决这个问题。

有趣的是,大多数“黑客”(通常是IE的变通方法)似乎都属于版面类别,不过你可能会遇到一个排版黑客,涉及到获得一致的基本字体大小。