CSS最佳实践：不良CSS的九种迹象

CSS或级联样式表-定义网页外观和行为的语言。 Web开发人员经常将它忽略为不需要太多关注的“简单”语言。 记住一些最常见的属性，一般的流程和谷歌搜索更晦涩的属性是必经之路。 但是，正如经验丰富的开发人员所知道的那样，任何语言都不应该被忽略，因为总会有好事和坏事来做某事。

使用CSS，很容易以错误的方式进行操作，因为没有编译器会引发错误，也没有警告或注意错误的实现。 像JavaScript这样的编程语言拥有大量跟踪良好代码质量的工具，有些甚至向开发人员抛出信息，指出某些功能没有以正确的方式实现。

在这篇相对简短的文章中，我们将介绍开发人员面临的一些常见问题以及如何解决它们。 这与特定视觉组件的特定实现细节无关。 相反，该清单着重于思考过程，体系结构和方法。

CSS的复杂性

CSS难吗？ 没有！ 绝对不是，它有一些非常基本的结构规则。 您有选择器（类，id，元素），属性和范围。 它比诸如C，Java或PHP之类的语言少。 开发人员可以在几分钟的阅读和开始样式中获得整个想法。 当然，要知道margin和padding之间的区别，可以看看w3schools，但是何时使用它会带来一些经验。 但这不是火箭科学。

现在，使事情变得更加复杂的是选择器争用的所有方式都将覆盖下一个选择器，以及一个属性如何影响另一个属性（例如display：block vs display：inline）。 然后我们有一些更小的细节，例如边距折叠，z索引堆叠，GPU vs CPU性能属性，包装盒模型和版式属性。

最重要的是，新的CSS功能并非总是在浏览器中以相同的方式实现，有些甚至根本没有实现，而其他功能则需要不同的属性。

如果我们看一下上面的两段，我们将看到前端开发人员在使用CSS时遇到的两个主要阶段–一个是“哦，这就是全部吗？ ”第二个是“哦****，那还不是全部”。 这就是“ CSS复杂性”的意思

有很多细微的东西交织在一起，很难扩展。 如果仅构建一个组件，则很容易-您可以对所看到的内容进行样式设置，并且可以正常工作。 但是将单个组件放在更大的应用程序中，将应用其他样式。 您可能最终会遇到与其他类相同的类（例如.button），并且您的样式将应用于整个应用程序，从而破坏了所有内容。 压力很大！

WordPress CSS：初学者基本指南

如何编写CSS：对抗其复杂性

聪明人提出了一些解决方案，概述如下：

• BEM，SMACSS等CSS命名约定定义了类名规则，这些规则将减少发生冲突的可能性。
• JS中的CSS是一种较新的方法，实际上使您可以在JS文件中编写CSS组件（听起来很糟，看起来很糟，但至少有一定道理）。 通常对React，Vue等有效。
• CSS模块是JS中CSS的一种更为健全的方法，适用于以一个文件包含所有样式的人。 CSS模块封装了每个组件的样式，以使它们不会泄漏到其他组件，从而使可重用性的方式变得更加容易。 它还可以大大减轻压力！

第一个–命名约定可能是最难实施的，因为它没有任何工具可以帮助您。 作为开发人员，一切由您自己来理解和应用该约定。 您仍然必须考虑类名，它们仍然不应该冲突，然后您必须使整个团队都遵循它。 相当困难！

JS和CSS模块中的CSS是实现性修复。 它们从整体上更改了代码输出，这实际上使泄漏样式成为不可能。 但是他们需要完全不同的思维和构建设置，而这并非总是可行或不期望的。

最好的建议是：研究最常见和最成功的命名约定，使用适合您公司或生态系统编码标准的命名约定。 了解组件分离，并开始考虑构建大型应用程序的范围和单个单元。 从一开始就不是一个大型应用程序，这将是不可能管理的。

如果您正在处理包含像React这样的库或像Vue这样的框架的堆栈，那么请研究其他工具，这些工具可以用来管理样式。 对于任何初学者到中级CSS开发人员来说，它们都是非常有用的帮助！ 除非您有更好的选择，否则您可能永远不想抛弃它们。

