摘要

最后修改：2020年5月27日阅读时间：观点CSS或级联样式表-定义网页外观的语言，有时会表现Web开发人员经常将它忽略为不需要太多关注的“简单”语言。记住一些最常见的属性，一般的流程和谷歌搜索更晦涩的属性是必经之路。但，正如更有经验的开发人员所知道没有一种语言应该被忽视

最后修改： 2020年5月27日 阅读时间： 观点

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

有了CSS， 用错误的方式做事非常容易，因为没有编译器会抛出错误， 没有关于不良实施的警告或通知。 JavaScript之类的编程语言拥有大量跟踪良好代码质量的工具， 有些甚至向开发人员抛出消息，指出某些功能没有以正确的方式实现。

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

CSS难吗？ 不！ 当然不， 它具有一些非常基本的结构规则。 您有选择器（类， ID， 元素）， 你有属性，你有范围。 比C语言还少， Java或PHP。 开发人员可以在几分钟的阅读和开始样式中获得整个想法。 当然， 要知道边距和填充之间的区别， 您可以看看w3scho醇s， 但何时使用需要一些经验。 但这不是火箭科学。

现在， 使事情变得更复杂的是选择器竞争的所有方法，这些方法会覆盖下一个， 以及一个属性如何影响另一个属性（例如display：block vs display：inline）。 然后我们有一些更小的细节，例如边距塌陷， Z索引堆叠 GPU与CPU的性能属性， 盒子模型和版式属性。

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

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

有很多细微的东西交织在一起，很难扩展。 如果您只构建一个组件， 这很容易–您可以随心所欲地设置样式，并且可以正常工作。 但是将单个组件放在更大的应用程序中，将应用其他样式。 您可能最终会与其他班级进入同一班级（例如）。按钮），您的样式将应用于整个应用程序， 打破一切。 压力很大！

WordPress CSS：初学者基本指南

有一些聪明人提出的解决方案， 概述将是：

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

首先 - 命名约定 它可能最难实现，因为它没有任何工具可以帮助您。 这一切都留给了您作为开发人员 了解和应用 惯例。 您仍然必须考虑类名， 他们仍然不应该冲突，然后您必须让整个团队跟随它。 相当困难！

JS中的CSS 和 CSS模块 是实施修复。 他们整体上改变了代码输出， 这实际上使得不可能泄漏样式。 但是他们需要完全不同的思维方式并建立设置， 并非总是可行或不需要的东西。

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

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

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

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

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

此列表绝对不完整， 不在很远的地方。 可悲的是 您将面临无数其他问题，并希望在Stackoverflow之类的网站中找到针对特定问题的直接解决方案。
然而， 如果您想加强自己的游戏， 当您用几行CSS解决问题时， 您必须了解他们的工作。 为什么您必须更改标记， 以及为什么要更改一些选择器， 特性？

开发人员面临的一个常见问题是，两个元素的总和（上下）不相加。 例如， 我们有两个 p> 边距为20px 0;的元素。 它们之间的总空间为20px， 不是40。 这是由于保证金崩溃。 除非元素浮动或绝对定位。 对于几乎每个定义，几乎都无处不在此“例外”。

首先， 几乎不需要编写如此高的z索引。 我什至看到过像99999999999999之类的值或更高。 第一的， z-index的最大值是2147483647， 所以上面的任何事情都是没有用的。 第二， 它不是那样工作的。 哪些元素位于顶部由堆栈上下文定义， 不仅是z-index值。 请参见下图：

这是一个非常简单的问题， 但是一些开发人员在动画和采用方法方面遇到了困难。 第一的， 可以制作动画吗？ 任何可以具有起始值的东西， 最终值以及介于两者之间的任何值。 不透明度就是这样的属性， 您可以从0开始， 在1结束 并在0之间添加无限步长。3。 0。6758， 0。9875等 您不能为“显示”设置动画，因为在嵌入式和网格之间没有中间步骤。

