CSS最佳实践和技巧

为什么CSS声明的顺序很重要? 让我们先介绍一下基础知识.

CSS声明由一个或一组选择器和一个声明块组成. 在声明块内部，有带有属性和值的声明.

这些声明的顺序乍一看似乎不重要, 但定义一个秩序确实有一些优势. 一个明显的优势是一致性，这在大型团队中尤为重要. 有些开发人员随机编写声明，有些按字母顺序编写，有些按类型分组. Grouping is considered to be a good choice because it makes sense to write the positioning-related declarations first as some elements could be removed from the flow. 浏览器首先对其进行消化, and the developer can read the block with ease knowing where the element will be positioned right away. 就像Bootstrap创建者一样 Mark Otto, CSS开发人员 我发现以下的风格顺序很容易保持:

1. 定位
2. Box model
3. 排版
4. Visual

下面是一个一般的例子:

.{宣言
  /*定位*/
  位置:绝对的;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z - index: 100;

  /* Box-model */
  显示:块;
  浮:正确;
  宽度:100 px;
  身高:100 px;

  /*排版*/
  font: Arial, sans-serif;
  行高:1.5;
  颜色:# 333;
  text-align:中心;

  /*视觉*/
  background - color: # fff;
  边框:1px实线#eee;
  border - radius: 5 px;
}

对于使用CSS预处理器的开发人员，最佳实践是编写 @extend 规则至上 @include 第二个规则. The reason for that is the fact that you’re aware right away that those styles are inserted into the selector, 你可以很容易地在它下面覆盖它们.

当使用CSS构建复杂的用户界面时, 必须有明确的代码编写指南和实现方法. 有大量的在线资源提供了如何构建代码的建议, 最常用的命名习惯之一是“Block”, Element, Modifier”, 简称BEM.

这种方法基于三个构建块, 哪些可以组合起来描述最复杂的用户界面. The following example shows how a button element with an enclosing text container can easily be described using a BEM, 用SCSS书写:

//简单的按钮

// .O-button -red将按钮颜色更改为红色
$m: 'o-button';
.#{$m} {

	背景:白色;

	&__text {
		颜色:黑色;
	}

	&--red {
		背景:红色;

		.# {$ m} __text {
			颜色:白色;
		}
	}
}

编译后，上述SCSS会转换为以下CSS代码:

.o-button {
	背景:白色;
}

.o-button__text {
	颜色:黑色;
}

.o-button——红{
	背景:红色;
}

.o-button——红 .o-button__text {
	颜色:白色;
}

在上述代码中，a block is a top-level element, a parent that is meaningful on its own, and in our example this is a button .o-button. Child elements 是否在语义上与其块绑定, 它们只在它们所属的块的上下文中有意义. 在我们的示例中，它们由块名称后面的两个下划线表示 .o-button__text. Finally, modifiers 改变块的外观或行为. 在我们的示例中，它们用两个连字符表示块的名称 .o-button——红.

综上所述，BEM的命名约定如下:

.block {}
.block__element {}
.块,修饰符{}

下面的HTML示例使用了之前创建的样式:

This is a normal button

	Click


This is a button modified to be red

	Click

从编译的CSS中，您可能会注意到专一性被保持在最低限度. 另外, code reusability is encouraged by adding modifiers to describe the design variations of each element. Finally, BEM’s comprehensive class names make it a great methodology to be used when collaborating with other developers.

前端开发人员经常在需要垂直对齐某些内容时遇到瓶颈. 互联网上有很多技巧和黑客, but the main issue with most of them is that they require the parent element to have an explicitly defined height. 当您只想使用CSS时，这是有问题的.

幸运的是，CSS3引入了新的布局模型 CSS灵活框布局模块. 新的Flexbox允许我们设置容器中元素的对齐方式和方向, 即使它们的大小不是预定义的或动态的. A Flex container can modify the width or height of its children to fill the available space in the best possible way, 甚至在不同的屏幕尺寸上.

So, for example, 将网页上的所有元素垂直居中, 你可以使用下面的CSS代码:

Html, body {
  margin: 0;
  高度:100%;
}

body {
  显示:flex;
  显示:-webkit-flex;
  对齐项目:中心;
  -webkit-align-items:中心;  
  -ms-flex-align:中心;  
}

只要记住，只有以下几点 浏览器支持Flexbox规范:

• Android 4.4+
• Chrome 29+
• Firefox 28 +
• Internet Explorer 11+
• iOS 7.1+(前缀为-webkit-)
• Opera 17+
• Safari 6.1+(前缀为-webkit-)

