CSS 编码规范
Zane
共 2460字,需浏览 5分钟
· 2016-09-16
命名规则
使用类选择器,放弃ID选择器
ID在一个页面中的唯一性导致了如果以ID为选择器来写CSS,就无法重用。
后代选择器命名
不允许单个字母的类选择器出现,比如.item {}
,原因如下。
通过使用后代选择器的方法,你不需要考虑他的命名是否已被使用,因为他只在当前模块中生效,同样的样式名可以在不同的模块或元件中重复使用,互不干扰;在多人协作或者分模块协作的时候效果尤为明显!。
后代选择器不需要完整表现结构树层级,尽量能短则短。
注:后代选择器不要在页面布局中使用,因为污染的可能性较大;
/* 这里的.itm和.cnt只在.m-list中有效 */
.m-list{margin:0;padding:0;}
.m-list .itm{margin:1px;padding:1px;}
.m-list .cnt{margin-left:100px;}
/* 这里的.cnt和.num只在.m-page中有效 */
.m-page{height:20px;}
.m-page .cnt{text-align:center;}
.m-page .num{border:1px solid #ddd;}
命名应简约而不失语义
/* 反对:表现化的或没有语义的命名 */
.m-abc .green2{}
.g-left2{}
/* 推荐:使用有语义的简短的命名 */
.m-list .wrap2{}
.g-side2{}
相同语义的不同类命名
方法:直接加数字或字母区分即可(如:.m-list、.m-list2、.m-list3等,都是列表模块,但是是完全不一样的模块)。
代码格式
省略url引用中的引号,其他需要引号的地方使用单引号。
.m-box{background:url(bg.png);}
.m-box:after{content:'.';}
属性编写顺序
- 显示属性:display/list-style/position/float/clear …
- 自身属性(盒模型):width/height/margin/padding/border
- 背景:background
- 行高:line-height
- 文本属性:color/font/text-decoration/text-align/text-indent/vertical-align/white-space/content…
- 其他:cursor/z-index/zoom/overflow
- CSS3属性:transform/transition/animation/box-shadow/border-radius
- 如果使用CSS3的属性,如果有必要加入浏览器前缀,则按照 -webkit- / -moz- / -ms- / -o- / std的顺序进行添加,标准属性写在最后。
- 链接的样式请严格按照如下顺序添加: a:link -> a:visited -> a:hover -> a:active
选择器等级
- a = 行内样式style。
- b = ID选择器的数量。
- c = 类、伪类和属性选择器的数量。
- d = 类型选择器和伪元素选择器的数量。
选择器 | 等级(a,b,c,d) |
---|---|
style="" | 1,0,0,0 |
#wrapper #content {} | 0,2,0,0 |
#content .dateposted {} | 0,1,1,0 |
div#content {} | 0,1,0,1 |
#content p {} | 0,1,0,1 |
#content {} | 0,1,0,0 |
p.comment .dateposted {} | 0,0,2,1 |
div.comment p {} | 0,0,1,2 |
.comment p {} | 0,0,1,1 |
p.comment {} | 0,0,1,1 |
.comment {} | 0,0,1,0 |
div p {} | 0,0,0,2 |
p {} | 0,0,0,1 |
优化方案
值缩写
缩写值可以减少CSS文件大小,并增加可读性和可维护性。
但并非所有的值都必须缩写,因为当一个属性的值缩写时,总是会将所有项都设置一遍,而有时候我们不希望设置值里的某些项。
/* 比如我们用下面这个样式来让某个定宽的容器水平居中,我们要的只是left和right,
* 而top和bottom不是这个样式要关心的(如果设置了反倒会影响其他样式在这个容器上的使用),
* 所以这时我们就不需要缩写
*/
.f-mgha{margin-left:auto;margin-right:auto;}
/* 比如下面这个模块的样式设置,我们确实需要设置padding的所有项,于是我们就可以采用缩写 */
.m-link{padding:6px 12px;}
使用16进制表示颜色值
比如颜色值#ffffff,尽量缩写。
.m-box{color:#fff;}
省略值为0时的单位
为节省不必要的字节同时也使阅读方便,我们将0px、0em、0%等值缩写为0。
统一语义理解和命名
语义 | 命名 | 简写 |
---|---|---|
文档 | doc | doc |
头部 | head | hd |
主体 | body | bd |
尾部 | foot | ft |
主栏 | main | mn |
主栏子容器 | mainc | mnc |
侧栏 | side | sd |
侧栏子容器 | sidec | sdc |
盒容器 | wrap/box | wrap/box |
语义 | 命名 | 简写 |
---|---|---|
导航 | nav | nav |
子导航 | subnav | snav |
面包屑 | crumb | crm |
菜单 | menu | menu |
选项卡 | tab | tab |
标题区 | head/title | hd/tt |
内容区 | body/content | bd/ct |
列表 | list | lst |
表格 | table | tb |
表单 | form | fm |
热点 | hot | hot |
排行 | top | top |
登录 | login | log |
标志 | logo | logo |
广告 | advertise | ad |
搜索 | search | sch |
幻灯 | slide | sld |
提示 | tips | tips |
帮助 | help | help |
新闻 | news | news |
下载 | download | dld |
注册 | regist | reg |
投票 | vote | vote |
版权 | copyright | cprt |
结果 | result | rst |
标题 | title | tt |
按钮 | button | btn |
输入 | input | ipt |
评论
大厂都在用的 Git 代码管理规范 !
👉 欢迎加入小哈的星球 ,你将获得: 专属的项目实战 / Java 学习路线 / 一对一提问 / 学习打卡 / 赠书福利全栈前后端分离博客项目 2.0 版本完结啦, 演示链接:http://116.62.199.48/ ,新项目正在酝酿中
小哈学Java
2
免费AI编程助手,支持Visual Studio,让编码愉悦又轻松
前言前有Copilot各种酷炫操作,今有国产软件杀出重围。给大家介绍的是一款国内的国产编程神器,可与微软GitHub Copilot比比身手。关键它还是完全免费。它就是:非十团队国产自主研发的Fitten Code。此工具的速度是GitHub Copilot的两倍,同时它的精确度还有大约2
dotNET全栈开发
10
8则实用的纯CSS布局排版技巧 | 网易4年实践
「链接和长图失效,请大家点击阅读原文查看详情」前言开发每一张网页都离不开布局排版,基于良好布局排版打下基础,才能使后续的开发更顺利。当然不能停留在IExplorer时代那种局限思维上,没办法解决的布局排版都用JS实现😂。今时不同往日,现代CSS属性能更好地快速实现各种布局排版,节约更多时间去摸鱼😉。
前端迷
10
【CSS】2018- 不一样的SVG!SVG在 CSS 中的应用
介绍一些你可能没用过的SVG小技巧。在平时开发中,很多时候都会用到SVG。大部分情况我们都不必关注SVG里面到底是什么,直接当成图片资源引入就行,比如常见的图标资源我们可以通过多种方式使用这个特殊的图片<img src="a.svg">.icon{ background: url("a
前端自习课
96
【每日一练】306—HTML、CSS和JS实现一款简易风时钟效果
作者 | 杨小爱 写在前面 关于时钟的效果,我们前面刚刚写过一期,《【每日一练】304—用 HTML、CSS和JavaScript 实现一款时钟效果》那是一个圆形钟表的效果,今天我们再来写一款,这个风格比较简易,就是纯数字时钟,...
web前端开发
0
【CSS】1995- 15个CSS 常见错误,请一定要注意避免
在不断发展的 Web 开发领域,掌握 CSS(层叠样式表)对于制作视觉上令人惊叹且响应迅速的网站至关重要。 然而,陷阱比比皆是,即使是经验丰富的开发人员也可能会发现自己陷入了常见的 CSS 错误中。 本文剖析了 15 个...
前端自习课
0
object-fit CSS 属性
object-fit CSS 属性指定可替换元素(例如:<img> 或 <video>)的内容应该如何适应到其使用高度和宽度确定的框。<div class="box"> <img class="pic" src="https://interactive-exam...
前端精髓
0
编码负债:技术债务的管理、平衡与风险
软件开发团队的管理是包括多个方面的,进度、成本、质量、技术选型等等。但是对于技术债进行有效管理的团队并不多,一方面不是他们不想管理,而是存在意识上的不足,从而忽略了这方面的管理。 技术债的管理也是很重...
业余草
0