编写CSS代码的8个策略

1、编写css代码的8个策略编写基本的css和html是我们作为web开发人员学习的首要事情之一。然而，我碰到的无数应用程序明显没有人花时光真正考虑前端开发的长期性和可维护性。我认为这主要是由于许多开发人员对组织css / html和javascript的策略缺乏深刻的理解。在我和我们团队的观念中，编写可维护的前端代码十分重要。尽管我们有一些用法了多年的客户端，但要记住你永久不会是唯一一个工作于应用程序的人。仅仅由于你的一次性元素和配置对你故意义，并不意味着它们对下一个可能继承应用程序的人故意义。为了防止这篇文章太长，我今日将主要研究css代码。javascript代码是另一个彻低不同的麻烦问题。

2、这篇文章的目的不在于规章手册，而在于你正在编写css时的指南。希翼能协助大家找到自己的流程，而这篇文章的目标是让你的css全都，容易，易于用法。下面是8个保持css有条理和易于长久维护的秘诀。1.不要写不需要的样式定义例如：编写display:block;时要注重，由于无数元素默认有这个样式。另一个例子是在元素上定义字体大小，它将继承你正在定义的正文字体大小。目标是双重的：削减css文件的长度，以便扫瞄。明确你的css类需要做什么，而不是定义一堆已经产生的垃圾。这里有一个常见问题是css没有清理整洁，此时，为了简洁起见，可以彻低删除。2.将css看作可重用组件不要将css元素视为每个单独页面上

3、的特定表单或元素，假如你可以定义可重用的css有用程序和组件以供自己用法，则可以削减无数复杂性。编写旨在重用的类的作用：确保你的设计在不同的页面之间保持全都。当你在无数页面上分享css类时，你知道当你转变这个类时，它会在每一个浮现的页面发生转变。这使得编写css真的很快。首先，假如大多数样式被定义为你所知道的有用程序和类，那么你就不必花费大量时光刷新和重新创建应用程序中已存在的样式。3.在css中定义有用工具来干你的css我们将’utilities’定义为一个css类，事实上它只用来做一件特定的事情，而不是封装囫囵元素。你会看到这个策略常常用于流行的cs

4、s框架，如bootstrap和foundation。在这些流行的框架中你所看到的一些例子是：例如，用法。hide，就不必每次想要在页面上躲藏元素时就得编写一个新的类——你只需要在你的元素上加上。hide类，它会使元素display: none; 。我们写了一些有用程序文件，这些文件在应用程序之间分享，用法一些常用的有用程序可以削减为每个元素编写特定样式的需求。一个很好的例子是我们如何用法margin和padding有用程序。下面是padding有用程序的一个容易例子：通过结合用法这些工具，我们可以与我们间距的像素数保持全都，并且可以迅速标志页面，而不必编

5、写十分多的css。有用程序背后的理念是，你认为你可能会不止一次地用法它们。假如它是一次性样式，或者假如你认为组合样式会常常用法，那么可能它作为css类将可以更好地工作。4.除非肯定需要，否则避开嵌套假设有一些复选框的表单。在这个特定的状况下，你需要复选框内联（并排）。所以你试图像这样写样式：然后在这过程中，你意识到你需要列表元素中的一个链接事实上是黑色的。所以你试图为黑色的链接编写一个工具类：此处。link–black链接将被css特别性所笼罩，并且将无法压倒。my-form li a样式。现在你可能想要确保列表元素中的全部锚标志是红色的，但是你不知道将来的元素会怎么样以及

6、可能会对设计做出什么样的更改。你可能会问，好的亲，那么你怎么解决上面的问题呢？通过上面的例子，你应当明了锚标签的色彩应当是一个远离默认链接色彩的变体。所以，在这种状况下，我会100确定一个额外的工具类来处理红色链接。下面是实践中可能的处理例子：然后将其添加到html中的每个li元素。我在这里作出的假设是：某一天，此红色的链接将在应用程序的其他地方被用法。我不想把它嵌入到用户表单中，由于那样我就不得不在将来编写另外一个样式来解释需要红色链接的状况。另外，由于我将自己的悬停定义在自己的锚点上，所以红色链接将会变成黑色悬停，而不必然义任何其他样式。5.利用bem防止嵌套能够真正防止过度嵌套的一个策略

7、是名为bem（block element modifier）的命名策略。用法bem的一个很好的例子就是当你有一个真正详细的样式的组件时，假如用法有用程序会太棘手和复杂的话。这个例子看起来像这样：你可以从这个例子中看到，我可以从我的样式表中看到。profile_photo嵌套在。profile中，然而事实上并不需要嵌套这个类。这真的是bem最棒的地方，也是为什么我建议用法它的缘由。6.只用法！inportant作为最后的手段在一个类上放上！important定义会使得笼罩代码变成一件令人头痛的事情，特殊是当你试图处理媒体查询时。这是我在处理foundation的某个版本碰到的一个令人头痛的问题，

8、由于他们打算对可见类打上！important。这对于移动设备也是一个疼痛的根源。例如，假如你希翼手机屏幕显示某些内容，则必需用法另一个！important类来重写。hide类以显示它。我向来找不到用法！important的有效借口，除了在别人错误用法！important定义的状况下。7.重新发明轮子需要时光和精力，所以要慎重考虑比如说在客户端项目中创建自己的网格css框架，可能就是一个重新发明轮子的例子。按照我的阅历，除非你想知道它是如何工作的，否则自己写这些东西其实并没有多大的益处。有许许多多的边缘状况可以让你自己动手编写代码，所以为什么不用法别人已经写好的免费又能工作良好的代码呢？也就是说

9、，自己动手创建可能是一个很好的学习阅历——但这很可能不属于生产应用程序的过程。好的，那么javascript插件呢？在议论javascript或jquery插件时，我要说的是，对于任何你用法的具有很好集成选项的真正常见组件来说，状况也是如此。其中的一些例子是照片轮播的javascript转盘，或日期挑选器。这里的边缘案例是用法一些带有封装组件规律的javascript框架的插件（react，ember，angular等）。假如你想要做的事情相对容易，有时可能将这些插件放到组件中会更棘手。例如，我会用法立刻可用的foundation或bootstrap模块，假如我正工作于依靠jquery的项目，但是会在react中构建我自己的模块（只是由于编写组件以便通过引入jquery插入到react组件中会更简单）。8.关注前端代码！