随时注意新工具！ 它们阻止了我们解决开发人员社区已经发现的问题，并修复并提供了解决这些问题的方法。

现在，我们概述了CSS复杂性的含义以及一些与之抗衡的入门技巧，让我们深入了解更详细的概述并提供直接示例。

网站设计技巧：如何在网页设计中提高您的游戏水平

不良CSS的九种迹象

此列表绝对不完整，距离还很远。 不幸的是，您将面临无数其他问题，并希望在Stackoverflow之类的网站中找到针对特定问题的直接解决方案。
但是，如果您想提高自己的游戏水平，则在解决几行CSS问题时，您必须了解它们的作用。 为什么要更改标记，为什么要更改一些选择器，属性？

利润率很奇怪

开发人员面临的一个普遍问题是，两个元素的总和（上下）不相加。 例如，我们有两个<p>元素，其边距为：20px 0;。 它们之间的总空间是20像素，而不是40像素。这是由于页边空白导致的。 除非元素浮动或绝对定位。 对于几乎所有定义，几乎都无处不在此“例外”。

Z索引：9999999，但仍不在Z索引的顶部：1

首先，几乎不需要编写如此高的z索引。 我什至看到过像99999999999999之类的值或更高。 首先，z-index的最大值是2147483647，因此上述任何内容都是无用的。 其次，它不是那样工作的。 哪些元素位于顶部由堆栈上下文定义，而不仅仅是z-index值。 请参见下图：

不激活正确的属性

这是一个相当简单的问题，但是一些开发人员在动画和采用方法方面遇到困难。 首先，可以制作动画吗？ 可以具有起始值，终止值以及介于两者之间的任何值。 不透明度就是这样一个属性，您可以从0开始，从1结束，并在0.3、0.6758、0.9875等之间添加无限步长。您不能为“显示”设置动画，因为内联和网格之间没有中间步长。

低效的动画

动画上FPS不好的最常见原因是由于动画设置错误。 如果更改绝对元素的“ left”属性，则将利用CPU进行计算。 但是，如果使用transform，那么它将是GPU。 众所周知，GPU更好地进行图形处理。

但是当阴影没有其他选择（如左/变换）时，您将如何为阴影设置动画？ 好吧，动画不透明！ 有两个元素，一个具有开始状态，一个具有结束状态。 然后淡入淡出，然后淡入淡出。这会使它看起来像阴影在扩大，而实际上它只是在消失。

如果可能，请不要为影响布局的元素设置动画。 布局计算非常昂贵，CPU只能进行有限的计算。 通常，每16毫秒少于一，这将导致FPS低于60。

选择器过深

什么是修饰符？ 一个类，您可以将其添加到另一个类并替换其某些属性。 例如：.button的颜色为：红色。 .button-primary，具有颜色：蓝色。 因此，当您将.button-primary添加到.button时，您希望以蓝色结尾。 十分简单。 虽然，并非每次都那么容易。 并非每次都是这样的组件。

有时，我们想覆盖一个组件，即特定页面上另一个组件的子组件。 因此，我们最终得到这样的结果：.page-name .section-name .component-1 .component-2 {…}已经深了四个级别。 但是事实证明，我们可以简单地执行.page-name .componen-2 {…}。 越短越好！ 因为如果由于某种原因发生这种情况而您必须覆盖该新样式，则不必深入5个级别，然后再深入6个级别。

深度选择器令人恐惧，人们最终使用！important。 当您要覆盖无法控制的内联样式时，应使用！important。 否则，这是一个危险信号，表明您做的事情不正确。

文件太大

现在，对于大型应用程序，当然会有很多样式，这是完全可以理解的。 但是它总是那么大吗？ 在SASS中扩展类（通过mixins）的不良方法会生成大型选择器链，滚动查看它们需要花费几秒钟。 适当的扩展名将大大减少该文件。 甚至可以将大小减小一倍。

包含框架（仅使用其中的几个属性）也是大文件的常见原因。 将bootstrap / foundation，font-awesome，animate.css和其他一些类似的框架/库捆绑在一起，最终会得到一个巨大的文件，使用该文件的比例约为2％。 清理，保持整洁，仅使用实际需要的东西。 很多时候甚至不需要框架。

