20条书写CSS代码

时间 2021-04-09

标签 php css html web 编程浏览器 app 框架编程语言编辑器栏目 CSS 繁體版

原文原文链接

在这篇文章中，我想跟你分享 20 条由 css 社区推荐的约定和最佳实践。有些建议可能比较适合新手，而有些则更高级一些，但我但愿每一个人均可以在本篇文章中收获本身不知道的知识。php

0一、谨慎使用外边距属性css

与其它的属性不一样，垂直方向上的外边距相遇时将会发生折叠。这意味着若是一个元素的下边距遇到了另外一个元素的上边距，那么两者中较大的一个将被留下。下面是一个简单的例子。html

<div class="square red"></div> <div class="square blue"></div> .square { width: 80px; height: 80px; } .red { background-color: #F44336; margin-bottom: 40px; } .blue { background-color: #2196F3; margin-top: 30px; }

其实上述两个元素在垂直方向上的距离并非 70px，而是 40px，蓝色正方形的 margin 没有被计算在内。有不少的方法消除这种默认的行为，但最好的方法是只使用一个方向上的 margin 属性，好比说 margin-bottom 。web

0二、利用盒子模型布局编程

盒子模型天然有其存在的理由。float 和 inline-block 固然也能够工做，但它们都是样式化文档的基础工具，而不是整个网站。从某种意义来讲， Flexbox 是为更容易更精确建立咱们想要的布局而设计的。浏览器

Flexbox 模型提供的一系列属性给了开发者更大的灵活性，并且你一旦熟悉了它们，那建立任何响应式布局都是垂手可得的事。浏览器对 Flexbox 的支持也已经接近完美，因此已经没有什么理由可以阻止你使用 Flexbox 了。app

.container { display: flex; /* Don't forget to add prefixes for Safari */ display: -webkit-flex; }

0三、执行 css 重置框架

尽管这些年来情形已经有所好转，可是各浏览器的默认行为仍是存在不少分歧。解决这个问题最好的办法就是使用一个 CSS 重置文件为全部元素从新设置默认样式。这可让你在一个纯净的样式环境下工做，而且在全部浏览器中产生相同的结果。编程语言

有不少的库作这个工做作的很是不错，好比 normalize.css, minireset, 和 ress，纠正了浏览器间的不一致。若是你不想使用库，你也能够本身制做一个简单的 CSS 重置，像下面这样。编辑器

* {

        margin: 0; padding: 0; box-sizing: border-box; }

这可能看上去比较苛刻，可是消除了默认的 margin 和 padding 咱们将更容易的摆放咱们的元素，而不用担忧它会占用额外的空间。box-sizing: border-box 是一个很受用的属性，咱们将在下面介绍这个属性。

0四、为全部元素使用 Border-box

许多初学者不知道 box-sizing 属性，但它的确很重要。了解它的最好办法就是看看它的两个可选值。

content-box(default) - 当咱们为元素设置了宽度和高度，但那只是内容的尺寸。全部的 padding 和 border 都在不包含在内容当中，也就是在内容的外部。

举例来讲，若是咱们有一个 div它的宽度为 100px， padding 为 10px, 那么它的实际宽度为 120px。

border-box - padding和 border 被包含在宽度和高度当中。若是一个 div 的宽度为 100px ，而被设置了 box-sizing: border-box，那么它的宽度将始终是 100px，不管你添加多少 padding 和 border 。

为全部元素设置 border-box 将有利于样式化，并且你在也不用作乏味的数学运算了。

0五、图像做为背景

当你为本身的站点添加图片时，尤为是你想作响应式设计的时候，利用一个 div 标签并为其设置 background 属性，而不是使用 <img> 元素。

彷佛额外的工做并无起到任何做用，但实际上这更利于你对图片设置样式，保持它们原有的尺寸或者根据比例变化，这须要借助 background-size，background-size 还有一些其它的属性。

<section> <p>Img element</p> <img src="" alt="bicycle"> </section> <section> <p>Div with background image</p> <div></div> </section> img { width: 300px; height: 200px; } div { width: 300px; height: 200px; background: url(''); background-position: center center; background-size: cover; } section{ float: left; margin: 15px; }

这种技术的一个缺点是你页面的可访问性可能略有打击，由于你的图片不会被屏幕阅读器和引擎正确抓取。这个问题能够被 object-fit 解决，但它还不被全部浏览器支持。

0六、更好的 Table 边框

html 中的 table 没什么意思。它们很是古怪，难以设计成响应式的，并且很难与总体风格一致。好比说，你想为 table 和其中的元素添加上边框，你可能会获得下面的结果。

正如你所见到的，它有不少重复的边框并且看起来不是很好，有一个很是快速且简单的去除双边框的方法，就是将 border-collapse: collapse 添加到 table.

这样看起来就好多了。

0七、更好的注释方式

CSS 可能不是一门编程语言但它的代码仍然须要被记录，因此一些简单的注释将会对你的同事或者将来的本身颇有帮助！

对于 CSS 中的一些比较大的模块，好比主要模块或者媒体查询，使用风格化的注释而且在其后留下一些空行。

/*--------------- #Header ---------------*/ header { } header nav { } /*--------------- #Slideshow ---------------*/ .slideshow { }

设计中的一些细节或那些不是特别重要的模块，能够用单行注释。

/* Footer Buttons */ .footer button { } .footer button:hover { }

另外，值得注意的是，CSS 中没有 // 注释，因此当你须要注释的时候你须要使用 /* */ 符号。

/* Do */ p { padding: 15px; /*border: 1px solid #222;*/ } /* Don't */ p { padding: 15px; // border: 1px solid #222; }

0八、命名链接

当 class 或者 id 不止一个单词的时候，须要使用 - 符号链接， CSS 对大小写不敏感，因此骆驼命名法不是一个好的选择。好久之前，下划线不被支持因此破折号成为了默认约定。

/* Do */ .footer-column-left { } /* Don't */ .footerColumnLeft { } .footer_column_left { }

0九、不要重复设置

CSS 的许多属性值都是从 DOM 树中的上一级继承下来的，所以命名为层叠样式表。让咱们以 font 为例 - 它几乎老是继承自父节点，你不须要为页面中的每个元素设置该属性。

你只须要为 <html> 或者 <body> 设置 font 样式，而后让它一级一级流传下去就能够了。下面是一个很好的例子。

html { font: normal 16px/1.4 sans-serif; }

固然，在任何一个子元素中你均可以按照本身的需求改变这同样式。我要说的就是能使用继承得到的属性就不要再去一一指定了。

十、CSS 动画与变换

不要经过直接更改元素的宽度和高度去动画元素，或者是更改 left/right/top/bottom。最好的办法是使用 transform() 属性由于它提供了更加圆滑的过渡效果并且可让你的意图在阅读代码时更加易于理解。

下面是一个例子，咱们想动画一个 ball，让它往右滑动。不要去改变 left 的值，最好是使用 translateX() 。

.ball { left: 50px; transition: 0.4s ease-out; } /* Not Cool*/ .ball.slide-out { left: 500px; } /* Cool*/ .ball.slide-out { transform: translateX(450px); }

transform 以及它的全部方法（translate, rotate, scale 等）拥有几乎一致的浏览器兼容性，你能够自由使用它们。

十一、不要 DIY, 使用库

CSS 社区很是的庞大并且不断出现新的库。库被提供于各类用途，从小片断到完善的框架，用于构建响应式程序，并且它们当中大部分都是开源的。

因此下次当你碰到 CSS 问题的时候，在你想本身动手去解决问题的时候，最好先去 Github 或者 CodePen 找找是否已经存在可用的解决方案。

十二、保持选择器的特指度低

不是全部 CSS 选择器都是生而相等的，当新手开发者书写 CSS 代码的时候一般指望它们写的选择器可以覆盖以前全部已存在的样式。可是事情并不总像咱们想的那样，就像下面这个例子：

a{ color: #fff; padding: 15px; } a#blue-btn { background-color: blue; } a.active { background-color: red; }

咱们想为全部按钮添加 .active 类使其变为红色，但这是不起做用的，由于按钮已经被一个 id 选择器设置了 background-color，而 id 选择器具备更高的特指度。它们之间的规则就像下面这样：

ID (#id) > Class (.class) > Type (好比 header)。

特指度是能够堆叠的，因此 a#button.active 的特指度是高于 a#button 的。使用特指度高的选择器将使你不断的使用更高的去覆盖那些本来存在的选择器，这将最终致使 !important 效果。

1三、不要使用 !important

很认真的告诉你，不要使用 !important。即时的一个快速修复在未来可能致使大量的重写。相反，找出你 CSS 选择器不工做的缘由，而且尝试去修复它。

只有在一种情景中使用 !important 是能够接受的，那就是你想覆盖那些在 HTML 中定义的行内样式。并且书写行内样式也是一种很是糟糕的方式，建议中止使用。

1四、使用 text-transform

在 HTML 中，当你使用大写字母的时候多是出于某种语义目的，好比说你想强调一个单词的重要性。

<h3>Employees MUST wear a helmet!</h3>

若是出于某种目的你将一组文本都设置成大写，能够在 HTML 中正常书写文本，而后利用 CSS 转换其大小写。它们看起来都是同样的，可是若是不在上下文中，你的内容将更有意义。

<div class="movie-poster">Star Wars: The Force Awakens</div> .movie-poster { text-transform: uppercase;}

这一样适用于大写或者小写的字符串 - text-transform 属性能够将它们处理的很好。

1五、Em， Rem 和 Pixel

人们在对元素和文本设置尺寸应该用 em，rem 仍是 px 有不少的争论。事实是，这三者都是可行的，有本身的优势和缺点。

全部的开发者和项目都是不一样的，因此不该该有什么严格的规则说明何时该用哪种。下面是一些提示和良好的作法：

em - 1 em 的大小与直接父元素的字体大小有关。一般用于媒体查询，em 对响应式设计而言是很是棒的，可是将每一个元素的 em 值转换为 px 的比例是很是难以计算的，由于你可能要在 DOM 树上逐级跟踪元素。

rem - 以 <html> 元素中的 font-size 为基准， rem 将比例化页面中的标题和段落变得很容易。保持 <html> 中默认的 font-size 而且为其它的元素设置 rem 是一种很是棒的方法。

px - 像素是最精确的控制方式，可是在响应式设计中它并不友好，由于它不会随屏幕大小变化而自动缩放。它们是可靠的，易于理解的，而且在值和实际结果之间呈现出良好的视觉联系。

下面我要说的是，不要惧怕尝试。去使用它们而且找出哪种是你最喜欢的。有时候 em 和 rem 很省事，尤为对于响应式界面。

1六、在大项目中使用预处理器

你可能已经据说过它们了 - Sass, Less, PostCSS, Stylus 。预处理器是 CSS 发展的下一阶段。它们提供的功能诸如变量， CSS 函数，选择器嵌套以及其它一些很是酷的东西。这使得 CSS 代码很是易于管理，尤为在大项目中。

举个简单的例子，下面是使用了 CSS 变量和函数的 Sass 代码片断。

$accent-color: #2196F3; a { padding: 10px 15px; background-color: $accent-color; } a:hover { background-color: darken($accent-color,10%); }

使用 CSS 预处理器的惟一缺点是，它们须要编译成真正的 CSS 代码，可是若是你已经决定在你的项目中使用一个构建脚本，那么这就再也不是你应该烦恼的问题了。

若是你想了解更多关于预处理器的知识，请查看目前最受欢迎的两个系统的教程 - Sass 和 Less。

1七、Autoprefixers

为各个浏览器添加前缀算得上是书写 CSS 代码最恼人的问题了。它们不一致，你永远没法精确的你须要哪个，并且若是你真的去一个个适配并将它们都放到样式表中，你会发现这是一场噩梦。

感谢上天，有不少工具能够自动的帮你实现这一过程，甚至可让你指定你须要支持的浏览器：

在线工具： Autoprefixer

文本编辑器插件 - Sublime Text, Atom

库 - Autoprefixer

1八、在项目中使用精简代码

为了提升网站或app的页面加载速度咱们须要老是使用精简代码 . 代码的精简版本会移除掉空白和重复的部分,这样会削减文件的大小. 固然,这样的话你的 CSS 代码将会变得很是难以阅读,因此最好老是提供一个 .min 的精简版本和一个常规的发展版本.

有不少不一样的方法去精简 CSS 代码 :

在线工具 - CSS Minifier, CSS Compressor
文本编辑插件 - Sublime Text, Atom
库 - Minfiy , CSSO 和 CSSNano

根据你的工做流程,你能够选用上述一个选项,可是建议你老是使用某种方式自动执行此过程。

广州vi设计公司 http://www.maiqicn.com 个人007办公资源网 https://www.wode007.com

1九、Can I Use

不一样的浏览器仍然存在着不少不一致的兼容性问题, 利用 caniuse 或者其它相似的服务检测你正在使用的属性是否被普遍支持, 是否须要添加前缀, 或者说是否会在某平台下出现 bug .

仅仅检测是否仍然是不够的, 你仍然须要测试布局是否会平白无故的崩溃. 充分了解用户常用的浏览器也会提供很大的帮助, 所以你能够看到好的支持是很是关键的.

20、Validate

验证 CSS 代码可能没有验证 HTML 或者 JavaScript 代码重要, 可是在一个 CSS 验证器上运行你的代码仍是有帮助的, 它会提示你是否书写了错误或者比较糟糕的代码, 甚至会给出一些比较中肯的建议帮助你改进代码