CSS命名规范和规则
一、命名规则
)、尽量不缩写,除非一看就明白的单词
二、class的命名
(1).red { color: red; }
.f60 {color: #f60; }
.ff8600{ color: #ff8600; }
(2)字体大小,直接使用”font+字体大小”作为名称,如
.font12px{ font-size: 12px; }
.font9pt{font-size: 9pt; }
Ps:px就是表示pixel,像素,是屏幕上显示数据的最基本的点;
pt就是point,是印刷行业常用单位,等于1/72英寸;
pixel是相对大小,而point是绝对大小,也有说em是相对单位,而px和pt都是绝 对单位
px是以屏幕象素为单位。pt是以1/72英寸为单位
计算公式如下:那么1px = 1pt * 图像分辨率/72
PX和em转换的公式:
对于PX转em的方法也类似,就是em=16乘以1px,也就是说1.5em=1.5×16=24px
(3)对齐样式,使用对齐目标的英文名称,如
.left { float:left; }
.bottom { float:bottom; }
(4) 使用”类别+功能”的方式命名(这个就不具体说了,看个人习惯和项目的具体情况而定)
(5)采用驼峰式命名,如下所示:
mainContent newsContent headerImage
使用驼峰式命名的好处:增强代码的可读性,避免引入额外的分隔符,从而减少字符数量
(6)不建议使用中线或者下划线,会增加文件的大小。(尽量不使用,个人习惯不好的可以慢慢改)
CSS命名规范和规则的更多相关文章
- CSS命名规范(规则)
常用的CSS命名规则 头:header内容:content/container尾:footer导航:nav侧栏:sidebar栏目:column页面外围控制整体佈局宽度:wrapper左右中:left ...
- css命名规范和书写规范
1.位置属性(position, top, right, z-index, display, float等)2.大小(width, height, padding, margin)3.文字系列(fon ...
- CSS命名规范(规则)常用的CSS命名规则
CSS命名规范(规则)常用的CSS命名规则 CSS命名规范(规则)常用的CSS命名规则 头:header 内容:content/container 尾:footer ...
- html,css命名规范 (转)
HTML+CSS命名规范总结 1.HTML部分 1.1添加必须的utf-8的字符集,并且使用HTML5的简洁 方式: <meta charset="utf-8"> 1. ...
- CSS 命名规范及标题供参考与学习
一.CSS 命名规范 XHTML-CSS写作建议 所有的xhtml代码小写 属性的值一定要用双引号("")括起来,且一定要有值 每个标签都要有开始和结束,且要有正确的层次 空元 ...
- 通用CSS命名规范
一.文件命名规范 样式文件命名主要的 master.css布局,版面 layout.css专栏 columns.css文字 font.css打印样式 print.css主题 themes.css [/ ...
- CSS 命名规范总结
CSS 命名规范总结 BEM 命名给 CSS 以及 html 提供清晰结构,命名空间提供更多信息,模块化提高代码的重用,以达到 CSS 命名语义化.可重用性高.后期维护容易.加载渲染快的要求. 首先, ...
- CSS命名规范
DIV+CSS规范命名大全集合 前端人员必看CSS命名规范 整理: 文件名必须由小写字母.数字.中划线组成 ).所有的命名最好都小写,一律采用小写加中划线的方式,不允许使用大写字母或 _2).属性的值 ...
- web前端开发CSS命名规范参考
做为一个web前端工程师,每天接触HTML.css就像吃饭一样,但是作为一名合作.优秀的web前端工程师,对DIV+CSS命名还是有一定的规范的,本文整理了一份web前端开发中DIV+CSS各种命名规 ...
随机推荐
- 吴恩达-coursera-机器学习-week2
四.多变量线性回归(Linear Regression with Multiple Variables) 4.1 多维特征 4.2 多变量梯度下降 4.3 梯度下降法实践1-特征缩放 4.4 梯度下降 ...
- netty-socketio 示例代码
socket.io是一个不错的websocket项目,github上有它的java实现:netty-socketio 及 示例项目 netty-socketio-demo,基本上看看demo示例项目就 ...
- jquery json 格式教程
介绍 我们知道AJAX技术能够使得每一次请求更加迅捷,对于每一次请求返回的不是整个页面,也仅仅是所需要返回的数据.通常AJAX通过返回XML格式的数据,然后再通过客户端复杂的JavaScript脚本解 ...
- STM32 Seminar 2007 -- Timer
- TIMER门控模式控制PWM输出长度
TIMER门控模式控制PWM输出长度 参照一些网友代码做了些修改,由TIM4来控制TIM2的PWM输出长度, 采用主从的门控模式,即TIM4输出高时候TIM2使能输出 //TIM2 PWM输出,由TI ...
- Go内置库模块 flag
import "flag" flag包实现了命令行参数的解析.每个参数认为一条记录,根据实际进行定义,到一个set集合.每条都有各自的状态参数. 在使用flag时正常流程: 1. ...
- phonegap helloworld 之android
一 phonegap cordova: http://cordova.apache.org/phonegap: http://phonegap.com PhoneGap 是Cordova的一个开源的发 ...
- 关于在Struts2的Action中使用domain模型接收参数的问题
最近在搭建一个最新的ssh2框架,今天在调试的时候,发现了一个以前一直没有注意过的问题,我在Action中使用域模型的方式去接收jsp画面中的参数的时候,发现参数总是接收不完,头一次遇到这种问题,现在 ...
- ASP.NET Web API中通过ETag实现缓存
通常情况下Server是无状态的,在ASP.NET Web API中,我们可以让服务端响应体中产生ETag属性,起到缓存的作用.大致实现原理是: 1.服务端的响应体中返回一个ETag属性2.客户端通过 ...
- ASP.NET MVC异步验证是如何工作的01,jQuery的验证方式、错误信息提示、validate方法的背后
ASP.NET MVC借助jQuery的验证机制,提供了一套从客户端到服务端异步验证的解决方案,通常情况下,用起来相当方便.但面对一些相对特殊的情况,可能会遇到验证失效的场景,比如在使用ajax动态异 ...