前端代码指南(二)
2015-12-25 17:10
323 查看
前端代码指南(一)
前端代码指南(二)
前端代码指南(三)
同样的,尽可能不要使元素脱离文档流
避免过载你的选择器
如果觉得本文不错的话,帮忙点击下面的推荐哦
>>>>点击阅读原文
前端代码指南(二)
前端代码指南(三)
CSS
分号
分号是CSS语句的分离器,请把它放在句尾。/* 糟糕的 */ div { color: red } /* 推荐的 */ div { color: red; }
盒模型
最理想的情况是盒模型在整个文档是一样的。全局设置* { box-sizing:border-box;}是可以的,但最好不要在特定的元素上改变默认的盒模型。/* 糟糕的 */ div { width: 100%; padding: 10px; box-sizing: border-box; } /* 推荐的 */ div { padding: 10px; }
文档流
不要改变一个元素的默认样式,尽可能保持元素在自然的文档流中。例如,删除图像下面的空白不应该改变其默认显示:/* 糟糕的 */ img { display: block; } /* 推荐的 */ img { vertical-align: middle; }
同样的,尽可能不要使元素脱离文档流
/* 糟糕的 */ div { width: 100px; position: absolute; right: 0; } /* 推荐的 */ div { width: 100px; margin-left: auto; }
定位
css有很多方法来定位元素,但是最好不要使用下面的属性/值display: block; display: flex; position: relative; position: sticky; position: absolute; position: fixed;
选择器
减少选择器与DOM的耦合度。当你的选择器匹配的元素超过3层结构(伪类、后代或兄弟元素)。考虑添加一个类来匹配你想要的元素吧/* 糟糕的 */ div:first-of-type :last-child > p ~ * /* 推荐的 */ div:first-of-type .info
避免过载你的选择器
/* 糟糕的 */ img[src$=svg], ul > li:first-child { opacity: 0; } /* 推荐的 */ [src$=svg], ul > :first-child { opacity: 0; }
特性
不要让属性值和选择器难以被覆盖(应该是指优先级不要过高),减少使用id和!important的使用/* 糟糕的 */ .bar { color: green !important; } .foo { color: red; } /* 推荐的 */ .foo.bar { color: green; } .foo { color: red; }
覆盖
覆盖样式会导致选择器和调试变得困难,请尽量避免/* 糟糕的 */ li { visibility: hidden; } li:first-child { visibility: visible; } /* 推荐的 */ li + li { visibility: hidden; }
继承
不要重复书写可以继承的样式。/* 糟糕的 */ div h1, div p { text-shadow: 0 1px 0 #fff; } /* 推荐的 */ div { text-shadow: 0 1px 0 #fff; }
简洁
保持你的代码简洁,尽量使用简写属性,避免使用多个属性。/* 糟糕的 */ div { transition: all 1s; top: 50%; margin-top: -10px; padding-top: 5px; padding-right: 10px; padding-bottom: 20px; padding-left: 10px; } /* 推荐的 */ div { transition: 1s; top: calc(50% - 10px); padding: 5px 10px 20px; }
语言
英文优于数学表达式/* 糟糕的 */ :nth-child(2n + 1) { transform: rotate(360deg); } /* 推荐的 */ :nth-child(odd) { transform: rotate(1turn); }
前缀
积极删除过时的前缀。/* 糟糕的 */ div { transform: scale(2); -webkit-transform: scale(2); -moz-transform: scale(2); -ms-transform: scale(2); transition: 1s; -webkit-transition: 1s; -moz-transition: 1s; -ms-transition: 1s; } /* 推荐的 */ div { -webkit-transform: scale(2); transform: scale(2); transition: 1s; }
动画
animations和
transitions,优先选择
transitions。除了
opacity和
transform属性,其他属性避免使用
animations。
/* 糟糕的 */ div:hover { animation: move 1s forwards; } @keyframes move { 100% { margin-left: 100px; } } /* 推荐的 */ div:hover { transition: 1s; transform: translateX(100px); }
单位
不要对不需要使用单位的值使用单位;如果你要使用相对单位最好使用rem;使用秒而不是毫秒
/* 糟糕的 */ div { margin: 0px; font-size: .9em; line-height: 22px; transition: 500ms; } /* 推荐的 */ div { margin: 0; font-size: .9rem; line-height: 1.5; transition: .5s; }
颜色
如果你需要使用透明度,请使用rgba
/* 糟糕的 */ div { color: hsl(103, 54%, 43%); } /* 推荐的 */ div { color: #5a3; }
绘制
如果资源文件可以轻易在css中绘制出来,就避免HTTP请求来加载/* 糟糕的 */ div::before { content: url(white-circle.svg); } /* 推荐的 */ div::before { content: ""; display: block; width: 20px; height: 20px; border-radius: 50%; background: #fff; }
Hacks
尽量不要使用Hacks/* 糟糕的 */ div { // position: relative; transform: translateZ(0); } /* 推荐的 */ div { /* position: relative; */ will-change: transform; }
如果觉得本文不错的话,帮忙点击下面的推荐哦
>>>>点击阅读原文
相关文章推荐
- 前端代码指南(一)
- JSON-lib框架,转换JSON、XML不再困难
- List is a raw type. References to generic type List<E> should be parameterized
- css 文字长时不换行 显示...
- javascript之DOM操作
- jQuery基础事件
- CSS 笔记二(Text/Fonts/Links/Lists)
- 在javascript中关于submit和button提交表单区别
- extjs 按条件查询出的数据在grid上不显示
- jQuery事件对象
- javascript图片预加载实例分析
- jQuery动画效果
- js数据过滤
- javascript中的super
- 【JAVASCRIPT】JS实现淘宝,百度评分功能
- CSS3中REM使用详解
- jQuery事件
- js方法数据验证
- 为<hr>添加样式
- 不得不分享的JavaScript常用方法函数集(下)