CSS最佳实践和技巧

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

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

这些声明的顺序乍一看似乎不重要, 但定义一个秩序确实有一些优势. 一个明显的优势是一致性，这在大型团队中尤为重要. 有些开发人员随机编写声明，有些按字母顺序编写，有些按类型分组. 分组被认为是一个很好的选择，因为首先编写与定位相关的声明是有意义的，因为可以从流中删除一些元素. 浏览器首先对其进行消化, 开发人员可以很容易地读取块，知道元素的位置. 就像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 第二个规则. 这样做的原因是你能马上意识到那些样式被插入到选择器中, 你可以很容易地在它下面覆盖它们.

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

这种方法基于三个构建块, 哪些可以组合起来描述最复杂的用户界面. 下面的示例展示了如何使用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 是一个顶级元素，一个本身有意义的父元素，在我们的例子中是一个按钮 .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中，您可能会注意到专一性被保持在最低限度. 另外, 通过添加修饰符来描述每个元素的设计变化，可以鼓励代码的可重用性. Finally, BEM的综合类名使其成为与其他开发人员协作时使用的一种很好的方法.

前端开发人员经常在需要垂直对齐某些内容时遇到瓶颈. 互联网上有很多技巧和黑客, 但它们中的大多数的主要问题是，它们要求父元素具有显式定义的高度. 当您只想使用CSS时，这是有问题的.

幸运的是，CSS3引入了新的布局模型 CSS灵活框布局模块. 新的Flexbox允许我们设置容器中元素的对齐方式和方向, 即使它们的大小不是预定义的或动态的. Flex容器可以修改其子容器的宽度或高度，以最佳方式填充可用空间, 甚至在不同的屏幕尺寸上.

So, 例如, 将网页上的所有元素垂直居中, 你可以使用下面的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-)

编写语义标记有助于将内容与样式分开, 它可以更容易地生成不会改变的HTML文档，也不会随着CSS文件的每一个小变化而更新. 当使用普通的CSS时，让开发人员的思想围绕这个概念可能是乏味的. 通常，前端开发人员会通过使用类来偷工减料 float-left, clear, column, grid-3, etc. 这种方法最初可能会更快地完成工作, 但是对设计的任何后续更改都需要对HTML文件进行重大更新. That way, 代码库很容易变得非常难以维护, 难以阅读, 很难理解, 特别是如果有人继承了这样的代码.

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

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

设置默认变量基本上设置了我们的网格布局. 它是完全灵活的，我们可以根据我们的设计需要进行调整. The grid-fn 函数计算列宽度，并根据我们想要跨越的列数和边距输出一个值. The grid Mixin使用 grid-fn 函数来设置属性值，并使我们能够处理我们样式化的元素的响应性. 最简单的用法如下:

article
    栅格宽度6

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

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

我们甚至可以使用这个响应定义作为block mixin调用，并在它下面嵌套选择器或属性，当特定的媒体查询被匹配时，它将被应用:

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

现在我们可以使用这个简洁的mixin来生成一组占位符，以便根据需要使用. 占位符基本上像类一样工作. 它们被定义并用于扩展具体选择器, 但只有在我们的手写笔文件中使用时才会显示在生成的CSS中. 这很好，因为我们可以确保CSS文件不会包含任何不必要的膨胀，根本不会被使用:

美元柱基
    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)

通过使用插值算子 {}, 我们可以通过编程方式定义占位符，并对其进行扩展，使其更具可读性和灵活性:

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美元 还能像预期的那样工作吗.

这是预处理器特性如何作为编写和维护统一的标记和样式表结构的优秀工具的一个示例. 熟悉和适应我们使用的工具是提高开发人员生产力和代码质量的好方法.

代码重复是源自纯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 可以用于任何从添加动画到响应断点. 任何重复多次的代码都应该应用到mixin中，这将有效地使你的代码更具可读性和易于维护.

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

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

Both @include and @extend 是非常强大的指令，可以使CSS开发在预处理器的帮助下更加高效和有趣.

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

有时，让一个小元素在浏览器和平台上看起来美观一致，看起来比实际更具挑战性. 假设你想创建一个自定义文件输入，如下所示:

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

如果您尝试直接对文件输入设置样式，将无法获得想要的结果. 每个web浏览器都以自己的方式呈现文件输入, 没有两个浏览器会以相同的方式显示它. 更不用说默认的浏览器呈现看起来不吸引人了. 有许多方法可以呈现HTML文件输入，使其在所有浏览器中看起来和行为一致. 甚至还有插件可以帮助你完成这项工作. 但是我们最好的 CSS total开发人员 有一个简单而优雅的方法来定制文件输入，只使用CSS和一点JavaScript的帮助.

您需要做的第一件事是通过将文件输入放入另一个标记来创建HTML标记. 在这个例子中我们将使用一个span标签，但是你可以使用任何你想要的标签:

	Browse

上述代码的结果如下:

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

.文件输入{
    位置:相对;
    溢出:隐藏;
}
.文件-输入输入[type="file"] {
    位置:绝对的;
    top: 0;
    right: 0;
    min-width: 100%;
    最小高度:100%;
    text-align:正确;
    过滤器:α(不透明度= 0);
    opacity: 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，有些优势不是特别明显. 我们将研究CSS中最常见的两种名称空间用法，并更详细地讨论它们的优点.

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_ 响应断点

如上所述，使用带有变量的组织类别结构的最大优点是代码清晰和快速开发. 这在大型团队中尤其重要，因为有更多的开发人员在同一个CSS文件上工作. 一个更显著的优点是增加了自动补全功能. 只需输入 $f_ 在我们的IDE中，我们将获得所有声明字体的自动完成列表，或者通过输入 $b_ 我们将获得所有响应断点，等等.

Class Names

名称空间的第二种最常见用法是利用CSS类命名. The prefix o- 可以用于CSS对象类的名称声明，而 c- 可以用来上课吗. 对象和类的根本区别在于，它们可以在我们设计的不同模板中出现不止一次, 因此让他们更难以干预. 将对象与类分离，使开发人员更容易在相对未知的代码库中导航. 另一个聪明的概念是将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并使用类. 使用类的最大好处是可以重用样式并帮助样式表保持DRY(不要重复自己)。, 这也将减少文件大小.

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

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

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

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

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

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