编写语义标记有助于将内容与样式分开, and it makes it easier to generate HTML documents that will not change and will not be updated with every little change in the CSS files. 当使用普通的CSS时，让开发人员的思想围绕这个概念可能是乏味的. 通常，前端开发人员会通过使用类来偷工减料 float-left, clear, column, grid-3, etc. 这种方法最初可能会更快地完成工作, 但是对设计的任何后续更改都需要对HTML文件进行重大更新. That way, 代码库很容易变得非常难以维护, 难以阅读, 很难理解, 特别是如果有人继承了这样的代码.

Stylus, 凭借其强大的功能，如mixins, 占位符, 命名参数, 和插值, 能帮助解耦语义标记吗. 我们将通过一个例子来说明. 在Stylus中，我们可以结合占位符的概念, mixins, 和命名参数来实现一个非常简单和可定制的响应网格系统. 完整的代码示例可以在这里找到 codepen:

让我们仔细看看 grid-fn 功能和 grid mixin.

设置默认变量基本上设置了我们的网格布局. 它是完全灵活的，我们可以根据我们的设计需要进行调整. The grid-fn function calculates the column width and outputs a value based on number of columns and margins we want something to span. The grid Mixin使用 grid-fn function to set a property value and enables us to play with the responsiveness of elements we style. 最简单的用法如下:

article
    栅格宽度6

通过使用命名参数，我们可以获得真正的表达:

article
    网格(when:below, breakpoint:800px, width, 4)

We can even use this responsive definition as a block mixin call and nest selectors or properties underneath it which will be applied if that particular media query gets matched:

article
    +网格(when:below, breakpoint:800px, width, 4)
        h1
            字体大小1 em

现在我们可以使用这个简洁的mixin来生成一组占位符，以便根据需要使用. 占位符基本上像类一样工作. 它们被定义并用于扩展具体选择器, 但只有在我们的手写笔文件中使用时才会显示在生成的CSS中. This is good because we can be sure the CSS file won’t include any unnecessary bloat that’s not being used at all:

美元柱基
    padding 0
    margin-bottom grid-margin
    &:第一个孩子
        margin-left 0
    &:胎
        margin-right 0

在(1)..网格列)
    美元列{坳}
        @extends柱基美元
        float left
        网格宽度col
        Margin-left (grid-margin / 2)
        Margin-right (grid-margin / 2)

通过使用插值算子 {}, we can programmatically define our 占位符 and extend them to make them more readable and flexible:

columns-full美元
    @extends美元列{栅格}

columns-half美元
    @extends $column{grid-columns / 2}

现在，我们可以使用这个逻辑从标记中完全删除任何与布局相关的类, 并简单地使用占位符来描述HTML元素:

article
    @extends columns-full美元
      
main
    @extends columns-two-thirds美元
        
aside
    @extends columns-third美元

您可以注意到，即使稍后我们修改了变量，占位符也会像 columns-full美元 or columns-half美元 还能像预期的那样工作吗.

This is one example of how preprocessor features can serve as excellent tools for writing and maintaining a sane markup and stylesheet structure. Getting familiar and comfortable with the tools we use is a great way to boost developer productivity and code quality.

代码重复是源自纯CSS编码的最重要的问题之一. 为了与之抗衡, 预处理器具有非常强大的功能, 混合或扩展实现. 在本技巧中，我们将介绍 @include and @extend，并讨论如何在SCSS中有效地使用它们.

用@include和@mixin创建Mixins

通过利用 @include 实现，你可以创建带参数的mixin函数. 例如，一个以显示块为中心的带有max-width的容器可以这样实现:

//创建一个最大宽度的容器
@mixin maxWidthContainer($width: 1024px) {
	显示:块;
	max-width: $宽度;
	Margin: 0 auto;
}

上面声明的mixin可以用下面的命令调用: @include maxWidthContainer ();. 由于默认值为a $width 参数设置为1024px，生成的CSS将如下所示:

显示:块;
max-width: 1024 px;
Margin: 0 auto;

用@extend扩展类

The @extend 可以用来共享CSS属性从一个类到另一个. 例如，SCSS中的以下按钮样式声明:

.button {
	颜色:黑色;
	背景:白色;
	边框:1px纯灰色;
}

.按钮,警告{
	@extend .button;
	颜色:红色;
	背景:橙色;
}

.按钮,禁用{
	@extend .button;
	颜色:白色;
	背景:灰色;
}

将产生以下CSS:

