一些CSS的设计原则

本文主要介绍CSS的一些设计原则。从虚拟对话的五个原因入手，介绍了他的一些CSS编程思想，需要朋友参考。
我相信大多数人都对CSS有过痛苦的经历。从我进入公司的时候，我听到最多的CSS相关的讨论在接下来的两年，就是&lsquo；很难调'。所以我一直在探索的问题，多少人认为CSS是难写，如何让其他人写CSS的时候更优雅。在代码审查中，我逐渐发现问题。实际上很多人已经掌握了CSS的知识，但我不知道如何将类编写成组。最后，我们必须在需要改变样式的元素上命名类，然后将所有属性写入到类中。如果优先级不够，则添加前端选择器，结果是CSS代码不断积累，重复性和冗余性增加，维护困难。

问题已经找到了，但是如何解决呢虽然我已经在项目组做了好几次，我经常提出一些问题，当我在代码审查，但我还是有点影响。有时很容易知道什么是正确的，但不知道如何做是正确的。直到最近，读了几本书，我们发现一种方法来指导CSS设计，为什么，五或五的问题。五个问题来自丰田的精益生产。后来，它自然而然地衍生成了精益创业。它将在DDD和UX相关的书籍看。它的主要目的是找出许多现象背后的真正原因，乍一看，它是一种管理方法，事实上，我认为它是找到问题和解决问题的根本原因的一种思维方式，因此它被应用到各个领域，而自然就是CSS所面临的问题。
现场实例

让我们先举一个例子，一天代码复查发现了一个CSS代码，它写了这个：

CSS代码将内容复制到剪贴板。
{马克斯宽度
马克斯：300px宽度；
}

这就引出了以下对话（纯属虚构）：

用户界面：它不应该这样写，这和直接内联风格有什么区别

如果我不添加最大宽度，页面上的元素左边会有一部分，还是可以添加边距外部边距

用户界面…我不确定，我从来没有遇到过这样的问题，肯定有问题。

写这封信真的很糟糕，我不知道这行代码意味着什么，也不能修改一段时间，但是我到底应该写些什么呢

嗯，好吧，让我们试试五为什么找到问题的根本原因。

嗯，CSS的问题一直困扰着我，最好是解决它。

首先，您为什么要向元素添加最大宽度

Rdquo：因为你不加一部分；

用户界面：那么为什么这个元素更重要呢

不要生气，因为我没有增加最大宽度。。我不确定，但我看了看DevTools。似乎它的父元素的宽度不对。

UI：它很接近，为什么父元素的宽度是错误的

Rdquo：因为父元素的内缘在两边是不同的；

UI：为什么父元素的内边界不一致

哦，我知道，父元素的父元素用来写最后一个伪选择器，它用来将填充权设置为0，因为父元素现在是最后一个，所以受到影响。

UI：不必担心，为什么要将最后一个元素的填充权设置为0

由于后面的原始元素是无法修改样式的控件，所以您需要将填充权设置为0，以便将其放下。

这就是问题所在，我们的意图是将填充正确的空间填充到填充正确的属性中，对吗而不是添加最后一个元素，我们要写一个类，也许' containerrsquo，部件，等等，然后删除最后一个伪选择器，所以一切都是正常的。原来的问题其实是没有问题的。

他说：结果真是太棒了。我了解到模式的出路问题不一定是代码问题。为什么五者太有用了

很多次反复问为什么的本质可以让我们发现问题，如果仅从表面来解决问题，可能会导致意想不到的后果，在这个例子中，最后一个伪选择器是通过写一行代码简单地没有找到根本原因造成的。这个例子也说明五原因CSS的好处，不仅找到了问题的根源，也使我们更清楚的写CSS的时候。因此，类命名为填料对困难问题迎刃而解，0元是一个用于控制容器，所以很容易觉得部件container这个名字，因为通过五个为什么的方法来找到真正的意图啊这叫做类，应该放在什么是自然的。
比例输入

但有时我们面临的项目不太好。Ldquo，为什么层次越多，CSS之间的关系就越复杂。现在让我们来谈谈五个重要的原则，我们为什么要投资比例。其主要目的是小投资，大问题和大的投资，这个问题的水平越高，和更大的投资。在CSS中，当我们发现风格例外，更多时候我们重复五的原因，我们发现根本原因，更严重的问题是，我们更应该解决的问题。

回到上面的例子，通过对问题的异常位置的元素，找到根本原因从控制要求的容器元素0种，因为第一次，所以解成较小的选择，用于控制和一类用于去除填充。这似乎很正确那一刻，但如果我们能找到这种控制从各种各样的问题，我们可以看到，问题水平提升。它不应该仅将类添加到控制调用的每个容器中。在这一点上，我们可以考虑其他方法，例如，将所有容器的边距设置为0，并将外部边界添加到内部元素中。如果问题级别继续提高，它也可以修改甚至替换控件，或者重建其他部分来适应控件，总之，我们应该根据问题的级别选择解决问题的方法。这种优势不仅是在精益生产中可以自动调整原始效率，而且在需求较清晰时也可以进行重构。

因为CSS的描述性的，这使得它非常自由，所以相同的要求，往往一百开发者一百实现。在一个要求第一次遇到，它写的最好的实现更加困难，只写一个特定的类扔在要求的属性。其实，问题不在于，但是否能重建原始代码时出现了同样的问题，写一个基于所有相关问题更普遍的类。经验丰富的UI开发有时是根据经验来判断，直接写类和Bootstrap框架。五为什么比例原则可以输入CSS驱动开发的很好，与根本原因不同的EL深深相连，甚至在不同的网页，这样可以缓解问题的水平，组织机构代码，直到问题再次找到这里，为了解决重建问题。