精通css(1)-规范-阿里云开发者社区

开发者社区> 大数据> 正文
登录阅读全文

精通css(1)-规范

简介:

之前学过css,但没有深入研究,现在在做一些web的东西,有时遇到布局的问题要弄很久,所以本着严肃认真的态度,还是要把css好好再学一遍!

传说,在css没有出现之前,html的结构是非常混乱的,因为它将文档表现部分与内容结合在一起,看起来非常糟糕,所幸的是css的出现解决了这一问题。

既然css的出现带来了更好的代码结构,那我们在书写的时候就不得不考虑一下规范问题,让结构更加清晰。下面是一些通用规范:

1.让标记更有意义

有意义的标记更容易让人理解,包括语义化的标签,通俗易懂的变量命名等,这在团队开发时尤为重要。

2.ID和类名

类应用于概念上相似的元素,ID应用于不同的唯一元素。所以,不到万不得已的情况下,最好不要用id,除非它在页面真的只出现一次。

另外,给id和class命名时,要尽可能保持名称与表现方式无关。例如现在有一个红色的警告框,很显然我们可以给他一个class="warning",而不是class="red-box"。

还有啊,类用起来的确让人感觉很爽,但要适度,不要使用过度或滥用,不然对身体不好的。

3.div和span

很多人以为div是木有语义的,其实它是有的,叫做部分(division)。它可以将文档分为几个有意义的区域。但是当有现有元素能实现区域分割功能时,应当避免使用div以减少标记。比如下面的写法

<div class="nav">
<ul>
<li>
...
</li
</ul>
</div>

完全可以删除div:

<ul class="nav">
<ul>
<li>
...
</li>
</ul>

使用span也是一样的,只不过它是内联元素而已。

4.微格式

由于HTML缺少相应的元素,很难突出显示人、地点、时间等类型的信息,于是就有人开发了一套命名标准来解决这个问题。这些命名基于vCard和iCalendar等现有的数据格式,现在成为微格式。

微格式让我们以一种特定的方式标记数据,让其他程序和服务可以访问它。许多大型网站已经支持微格式了,但与LZ没关系,避而不谈,需要时去百度。

5.规划和维护样式表

站点越大越复杂,css就越难管理,养成一个好的习惯是十分重要的。这里有两种策略:

一个是创建多个不同类别的样式表。这样的确容易分类,但多个文件会导致从服务器发送更多的数据包,这些包会影响下载时间。从性能上来考虑的话最好不要用太多样式表。

还有一个就是写在一个或两个文件里,一个用来排版,一个用装饰。然后在文件中务必做好注释。如果css文件特别长,可以在注释头中加入标志:

/*@group typography*/
大家也可以自定义注释规则,总之方便查看和编码就行。也可以规定一个代码结构,比如像下面:

/*-----------@group 一般样式-----------*/
/*主体样式*/
/*reset样式*/
/*链接样式*/
/*标题样式*/
/*其他样式*/
/*-----------@group 辅助样式-----------*/
/*表单*/
/*通知和error*/
/*一致的条目*/
/*-----------@group 页面结构样式-----------*/
/*标题,页脚,导航*/
/*布局*/
/*其他页面结构样式*/
/*-----------@group 页面组件-----------*/
/*各个页面样式*/

一旦养成一个好的代码习惯,对今后写代码或看以前的代码都是非常有利的。


6.其他

规范这东西一时半会总结不玩,等以后慢慢添加吧,再说,这也不是重点哈哈。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
大数据
使用钉钉扫一扫加入圈子
+ 订阅

大数据计算实践乐园,近距离学习前沿技术

其他文章
最新文章
相关文章