不需要时的框架

Bootstrap，Foundation，UIKit和所有其他框架都很棒！ 它们解决了一个实际问题，对Web开发社区非常有价值。 无需了解非常适合制作仪表板和站点的HTML或CSS。 但是，从这种情况下走开，开始编写一些CSS，您会遇到一些问题。

• 您必须正确了解如何构建它们以及如何包含它们
• 您必须阅读他们的文档才能找到他们提供的自定义设置和mixin。
• 您必须遵循他们的标记并教会您的团队这样做。
• 您必须真正了解如何扩展和样式化以创建独特的视图。

正确包含它们意味着您仅使用所需的内容。 要拥有这样一个框架，而不是禁止您构建任何自定义项，您必须知道它的内部工作要比一般情况要好。 为了实现任何自定义设计，您将必须修改设置和属性。 然后编写一些自定义CSS。 该自定义CSS可以覆盖框架提供的所有内容。

因此，如果没有真正需要这样的CSS框架，但是仍然有一个CSS框架，并且它没有得到正确利用，这是一个危险信号，那就是出现了问题。 当您开始使用它时，您很可能最终会使用它，直到项目生命周期结束。 因此，这是一个重要的决定。

不允许内容定义大小

这更多是一个初学者级的问题，但这是一个非常常见的问题。 您应该给内容应有的自由。

例如，您不想将网站的width属性设置为1200px。 您想要将最大宽度设置为1200px。 这样，视口将使您的网站保持响应状态。

然后，输入字段的高度不应为40px，其填充值为1em。 现在，字体大小就是定义大小的内容。 而且，如果内部内容增加，该元素将不会中断。

定义大小时的这种思维方式在整个应用程序中仍然很重要。 每个属性都必须考虑它。 理想情况下，不要为内容区域的宽度设置％，因为那样的话，您还必须编写媒体查询。

如果具有最大宽度，则当浏览器缩小到该最大宽度以下时，内容将填满浏览器宽度，然后正常缩小。 否则，您将不得不编写该大小的媒体查询。 然后针对网站上写的其他任何自定义尺寸。 由于方法不好，因此增加了复杂性。 与我们已经讨论过的所有其他方面几乎相同。

JavaScript骇客

JavaScript可以创造奇迹！ 但这并不总是需要的。 您可以使用受良好支持，不需要功能（此后最好自动测试）且不需要您的其他FE成员也了解JS的CSS来完成很多工作。

当然，这里有标准的切换功能，您可以在：checked时使用复选框输入来更改样式，可以轻松触发背景叠加层，还可以使用counter等属性来创建比简单的<ol>列表更多的属性。 。

这里的建议是首先寻找CSS解决方案。 假设您要建立一个弹出窗口。 它显示在中间（位置：固定）。 然后，您想从[X]图标关闭它，或者单击它时将其关闭。 在JS中，您需要编写事件，该事件将在弹出窗口内容之外的任何内容上触发。 但是仍然会在弹出内容中的[X]上触发。

相反，从CSS中，您可以编写另一个<div>，该<div>的弹出窗口下方具有100vw，100vh大小和z-index。 然后，您只需在JS（单线）中将该div作为目标。

另一个示例–您希望可以在内容中放置一个按钮，该按钮将“扩展”其后的所有内容。 使用CSS简单，使用JS更复杂。 使用CSS，您可以执行以下操作：

 Label.button-直观地设置按钮样式。

 Input：not（：checked）〜* {display：none}-将所有内容隐藏在同一容器中。

在同一容器中，您需要在JS中使用自定义逻辑。 您还需要选择所有元素，这需要遍历DOM树。 然后将CSS样式应用于它们，最终以style =”“标签结尾，如果出于某种原因必须解决这些问题，则反过来需要！important。 幸运的是，在CSS中，它非常简单。

成为优秀网页设计师的途径

结论

如您所见，这些是很少见的常见问题。 为了涵盖所有内容，将需要一本书。 但是希望它们会给您一个好的起点，并提醒您考虑由于错误的方法而可能引起的任何潜在问题。 查找此类问题需要大量的经验和大量的阅读经验。 如果您在这里得出结论，那么您的阅读路径正确了，现在该练习了！