关于css的几个建议
在这篇文章中，我想跟你分享 20 条由 CSS 社区推荐的商定和最佳实践。 有些建议可能比较适合新手，而有些则更高级少量，但我希望每个人都可以在本篇文章中收获自己不知道的知识。
01、谨慎使用外边距属性
与其它的属性不同，垂直方向上的外边距相遇时将会发生折叠。这意味着假如一个元素的下边距遇到了另一个元素的上边距，那么二者中较大的一个将被留下。下面是一个简单的例子。
<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 。
02、利用盒子模型布局
盒子模型自然有其存在的理由。float 和 inline-block 当然也可以工作，但它们都是样式化文档的基础工具，而不是整个网站。从某种意义来说， Flexbox 是为更容易更准确创立我们想要的布局而设计的。
Flexbox 模型提供的一系列属性给了开发者更大的灵活性，而且你一旦熟习了它们，那创立任何响应式布局都是轻而易举的事。浏览器对 Flexbox 的支持也已经接近完美，所以已经没有什么理由能够阻止你使用 Flexbox 了。
.container { display: flex; /* Don't forget to add prefixes for Safari */ display: -webkit-flex; }03、执行 CSS 重置
虽然这些年来情形已经有所好转，但是各浏览器的默认行为还是存在很多分歧。处理这个问题最好的办法就是使用一个 CSS 重置文件为所有元素重新设置默认样式。这可以让你在一个纯净的样式环境下工作，并且在所有浏览器中产生相同的结果。
有很多的库做这个工作做的非常不错，比方 normalize.css, minireset, 和 ress， 纠正了浏览器间的不一致。假如你不想使用库，你也可以自己制作一个简单的 CSS 重置，像下面这样。
* { margin: 0; padding: 0; box-sizing: border-box; }这可能看上去比较苛刻，但是消除了默认的 margin 和 padding 我们将更容易的摆放我们的元素，而不用担心它会占用额外的空间。box-sizing: border-box 是一个很受用的属性，我们将在下面详情这个属性。
04、为所有元素使用 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 将有利于样式化，而且你在也不用做乏味的数学运算了。
05、图像作为背景
当你为自己的站点增加图片时，尤其是你想做响应式设计的时候，利用一个 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 处理，但它还不被所有浏览器支持。
06、更好的 Table 边框
HTML 中的 table 没什么意思。它们非常古怪，难以设计成响应式的，而且很难与整体风格一致。比方说，你想为 table 和其中的元素增加上边框，你可能会得到下面的结果。
image
正如你所见到的，它有很多重复的边框而且看起来不是很好，有一个非常快速且简单的去除双边框的方法，就是将 border-collapse: collapse 增加到 table.
image
这样看起来就好多了。
07、更好的注释方式
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; }08、命名连接
当 class 或者者 id 不止一个单词的时候，需要使用 – 符号连接， CSS 对大小写不敏感，所以骆驼命名法不是一个好的选择。很久以前，下划线不被支持所以破折号成为了默认商定。
/* Do */ .footer-column-left { } /* Don't */ .footerColumnLeft { } .footer_column_left { }09、不要重复设置
CSS 的许多属性值都是从 DOM 树中的上一级继承下来的，因而命名为层叠样式表。让我们以 font 为例 – 它几乎总是继承自父节点，你不需要为页面中的每一个元素设置该属性。
你只要要为 <html> 或者者 <body> 设置 font 样式，而后让它一级一级流传下去即可以了。 下面是一个很好的例子。
html { font: normal 16px/1.4 sans-serif; }当然，在任何一个子元素中你都可以按照自己的需求改变这一样式。我要说的就是能使用继承取得的属性就不要再去逐个指定了。
10、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 等）拥有几乎一致的浏览器兼容性，你可以自由使用它们。
11、不要 DIY, 使用库
CSS 社区非常的庞大而且不断出现新的库。 库被提供于各种用途，从小片段到完善的框架，用于构建响应式程序，而且它们当中大部分都是开源的。
所以下次当你碰到 CSS 问题的时候，在你想自己动手去处理问题的时候，最好先去 Github 或者者 CodePen 找找能否已经存在可用的处理方案。
12、保持选择器的特指度低
不是所有 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 效果。
13、不要使用 !important
很认真的告诉你，不要使用 !important。 即时的一个快速修复在将来可能导致大量的重写。相反，找出你 CSS 选择器不工作的起因，并且尝试去修复它。
只有在一种情景中使用 !important 是可以接受的，那就是你想覆盖那些在 HTML 中定义的行内样式。而且书写行内样式也是一种非常糟糕的方式，建议中止使用。
14、使用 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 属性可以将它们解决的很好。
15、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 很省事，尤其对于响应式界面。
16、在大项目中使用预解决器
你可能已经听说过它们了 – 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。
17、Autoprefixers
为各个浏览器增加前缀算得上是书写 CSS 代码最恼人的问题了。它们不一致，你永远无法准确的你需要哪一个，而且假如你真的去一个个适配并将它们都放到样式表中，你会发现这是一场噩梦。
感谢上天，有很多工具可以自动的帮你实现这一过程，甚至可以让你指定你需要支持的浏览器 ：
在线工具： Autoprefixer
文本编辑器插件 – Sublime Text, Atom
库 – Autoprefixer
18、在项目中使用精简代码
为了提高网站或者app的页面加载速度我们需要总是使用精简代码 . 代码的精简版本会移除掉空白和重复的部分,这样会削减文件的大小. 当然,这样的话你的 CSS 代码将会变得非常难以阅读,所以最好总是提供一个 .min 的精简版本和一个常规的发展版本.
有很多不同的方法去精简 CSS 代码 :
在线工具 – CSS Minifier, CSS Compressor
文本编辑插件 – Sublime Text, Atom
库 – Minfiy , CSSO 和 CSSNano
根据你的工作流程,你可以选用上述一个选项,但是建议你总是使用某种方式自动执行此过程。
19、Can I Use
不同的浏览器依然存在着很多不一致的兼容性问题, 利用 caniuse 或者者其它相似的服务检测你正在使用的属性能否被广泛支持, 能否需要增加前缀, 或者者说能否会在某平台下出现 bug .
仅仅检测能否依然是不够的, 你依然需要测试布局能否会无缘无故的崩溃. 充分理解客户经常使用的浏览器也会提供很大的帮助, 因而你可以看到好的支持是非常关键的.
20、Validate
验证 CSS 代码可能没有验证 HTML 或者者 JavaScript 代码重要, 但是在一个 CSS 验证器上运行你的代码还是有帮助的, 它会提醒你能否书写了错误或者者比较糟糕的代码, 甚至会给出少量比较中肯的建议帮助你改进代码。
1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！
2. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
3. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是摆设，本站源码仅提供给会员学习使用！
7. 如遇到加密压缩包，请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » 关于css的几个建议
