css规范

最新推荐文章于 2022-11-14 11:01:37 发布

pangDa-cd

最新推荐文章于 2022-11-14 11:01:37 发布

阅读量237

点赞数 6

分类专栏： CSS 文章标签： css规范 css书写规范

本文链接：https://blog.csdn.net/weixin_45430963/article/details/99084998

版权

CSS 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

css规范简介

作为前端开发人员，先问问小伙伴们在写CSS时是否碰到以下问题。
(1)你总是看不懂别人写的代码，或者读起来很吃力?
(2)你总是怕自己编写的代码与同事的有冲突或者互相影响?
(3)你的代码在多次维护之后，是否变得越来越臃肿，越来越难以维护?
(4)当你需要修改同事写的代码时感觉无从下手，或者要去问他如果改了这里那里会不
会影响其他代码?

其实出现上面这些情况的根本原因在于，CSS代码没有规范化!
规范化的CSS不仅利于团队合作，而且对后期的维护以及代码的重用，都非常重要。在
这里，我从以下两个方面来介绍一下关于CSS规范的内容。
(1)命名规范。
(2)书写规范。

命名规范

不少人包括那些使用了CSS很长时间的开发人员，面对CSS文件的命名或者元素id以
及class的命名都会犯愁或者很随意地对待。其实，一个良好的命名规范,不仅可以提高代码的阅读体验，而且这对搜索引擎优化也是非常重要的。
对于命名规范，主要有两个方面: CSS文件命名、id 和class命名。

css文件命名规范

文件名	说明
reset.css	重置样式，重置元素默认样式
global.css	全局样式，全站公用，定义页面基础样式
themes.css	主题样式，用于实现换肤功能
module.css	模块样式，用于模块的样式
print.css	打印样式，用于打印的样式
themes.css	主体样式
font.css	文字样式
layout.css	布局样式
mend.css	补丁样式

那么最大的疑问来了!平常我们都是把重置样式、导航样式全都写在一一个CSS文件里面，这里为什么还要搞那么多个文件出来呢?再说了，一个页面引入这么多CSS文件，会引发多次HTTP请求，页面加载速度岂不是非常慢?
事实上，把样式文件划分为多个文件，这是“开发阶段”的做法!按照功能模块划分CSS
文件，那是为了方便在开发阶段进行开发和修改。在整站发布的时候，我们会使用工具将多个CSS文件压缩合并成-一个文件。也就是说，开发阶段和发布阶段是有区别的，大家要分清楚。

id和class命名

不少新手朋友对待元素id和class的使用和命名很随意，似乎完全是凭心情来的。例如
这个元素用了id,那个元素就用用class吧。其实，什么时候用id,什么时候用class,是很
讲究的。
此外，对于元素id和class的命名，其实也是很有讲究的。好的命名有很多优点，不仅
方便阅读、方便维护，而且对搜索引擎优化也是相当重要的。搜索引擎识别-一个页面，很大一部分是根据元素id或class命名来判断。假如一个页面的元素命名很随意的话，搜索引擎小蜘蛛很容易迷路，这样会导致它以后很少来光顾你的网站。

id和class命名，比较常见的有三种方法。
(1)骆驼峰命名法，例如topMain、 subLeftMenu。
(2)中划线命名法，例如top-main、sub-left-menu。
(3)下划线命名法，例如top_ main、sub_ Jeft_ menu。

在CSS中，对于元素id和class的命名，给出几点建议。
(1)使用英文命名而非中文命名。例如页面头部应该命名为header, 而不是toubu。
(2)尽量不缩写，除非是-看就明白的单词，例如nav。
(3)命名统一规范，尽量不要出现一个用中划线命名，而另外一个用下划线命名的情况。虽然下划线和中划线都可以，但是建议使用中划线，可参见各大型网站。
(4)为了避免class命名的重复，命名时- -般取父元素的class名作为前缀，例如:

<div class="column">
       <h3 class="column-title"></h3>
       <div class="column-content"></div>.
</div>

网页主体部分命名

网页部分	命名
最外层	wrapper
头部	header
内容	content
侧栏	sidebar
栏目	column
热点	hot
新闻	news
下载	download
导航条	nav
标志	logo
主体	main
左侧	main-left
右侧	main-right
底部	footer
友情链接	friendlink
加入我们	joinus
版权:	copyright
服务	service
登录	login
注册	register

web前端命名规范整理

书写规范

在CSS中，属性的书写顺序也是很有讲究的。良好的书写顺序习惯，既方便阅读,同时也方便后期维护。Andy Ford和Fantasai这两位都是CSS领域内的专家,他们都各自对CSS属性书写顺序提出过自己的意见。表4-6所示的是综合两位专家的思想所推荐的CSS属性书写顺序。

这种CSS属性书写顺序是按照样式功能的重要性从上到下排列的。这里把影响元素页面
布局的样式(如float、margin、 padding、height、 width 等)排到前面，而把不影响布局的样式(如background、color、 font 等)排到后面。这种主次分明的排列方式，极大地提高了代码的可阅读性和可维护性。
举例

#main{
       /*影响文档流属性*/
       display: inl ine-block;
       position:absolute;
       top:0;
       left:0;
       /*盒子模型属性*/
       width: 100px;
       height:100px;
       border:1px solid gray;
       /*文本性属性*/
       font-size: 15px;
       font-weight :bold;
       text- indent: 2em;
       /*装饰性属性*/
       color:White;
       background-color :Red;
       /*其他属性*/
       cursor :pointer;
 }

上面CSS书写顺序是比较规范的，读起来一目了然，后期维护也很方便。对于这种书写
顺序，一开始我们并不适应。我们应该在实际开发的过程中感性地认知，并逐步规范自己的书写顺序。
在这里，大家可能就有疑问了:在实际开发中，是不是一定要把影响文档流的属性写完
了，然后才去写盒子模型的属性;是不是-一定要把文本性属性写完了，然后才去写装饰性属性呢?
这倒完全没必要，而且我们也做不到。因为CSS中的属性是随着开发的需要逐步添加的。也就是说对于属性书写顺序，我们只关心“书写结果”，并不关心“书写过程”。我们只需要保证最终的CSS代码顺序符合规范就可以了。因为这样可以方便我们阅读以及维护。

css规范就先写到这里，欢迎阅读。