.button, .按钮,警告, .按钮,禁用{
	颜色:黑色;
	背景:白色;
	边框:1px纯灰色;
}
.按钮,警告{
	颜色:红色;
	背景:橙色;
}

.按钮,禁用{
	颜色:白色;
	背景:灰色;
}

请注意按钮修饰符(.按钮,警告 and .按钮,禁用的初始声明中堆叠 .button.

@include和@extend的有效使用

Mixin声明是预处理器提供的最有用的功能. @include 可以用于任何从添加动画到响应断点. Any piece of code that is repeated multiple times should be applied into a mixin which will effectively make your code more readable and easily maintainable.

另一方面， @extend 必须非常谨慎和稀疏地使用. 虽然一开始它似乎有很多优点，但在使用中也有一些缺点:

• 不能从媒体查询中进行扩展
• 它不接受任何参数

Both @include and @extend are very strong directives which can make CSS development with the aid of preprocessors way more productive as well as fun.

如今，每个web项目都希望看起来美观美观. 为了实现这个目标, web开发人员使用大量的CSS和JavaScript来生成美观实用的用户界面.

Sometimes getting a small element to look nice and consistent across browsers and platforms looks more challenging than it really is. 假设你想创建一个自定义文件输入，如下所示:

当你打字的时候 在HTML文件中, 你很快就会对默认结果感到失望，它看起来是这样的:

如果您尝试直接对文件输入设置样式，将无法获得想要的结果. 每个web浏览器都以自己的方式呈现文件输入, 没有两个浏览器会以相同的方式显示它. 更不用说默认的浏览器呈现看起来不吸引人了. There are many ways to render an HTML file input so it looks and behaves consistently across all browsers. 甚至还有插件可以帮助你完成这项工作. 但是我们最好的 CSS total开发人员 have a simple and elegant way to customize file inputs using just CSS and a little touch of JavaScript help.

The first thing you need to do is create the HTML markup by putting the file input into another tag. 在这个例子中我们将使用一个span标签，但是你可以使用任何你想要的标签:

	Browse

上述代码的结果如下:

现在我们要隐藏文件输入，但保持可点击. 当用户点击 Browse 文本，他们实际上会点击隐藏的文件输入. 为此，我们必须添加下面的CSS:

.文件输入{
    位置:相对;
    溢出:隐藏;
}
.文件-输入输入[type="file"] {
    位置:绝对的;
    top: 0;
    right: 0;
    min-width: 100%;
    最小高度:100%;
    text-align:正确;
    过滤器:α(不透明度= 0);
    透明度:0;
    大纲:没有;
    显示:块;
    光标:指针;
}

上面的代码是做什么的:

1. The span .file-input 是相对定位的，所以如果我们想，它的子节点可以绝对定位.
2. 文件输入绝对放置在 Browse text. 我们还将它的不透明度设置为0，这样它就不可见了. 光标:指针将向用户显示他们可以点击它.

应用这个CSS后，结果将是:

你可以注意到 Browse 文本是可点击的，并分派文件搜索，如我们所愿.

现在我们要添加更多的样式 .file-input 类，这样它就会变成一个绿色按钮:

.文件输入{
    位置:相对;
    溢出:隐藏;
    边框:1px实心#1f7c57;
    border - radius: 3 px;
    背景:线性渐变(#43c692， #39b885);
    颜色:白色;
    Padding: 5px 10px;
    显示:inline-block;
    font-family: 'Trebuchet MS';
    粗细:大胆的;
}

下一个结果是:

Great. 看起来我们做完了. 但是我们有一个小问题:一旦我们点击按钮并选择一个文件, 没有结果显示给用户. 这是因为文件输入是隐藏的，因此用户无法看到所选的文件名. 一个小小的JavaScript函数将帮助我们解决这个问题. 我们将添加一个空标记 并在文件被选中后使用它来显示文件名.

添加下面的样式到 span .filename，它会使它更漂亮;

.filename {
    font-family: 'Trebuchet MS';
    Padding: 5px 10px;
    显示:inline-block;
    vertical-align:最高;
    字体样式:斜体;
}

现在我们将添加一个函数，该函数侦听文件输入更改并填充 span .filename. 下面的例子是使用jQuery，但我们也可以通过使用纯JavaScript来实现:

现在我们的代码已经准备好了. 当用户选择文件时，文件名将被放入 span .filename.

你可以下载 GitHub上的示例代码.

名称空间可以在任何类型的编程语言中使用，其优点数不胜数. 然而，对于CSS，有些优势不是特别明显. We will take a look at the two most common namespacing usages in CSS and we will discuss their advantages in more detail.

Variables

在CSS中使用变量是最简单和最常见的用法. 让我们看看下面的SCSS示例代码:

//我们的公共变量

// Fonts
$f_arial: Arial, Helvetica, sans-serif

// Colors
美元c_red: # FF0000;
$ c_black: # 000;

/ / Z-indices
$ z_index_back: 1;
$ z_index_base: 1;
z_index_max: 9999美元;

//动画计时
t_medium_animation美元:200毫秒;

/ /断点
b_mobile美元:700 px;
b_desktop美元:1200 px;

在上面的例子中，我们定义了五个不同的组织类别:

• $f_ 字体和网页字体家族
• $c_ 颜色代码
• $z_ 整个应用程序中使用的z索引
• $t_ 动画时间
• $b_ 响应断点

The biggest advantages of utilizing the organizational categories structure with variables as described above are code clarity and rapid development. 这在大型团队中尤其重要，因为有更多的开发人员在同一个CSS文件上工作. 一个更显著的优点是增加了自动补全功能. 只需输入 $f_ 在我们的IDE中，我们将获得所有声明字体的自动完成列表，或者通过输入 $b_ 我们将获得所有响应断点，等等.

类名

名称空间的第二种最常见用法是利用CSS类命名. The prefix o- 可以用于CSS对象类的名称声明，而 c- 可以用来上课吗. The fundamental distinction between objects and classes is that they may appear more than once in different templates of our design, 因此让他们更难以干预. Separating objects from classes makes it easier for a developer to navigate within a relatively unknown codebase. 另一个聪明的概念是将JavaScript中单独使用的所有类与 js- prefix. Finally, is- 可以定义应用程序状态，如 is-active or is-visible, while u- 是否可以为实用程序类加上前缀 u-pull-left.

您可以做很多事情来确保良好的CSS性能并减少页面加载时间. 这里有一些技巧和技巧，你可以从今天开始实施.

浏览器需要遍历每个DOM元素来查找它要查找的内容. 举个例子:

.home-page .header-main .nav-main ul 

浏览器将首先查找每一个 ul 元素，然后是每 .nav-main 在…里面 ul，然后每 .header-main 在那里面，然后每一个 .home-page 在这里面. 只有在搜索完成后才应用样式. 我们可以更高效地编写一个特定的选择器，像这样:

.nav-list 

现在浏览器只需要找到 .nav-list 元素，并对其应用样式. 我们保持了较低的专用性，避免了不必要的嵌套. 简单而高效.

命名类可能很困难，但是您可以使用一些众所周知的技巧. 例如，在我们的 .nav-list 元素，则可以使用 .component-descendant-descendant naming:

.nav-list-item

The .nav-list-item 是导航栏中的列表项吗. 或者，您可以使用BEM命名方法，在我们的CSS技巧中已经介绍过了.

保持低专用性的另一条建议是避免使用id并使用类. The big benefit of using classes is that you can reuse your styles and help keep your style sheets DRY (Don’t Repeat Yourself), 这也将减少文件大小.

最后，您可以最小化CSS以使其加载速度更快.

无论你是一个人的乐队还是一个团队的成员, 所有的CSS都应该看起来像一个人写的, 即使有许多开发人员对代码做出贡献. CSS中的这种一致性可以通过一组指导原则来实现, 遵循这些指导方针将产生易于维护的干净代码.

你是怎么写这些指导方针的? The best CSS开发人员 有人来帮你吗. 在项目开始时, 编写一个项目指导方针，确保所有开发人员都参与并遵循.

这里有一些你可以定义的准则:

• 属性内部的声明顺序
• 声明的格式——一些开发人员更喜欢单行格式
• 缩进-使用制表符或软制表符
• 什么样的报价将被使用
• 你会在冒号之后、括号前后使用空格吗
• 你是否会使用后面的分号
• 你会用前导零作为值的前缀吗
• 你会用小写还是大写 十六进制值
• 你会使用速记属性吗
• 使用嵌套的方式
• 你会使用CSS架构吗，比如SMACSS
• 你会使用像BEM这样的命名方法吗

你要做的细节取决于你自己. 我建议你决定哪些是重要的，哪些是不重要的, 因为有太多严格的规则会拖慢团队成员的速度. 当您定义规则时，请确保团队成员遵循这些规则. 结果将是代码干净且可维护. Of course, 使用LESS或SASS之类的预处理器有助于获得干净的代码, 但是你仍然需要一个干净的源代码，这样所有的团队成员都不会有使用它的困难.