动画上的FPS较差的最常见原因是由于错误地设置了动画属性。 如果您更改绝对元素的“左”属性， 您将利用CPU进行计算。 然而， 如果您使用转换， 那将是GPU。 众所周知，GPU更好地进行图形处理。

但是你怎么给阴影加动画， 什么时候没有像左/变换这样的选择？ 出色地， 动画不透明！ 有两个要素， 一开始 状态， 一个以结束状态。 然后淡入淡出开始和结束。 这会使它看起来像阴影在扩大， 实际上，它只会消失。

如果可能的话，请勿为会影响布局的元素设置动画。 布局计算非常昂贵，CPU只能进行有限的计算。 经常， 每16ms少于1个 这会使FPS低于60。

什么是修饰符？ 一类， 您可以将其添加到另一个类并替换其某些属性。 例子：。按钮有颜色：红色。 。按钮主要 有颜色：蓝色。 所以， 当您添加时。以按钮为主。按钮， 您想要以蓝色结尾。 十分简单。 虽然， 并非每次都那么容易。 并非每次都是这样的组件。

有时， 我们要覆盖一个组件， 特定页面上另一个组件的子级。 因此，我们最终得到了这样的内容：。页面名。section-name。组件1。component-2 { … } Already four levels deep. 但是事实证明，我们可以做到。页面名。componen-2 { … }. 越短越好！ 因为如果由于某种原因发生这种情况，您必须覆盖该新样式， 您不必深入5个层次， 然后6 然后更多。

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

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

包含的框架 其中只有少数几个属性正在使用也是大文件的常见原因。 将引导程序/基础捆绑在一起， 字体很棒 动画。css和其他一些类似的框架/库，最终您会得到一个巨大的文件，您将在其中使用约2％的文件。 清理， 保持整洁，只使用真正需要的东西。 很多时候甚至不需要框架。

引导程序 基础， UIKit和所有其他框架都很棒！ 它们解决了一个实际问题，对Web开发社区非常有价值。 无需了解非常适合制作仪表板和站点的HTML或CSS。 但是不要这样 开始编写一些CSS，您会遇到一些问题。

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

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

因此，如果真的不需要这样的CSS框架， 但是仍然有一个没有被正确地利用， 这是一个危险信号，表明出现了问题。 当您开始使用它时， 您很可能会在项目生命周期结束之前使用它。 因此，这是一个重要的决定。

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

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

然后， 输入字段的高度不应为40px， 它应该有1em填充。 现在， 字体大小， 内容是定义大小的要素。 如果里面的内容增加了， 元素不会中断。

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

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

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

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

这里的建议是首先寻找CSS解决方案。 假设您要建立一个弹出窗口。 它显示在中间（位置：固定）。 Then you want to close it from the [X] icon or when you click around it. 在JS中，您需要编写事件，该事件将在弹出窗口内容之外的任何内容上触发。 But still trigger on the [X] which is in the popup content.

反而， 从CSS中，您可以编写另一个 股利> 有100vw， 弹出窗口下方为100vh大小和z-index。 然后，您只需在JS中定位该div， 这是单线的。

另一个例子-您想要一个可以放置在内容中的按钮， 这将“扩展”其后的所有内容。 简单的CSS， JS有点复杂。 使用CSS，您可以执行以下操作：

标签。button-直观地设置按钮样式。

Input:not(:checked) ~ * { display: none} - hide everything after it in the same container.

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

成为优秀网页设计师的道路

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

长期发展， 支持， 和您的WordPress平台的创新。 DevriX为中小型企业和快节奏的初创企业提供技术合作伙伴关系。 我们构建WordPress解决方案并扩展平台，最多可生成20个，000，每月000次网页浏览。

浏览更多：发展

DevriX的创意主管和前端开发人员
亚历克斯（Alex）的热情在于学习新的网络技术， 探索创新的方法来优化网站性能并改善用户体验。 亚历克斯（Alex）喜欢骑自行车和数字艺术，最近开始在ELSYS技术学校教授设计。