前端(HTML/CSS/JS)-CSS编码规范
1. 文件名规范
文件名建议用小写字母加中横线的方式。为什么呢?因为这样可读性比较强,看起来比较清爽
https://stackoverflow.com/questions/25704650/disable-blue-highlight-when-touch-press-object-with-cursorpointer
那为什么变量名不用小写字母加小划线的方式
family_tree
因为下划线比较难敲(shift + -),所以一般用驼峰式命名变量的居多。
引入CSS文件的link可以不用带type="text/css"
<link rel="stylesheet" href="test.css">
因为link里面最重要的是rel这个属性,可以不要type,但是不能没有rel。
JS也是同样道理,可以不用type
<script src="test.js"></script>
2. 不要使用样式特点命名
有些人可能喜欢用样式的特点命名
.red-font{
color: red;
}
.p1{
font-size: 18px;
}
.p2{
font-size: 16px;
}
类的命名应当使用它所表示的逻辑意义,
如signup-success-toast、request-demo、agent-portrait、 company-logo等等。
3. 减少覆盖
如下代码,为了让每个house中间的20px的间距,但是第一个house不要有间距:
.house{
margin-top: 20px;
}
.house:first-child{
margin-top:;
}
其实可以改成这样
.house + .house{
margin-top: 20px;
}
选择.house后所有的.house,第一个不选中,这样看起来代码就简洁多了。
还有这种情况,如下代码所示:
.request-demo input{
border: 1px solid #282828;
}
.request-demo input[type=submit]{
border: none;
}
其实可以借助一个:not选择器:
.request-demo input:not([type=sbumit]){
border: 1px solid #282828;
}
4. 多写注释
(1)文件顶部的注释
/*
* @description整个列表页样式入口文件
* @author yincheng.li
*/
(2)简单注释
/*为了去除输入框和表单点击时的灰色背景*/
input,
form{
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}
5. 属性值规范
(1)如果值是0,通常都不用带单位
.list{
border: 1px solid 0;
margin:;
}
(2)色值用十六进制,少用rgb
因为使用rgb是一个函数,它还要计算一下转换。如果是带有透明度的再用rgba.
如果色值的六个数字一样,那么写3个就好:
color: #ccc;
(3)注意border none和0的区别
如下两个意思一样
border: 0;
border-width: 0;
而下面这两个一样:
border: none;
border-style: none;
所以用0和none都可以去掉边框。
6. 不要设置太大的z-index
有些人喜欢设置z-index很大:
z-index: 99999;
以为他是老大了,不会有人再比他高了,但是螳螂捕蝉,黄雀在后,很快得再写一个:
z-index: 999999
通常自己页面的业务逻辑的z-index应该保持在个位数就好了。
7. 注意float/absolute/fixed定位会强制设置成block
a.btn {
float: left;
display: block;
width: 100px;
height: 30px;
}
第二行的display: block其实是没用的,因为如果你浮动了,目标元素就会具有块级盒模型的特性,即使你display: table-cell或者inline也不管用
8. 清除浮动
清除浮动有多种方法,一般用clearfix大法,虽然这个方法有缺陷,但是它比较简单且能够适用绝大多数的场景,一个兼容IE8及以上的clearfix的写法
.clearfix:after{
content: "";
display: table;
clear: both;
}
9. CSS动画规范
(1)不要使用all属性做动画
使用transition做动画的时候不要使用all所有属性,在有一些浏览器上面可能会有一些问题,如下
transition: all 2s linear;
正确的做法是要用哪个属性做动画就写哪个,如果有多个就用隔开
transition: transform 2s linear,
opacity 2s linear;
(2)使用transform替代position做动画
(3)偏向于使用CSS动画替代JS动画
10. 行内元素可以直接设置margin-left/margin-right
如下有些人为了把span撑开,设置span display: inline-block:
span.phone-numer{
display: inline-block;
margin-left: 10px;
}
其实行内元素可直接margin的左右,能够把它撑开,不需要设置inline-block:
span.phone-numer{
margin-left: 10px;
}
另外需要注意的是img/input/textarea/button默认就是inline-block,也不用再设置。
前端(HTML/CSS/JS)-CSS编码规范的更多相关文章
- 【转发】网易邮箱前端技术分享之javascript编码规范
网易邮箱前端技术分享之javascript编码规范 发布日期:2013-11-26 10:06 来源:网易邮箱前端技术中心 作者:网易邮箱 点击:533 网易邮箱是国内最早使用ajax技术的邮箱.早在 ...
- Vue.js 组件编码规范
本规范提供了一种统一的编码规范来编写 Vue.js 代码.这使得代码具有如下的特性: 其它开发者或是团队成员更容易阅读和理解. IDEs 更容易理解代码,从而提供高亮.格式化等辅助功能 更容易使用现有 ...
- html、css、js的命名规范
最佳原则 坚持制定好的代码规范. 无论团队人数多少,代码应该同出一门. 项目命名 全部采用小写方式, 以下划线分隔. 例:my_project_name 目录命名 参照项目命名规则: 有复数结构时,要 ...
- HTML+CSS+JS设计注册页面
HTML实战--设计一个个人信息填写界面 应用的技术:HTML+CSS+JS CSS和JS是套用的模板,主要练习了表单的验证和正则表达式的使用 效果图: 代码: <!DOCTYPE html&g ...
- 前端(HTML/CSS/JS)-HTML编码规范
一.HTML编码规范 1. img标签要写alt属性 根据W3C标准,img标签要写alt属性,如果没有就写一个空的.但是一般要写一个有内容的,根据图片想要表达的意思,因为alt是在图片无法加载时显示 ...
- HTML/CSS/JS编码规范
最近整理了一份HTML/CSS/JS编码规范,供大家参考.目录:一.HTML编码规范二.CSS编码规范三.JS编码规范 一.HTML编码规范 1. img标签要写alt属性 根据W3C标准,img标签 ...
- 前端、HTML+CSS+JS编写规范(终极版)
HTMLCSS文档规范 HTML和CSS文档必须采用UTF-8编码格式: HTML文档必须使用HTML5的标准文档格式: HTMLCSS编写规范 HTML和CSS的标签.属性.类名.ID都必须使用小写 ...
- 前端编码规范之CSS
"字是门面书是屋",我们不会去手写代码,但是敲出来的代码要好看.有条理,这还必须得有一点约束~ 团队开发中,每个人的编码风格都不尽相同,有时候可能存在很大的差异,为了便于压缩组件对 ...
- 前端编码规范(4)—— CSS 和 Sass (SCSS) 规范
CSS and Sass (SCSS) style rules ID and class naming ID和class(类)名总是使用可以反应元素目的和用途的名称,或其他通用名称.代替表象和晦涩难懂 ...
- 前端HTML与CSS编码规范
HTML 语法 HTML5 doctype 语言属性(Language attribute) 字符编码 IE 兼容模式 引入 CSS 和 JavaScript 文件 实用为王 属性顺序 布尔(bool ...
随机推荐
- 修改vmware中的FreeBSD配置
在运行虚拟机之前,将操作系统安装文件挂载到CD-ROM中,然后,启动虚拟机,并用root用户进入操作系统.做如下操作: 1:挂载光盘文件: #mount /cdrom 2:运行系统安装程序,就可以显示 ...
- CodeForces - 156D:Clues(矩阵树定理&并查集)
题意:给定N点,M边,求添加最少的边使之变为连通图的方案数. 思路:注意题目给出的M边可能带环,即最后生成的不一定是一棵树.但是影响不大.根据矩阵树定理,我们知道生成树的数量=N^(N-2),即点数^ ...
- Centos 7 安装 Python3.7
目录 下载Python Python安装 遇到问题 错误: configure: error: no acceptable C compiler found in $PATH 错误: can't de ...
- jsp有哪些动作?作用分别是什么?
jsp共有6种基本动作: 1.jsp:include,在页面被请求的时候引入一个文件 2.jsp:useBean,寻找或者实例化一个JavaBean 3.jsp:setProperty,设置JavaB ...
- HIVE-执行hive的几种方式,和把HIVE保存到本地的几种方式
网上相关教程很多,这里我主要是简单总结下几种常用的方法,方便日后查询. 第一种,在bash中直接通过hive -e命令,并用 > 输出流把执行结果输出到制定文件 hive -e "se ...
- Mesos问题汇总
1.Mesos的IP配置 我在虚拟机里面搭载了一个mesos,但是外主机无法通过http://ip:5050 我在虚拟机内部测试发现wget localhost:5050可以正常访问:但是wget i ...
- Python collections系列之可命名元组
可命名元组(namedtuple) 根据nametuple可以创建一个包含tuple所有功能以及其他功能的类 1.创建一个坐标类 import collections # 创建类, defaultd ...
- POJ3009(dfs)
Curling 2.0 Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 17672 Accepted: 7262 Desc ...
- scala 定时器
假如我们要开发一个定时器,该定时器每秒钟执行一定的动作,我们如何把要执行的动作传给定时器?最直观的回答是:传一个实现动作的函数(function) object Helloworld { def on ...
- mina写入数据的过程
mina架构图 写数据.读数据触发点: 写数据: 1.写操作很简单,是调用session的write方法,进行写数据的,写数据的最终结果保存在一个缓存队列里面,等待发送,并把当前session放入f ...