欢迎进入北大青鸟(广州网耀)全国IT职业教育示范中心

学历不是敲门砖,技术才是硬道理

咨询热线:4006-1122-06

前端开发指南之css

发布时间: 2016-01-29 09:43:06   作者:本站编辑   来源: 本站原创   浏览次数:

分号

始终不要忘记在写完属性后加上分号,把它作为一个终止符。

/* bad */

div {

  color: red

}

 

/* good */

div {

  color: red;

}

 

盒子模型

盒子模型对于整个文档而言最好是相同的。全局性的* { box-sizing: border-box; }就非常不错,但是应该避免改变默认盒子模型的特定元素。

/* bad */

div {

  width: 100%;

  padding: 10px;

  box-sizing: border-box;

}

 

/* good */

div {

  padding: 10px;

}

定位

在CSS中有许多定位元素的方法,但应该尽量限制以下属性/值:

display: block;

display: flex;

position: relative;

position: sticky;

position: absolute;

position: fixed;

 

选择器

最小化紧密耦合到DOM的选择器。当选择器有多于3个结构伪类,后代或兄弟选择器的时候,考虑添加一个类到你想匹配的元素。

/* bad */

div:first-of-type :last-child > p ~ *

 

/* good */

div:first-of-type .info

当你不需要的时候避免过载选择器。

/* bad */

img[src$=svg], ul > li:first-child {

  opacity: 0;

}

/* good */

[src$=svg], ul > :first-child {

  opacity: 0;

}

 

覆盖

覆盖样式会让选择器和调试变困难,应尽量避免覆盖样式。

/* bad */

li {

  visibility: hidden;

}

li:first-child {

  visibility: visible;

}

 

/* good */

li + li {

  visibility: hidden;

}

 

继承

不要重复可以继承的样式声明。

/* bad */

div h1, div p {

  text-shadow: 0 1px 0 #fff;

}

/* good */

div {

  text-shadow: 0 1px 0 #fff;

}

 

简洁

保持代码的简洁。使用简写属性,要避免使用多个属性。

/* bad */

div {

  transition: all 1s;

  top: 50%;

  margin-top: -10px;

  padding-top: 5px;

  padding-right: 10px;

  padding-bottom: 20px;

  padding-left: 10px;

}

/* good */

div {

  transition: 1s;

  top: calc(50% - 10px);

  padding: 5px 10px 20px;

}

分享到:
我来说两句
评论内容:
验  证  码:
 
(网友评论仅供其表达个人看法,并不表明本站同意其观点或证实其描述。)
评论列表
已有 0 条评论(查看更多评论)