编写CSS容易出错的地方(以及如何避免它们)

我使用CSS越多,我认为它越是狂野的西部。它是成熟的,无处不在的,但缺乏像其他类似工具中给出的基本常识特征。在与几个具有良好架构后端,广泛的测试覆盖范围和良好的文档的现代MVC网络应用程序工作后,我经常发现样式表是巨大的意大利面垃圾堆。

我可能是不公平的。它诞生于网络仍在发展的时代,观念正在被抛出,流行的观念开始坚守。

尽管我相信CSS很难,但世界上的每个网站都需要它,如果没有它,就无法生存。所以这里有一些关于什么是坏的以及如何在写作时保持理智的想法。这将成为一份工作清单,所以未来会让我感到困扰的任何事情都会落到实处。

1.全局样式

我对CSS的第一个也是最大的挑战是,任何样式声明都可以改变页面上任何元素的任何方面。如果你刚刚开始将脚趾头浸入网络,这是超级强大的,但对于大型网站来说,这往往是非常危险的。几乎所有的前端开发人员在他们职业生涯的某个时候都会添加/更新/删除一个样式,只是发现它偶然泄露到另一页的其他部分。

我认为这是CSS最重要的问题。它使任何模块化概念都非常困难。明天,开发人员可能会粘贴几个!important标签,并废弃封装好的可重用小部件。

SASS / SCSS帮助我们在这里,但不完全。如果你是一个很好的小开发者,那么通过在父类中嵌套规则可以显着减少泄漏风格。

这样比较好,但这不是一个傻瓜证明的解决方案。它只需要一个不小心的风格带你回到地狱。一个紧迫的最后期限迫使你做出一些可疑的妥协(即黑客)。

如果您告诉任何后端开发人员他们必须使用一种赋予全局变量全局范围的编程语言,让每个对象的内部状态都可见,让其他开发人员重写他们的代码,他们可能会当场辞职。但这是CSS开发的疯狂现实。一切都准备好了。不变性?Pfffshh。

最佳解决方法

我所遇到的围绕全球范围的最佳方式是采用CSS命名系统BEM,该系统期望开发人员以模块化方式持续编写代码。它避开危险泄漏习惯像造型使用标签(例如h1p等),而是更喜欢在类名的造型。为了避免与类似名称发生意外碰撞,故意命名为模块(或BEM术语中的块)的类名。

通常有一个使用标签来创建一组默认样式的参数。对于大多数网站来说,这通常是一个好主意。但是,如果你只是在任何地方压倒这些风格,我会说不要打扰。把它们放在通用工具类(如.paragraph.heading-1等),因为你需要使用它们。

BEM绝不是完美的。在任何地方写大,长,名字空间的课程都会很麻烦。你还在写CSS。你仍然可以编写可笑的风格,把所有东西都搞砸了。你仍然需要纪律。但是它所提供的是结构和一套规则,可以帮助你编写更好,更可维护的风格。

2.特异性

特定性是CSS用来决定哪种风格比其他风格更重要的机制。根据我的经验,它几乎总是以最后(或在这种情况下是最高的)进行竞赛。大量的!important标签,任意ID的样式以及不需要的div包装,其整体目的是将特定的特性微调到比现有的风格稍高一点。真实的故事。

如果你正在制作一个新的用户界面元素,但另一个由你的同事编写的非常具体的风格正在你的方向,你会:

  1. 投入时间了解你的同事的UI小部件,找出风格变化对网站其他部分的影响,并据此重构。
  2. 或者用一个!important

根据您所工作的环境类型和代码库的大小,您的选择可能会有所不同。

面向对象的语言通过继承和子类化来解决这个问题。最不重要的和非特定的方法位于继承树的顶部,最具体的位于底部。在我看来,将这些面向对象原则应用于UI的工作要比CSS的特异性要好得多。UIKit例如,熟悉iOS的任何人都会熟悉将通用UIView小部件与更具体的子类配合使用,以覆盖某些属性。另一方面,你通常需要编写更多的代码,并在这种覆盖行为上多花点心思。

最佳解决方法

不要参加到底的比赛。一般来说,确保你的风格不太具体。

  • 尽量不要使用!important(有时你必须在使用第三方嵌入时)。
  • 不要在ID(非常具体)上设计风格。
  • 使用类名(非特定)。
  • 避免在风格选择器中包含后代,因为这会增加特异性。使用SASS / SCSS,嵌套样式可以编译为后代选择器,因此不要嵌套。

如果您使用的是BEM,那么您已经遵循了这些规则。👍

3.隐式百分比规则

任何以前在填充规则中使用百分比的人都会意识到事情会变得多么混乱。

如果你是CSS新手,上面的风格可能让你暂时想不到。目前还不清楚这10%是如何行事的。什么是10%?它可能是……

  • 视口宽度
  • 视口高度
  • 的宽度 .sidebar
  • 的高度 .sidebar
  • 父级宽度的 .sidebar
  • 家长的高度 .sidebar

完全不清楚它的表面。实际上,它会使用父元素的宽度来计算百分比。这给出了一些不直观的结果,比如当浏览器的宽度改变而不是高度时垂直填充改变(顺便说一下,这种怪异常常用来破坏响应的高宽比)。这也意味着,如果你想让你的垂直填充物响应你的容器的高度,你就不能。😞

在理想的世界中,无论何时使用百分比,您都必须明确指定应该对应的值。我认为这是合理的预期。

最佳解决方法

不幸的是,你可以做很多事情来解决这个问题。

如果您正在设计相对于视口宽度和视口高度的尺寸,那么我建议使用vwvh单位。的支持是相当不错的,你不必faff周围的百分比。只需注意移动设备的特性,因为视口的宽度和高度可以根据浏览器chrome是否显示而改变。

在解决隐性个问题而言,我认为增加单位样的方法vwvh是一个很好的解决方案。我只是希望他们更进一步。

5.z-index

当Z指数令人头痛的时候,一个常见的解决方案,核能解决方案是:z-index: 999999。一旦发生这种情况,就会出现混乱。任何需要在未来出现的东西都可能包含额外的9。

由于缺乏背景,我认为这一切都开始走下坡路。由于z-index规则在所有样式表中单独指定,因此它们之间的关系不明确。

最佳解决方法

如果我们受到纪律处分,SASS / SCSS可以在这里帮助我们。将我们所有的z-索引定义为变量,给我们提供了我们需要的上下文。

我们可以清楚地看到我们的时事通讯模式超越了我们的导航,这超出了我们的页面内容。

我也倾向于在数百个工作,所以如果我们需要,我们可以插入其他z索引。如果每个z-index像上面那样存储,这并不重要,因为只需在一个地方轻松更新所有值即可。

5.你必须使用它

像JavaScript一样,CSS是浏览器的事实上的语言。它是网页样式的唯一选择,所以必须被接受,疣和所有。希望有一天浏览器将成为不可知论者。有一天。

另一方面,CSS在多个不同的平台上(相当)一致地使用,并不是iOS,Android和科技生态系统其余部分正在成为的围墙花园。

最佳解决方法

退出前端Web开发。如果这不是一个选项,艰难,你必须使用CSS。

Back to Top