编写现代CSS代码的20个建议

}

div {

width: 300px;

height: 200px;

background: url('http://cdn.tutorialzine.com/wp-content/uploads/2016/08/bicycle.jpg');

background-position: center center;

background-size: cover;

}

section{

float: left;

margin: 15px;

}

不过这种方法也是存在缺点的，譬如你无法设置图片的懒加载、图片无法被搜刮引擎或者其他类似的对象抓取到，有个不错的属性叫object-fit可以解决这个问题，不过该属性今朝的浏览器支撑场不是很完美。

Better Table Borders

HTML中应用Tables进行构造一向是个很头疼的问题，它们应用起来很简单，然则无法进行响应式操作，并且也不便利进行全局样式设置。譬如，如不亚妹计算为Table的边与单位的边添加样式，可能获得的结不雅如下:

table {    
    width: 600px;    
    border: 1px solid #505050;    
    margin-bottom: 15px;    
    color:#505050;    
}    
 
td{    
    border: 1px solid #505050;    
    padding: 10px;    
}

这里存在的问题是出现了很多的反复的边，会导致视觉上不调和的情况，那么我们可以经由过程设置border-collapse:collapse来进行处理:

注释格局优化

CSS固然谈不上一门编程说话然则其仍然须要添加注释以保障整体代码的可读性，只要添加些简单的注释不仅可以便利你更好地组织全部样式表还可以或许让你的同事或者将来的本身更好地舆解。对于CSS中整块的注释或者应用在Media-Query中的注释，建议是应用如下情势：

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

而设计的细节解释或者一些不重要的组件可以用如下单行注释的方法:

同时，不要忘了CSS中是没有//这种注释方法的:

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

应用Kebab-case定名变量

对于样式类名或者ID名的定名都须要在多个单词之间添加-符号，CSS本身是大年夜小写不敏感的是以你是用不了camelCase的，另一方面，良久之前也不支撑下划线，所以如今的默认的定名方法就是应用-:

2/4 首页上一页 1 2 3 4 下一页尾页

　　推荐阅读

　　别说自己懂手机还玩Root的才是发烧友

如今，你买一部安卓手机，你还会Root吗?如今，你拥有一部可以逃狱的iPhone，你还会逃狱吗?曾几时，当我们拿到新智妙手机之后，都邑第一时光选择Root(逃狱)，然则如今我们可能不会那么做了>>>详细阅读

本文标题：编写现代CSS代码的20个建议

地址：http://www.17bianji.com/lsqh/36968.html

1/2 1