css命名和书写规范
前言
在项目开发中对于css名字的命名和书写老是感觉很混乱,这对于代码的可读性以及维护提出了挑战,所以在闲暇之余看了一些这方面的内容,现总结如下...
1.命名规则说明
- 所有的命名最好都小写
- 属性的值一定要用双引号("")括起来,且一定要有值如class="divcss5",id="divcss5"
- 每个标签都要有开始和结束,且要有正确的层次,排版有规律工整
- 空元素要有结束的tag或于开始的tag后加上"/"
- 表现与结构完全分离,代码中不涉及任何的表现元素,如style、font、bgColor、border等
- 给每一个表格和表单加上一个唯一的、结构标记id
- 给图片加上alt标签
- 尽量不缩写,除非一看就明白的单词,不知道的用翻译软件翻译一下
- 无论是使用“.”(小写句号)选择符号开头命名,还是使用“#”(井号)选择符号开头命名都无所谓,但我们最好遵循,主要的、重要的、特殊的、最外层的盒子用“#”(井号)选择符号开头命名,其它都用“.”(小写句号)选择符号开头命名
- 如果名字过长可以用中横线但是拒绝使用下划线(IE6以可能出现解析错误,为了区分JavaScript变量名)
bad
.miantitle {
color: #e3c;
}
.mian_title {
color: #e3c;
}
good
.mian-title {
color: #e3c;
}
11.属性简写需要你非常清楚属性值的正确顺序,而且在大多数情况下并不需要设置属性简写中包含的所有值,所以建议尽量分开声明会更加清晰;margin 和 padding 相反,需要使用简写。更多详细规则请参考此文章bad
.list-box {
border-top-style: none;
font-family: aerif;
font-size: 100%;
line-height: 1.6;
padding-bottom: 2em;
padding-left: 1em;
padding-right: 1em;
padding-top: 0;
}
good
.list-box {
border-top: 0;
font: 100%/1.6 aerif;
padding: 0 1em 2em;
}
12.去掉小数点后面的0bad
font-size: 0.8em;
good
font-size: .8em;
13.十六进制颜色代码缩写,并尽量用小写bad
color: #eebbcc;
good
color: #ebc;
14.不要随意用id
id在JS是唯一的,不能多次使用,而使用class类选择器却可以重复使用,另外id的优先级优先与class,所以id应该按需使用,而不能滥用
15.可以为选择器加状态前缀bad
.withdrawal {
background-color: #ccc;
}
good
.is-withdrawal {
background-color: #ccc;
}
16.项目命名的时候采用这种方式my_project_name
17.媒体查询规则靠近与他们相关的规则,不要将他们一起放到独立的样式文件中,具体可参考此文章
18.更多详细css书写规范可参考此文章1和此文章2
19.scss书写时应注意的问题可以参考此文章
2.命名参考表
网页外层
最外层:wrapper (页面外围控制整体布局宽度)
头部:header
主体内容(中部):main
左侧布局:main-left
右侧布局:main-right
导航条:nav
网页中部主体:content
底部:footer
菜单:menu
页面结构
#wrapper 页面外围控制整体布局宽度
#container或#content 容器,用于最外层
#head, #header 页头部分
#foot, #footer 页脚部分
#sidebar 侧边栏
#column 栏目
#left,#right,#center 左右中
导航
#nav 导航
#miannav 主导航
#subnav 子导航
#topnav 顶导航
#sidenar 边导航
#leftsidenav 左导航
#rightsidenav 右导航
#menu 菜单
#submenu 子菜单
#title 标题
#summary 摘要
功能
#logo 标志
#banner 广告
#login 登录
#loginbar 登录条
#regsiter 注册
#search 搜索
#shop 功能区
#title 标题
#joinus 加入
#status 状态
#btn 按钮
#s 滚动
#tab 标签页
#list 文章列表
#msg 提示信息
#current 当前的
#tips 小技巧
#icon 图标
#note 注释
#guild 指南
#service 服务
#hot 热点热门
#news 新闻
#download 下载
#vote 投票
#partner 合作伙伴
#friendlink 友情链接
#copyright 版权
#searchInput 搜索输入框
#search-output 搜索输出
#search-results 搜索结果
#branding 商标
#siteinfo 网站信息
#siteinfoLegal 法律声明
#siteinfoCredits 信誉
#arrow 箭头
#sitemap 网站地图
#homepage 首页
#subpage 二级页面子页面
#toolbar 工具条
#drop 下拉
#dropmenu 下拉菜单
需要用 class的命名
.tab 标签页
.left .right .center 居左、中、右
.news 新闻
.download 下载
.banner 广告条
.products 产品
.products_prices 产品价格
.products-description 产品描述
.products_review 产品评论
.editor_review 编辑评论
.news_release 最新产品
.publisher 生产商
.screenshot 缩略图
.faqs 常见问题
.keyword 关键词
..blog 博客
.forum 论坛
3.css文件命名
global.css 全局
全局样式为全站公用,为页面样式基础,页面中必须包含
master.css style.css 主要的
module.css 模块
产品类页面应用,将可复用类模块进行剥离后,可与其它样式配合使用
base.css 基本共用
layout.css 布局,版面
页面结构类型复杂,并且公用类型较多时使用。多用在首页级页面和产品类页面中
themes.css 主题
实现换肤功能时应用
columns.css 专栏
font.css 文字,字体
forms.css 表单
mend.css 补丁
基于以上样式进行的私有化修补
print.css 打印
style.css 私有
独立页面所使用的样式文件,页面中必须包含
4.css属性声明顺序
详细的声明顺序可以参考此文章
- 位置属性(position, top, right, z-index,display, float等)
- 大小(width, height, padding, margin)
- 文字系列(font, line-height, letter-spacing,color- text-align等)
- 背景(background, border等)
- 其他(animation, transition等)
bad
.example {
color: red;
z-index: -1;
background-color: #9e0;
display: inline-block;
font-size: 1.5em;
}
good
.example {
z-index: -1;
display: inline-block;
font-size: 1.5em;
color: red;
background-color: #9e0;
}
感谢
此文我参考了如下作者写的文章,在此特别提出感谢,如果你在阅读我写的文章中有任何问题可以查阅如下链接:
css命名和书写规范的更多相关文章
- 原来你一直写错了?!实力分享一波 CSS 使用的书写规范顺序与偏门又实用的样式...
我们在埋头写代码的时候,还要学会收集整理一些常用的代码小技巧,以便在工作时候,可以及时调取,提高工作效率. 今天,我把之前收集整理的一些CSS代码小技巧分享出来,供你参考学习,希望对你有帮助. 一.C ...
- web前端开发企业级CSS常用命名,书写规范总结
1.常用命名 标题: title 摘要: summary 箭头: arrow 商标: label 网站标志: logo 转角/圆角: corner 横幅广告: banner 子菜单: subMenu ...
- SQL Server性能优化(4)命名和书写规范
命名规范是一个老生常谈的问题,好的命名规范对于团队程序开发,对bug定位.处理,项目延续有很重要的作用. 一. 列举现在的问题: 1.名称首字母不大写 2. 用中文名字 ...
- css学习_css书写规范
css书写规 1.空格规范: div { color: red; } 2.选择器规范 3.属性 属性定义要另起一行 属性定义后必须以分号结尾 div { color: red; font-size: ...
- css命名书写规范小结。
单行形式书写风格的排版约束 1. 每一条规则的大括号 { 前后加空格 2. 多个selector共用一个样式集,则多个selector必须写成多行形式 3. 每一条规则结束的大括号 } 前 ...
- CSS书写规范、命名规范、网易CSS框架NEC
网易CSS框架NEC:http://nec.netease.com/ NEC框架的CSS规范: CSS规范 - 分类方法 CSS规范 - 命名规则 CSS规范 - 代码格式 CSS规范 - 优化方案 ...
- CSS书写规范、顺序和命名规则
写了这么久的CSS,但大部分前端er都没有按照良好的CSS书写规范来写CSS代码,这样会影响代码的阅读体验,这里总结一个CSS书写规范.CSS书写顺序供大家参考 这些是参考了国外一些文章以及我的个 ...
- css的定义、用法、注释、命名规则、书写规范
什么是css: css全名是层叠样式表(Cascading Style Sheets) CSS的作用:给html标签添加"样式",样式定义了如何显示 HTML 元素 标签是可以由自 ...
- 如何规范 CSS 的命名和书写
我开始学前端的时候也是对于规范问题头疼,后来看了网易的NEC规范,惊呼牛逼 NEC : 更好的CSS样式解决方案 只遵循横向顺序即可,先显示定位布局类属性,后盒模型等自身属性,最后是文本类及修饰类属性 ...
随机推荐
- 如何输出opencv编译信息
本文链接:https://mangoroom.cn/opencv/how-to-print-compile-info-of-opencv.html opencv提供了一个函数,利用这个函数可以输出当前 ...
- PhpStorm配置Xdebug调试
安装xdebug 去官网下载对应版本的xdebug扩展 XDEBUG EXTENSION FOR PHP | DOWNLOADS 如何选择正确版本 输出phpinfo()函数的内容 查看输出页面的网页 ...
- 简单CSS实现闪烁动画(+1白话讲解)
原文:简单CSS实现闪烁动画(+1白话讲解) 本文转载于:猿2048网站⇒https://www.mk2048.com/blog/blog.php?id=icj2chj2ab 背景 本文承接自上文&l ...
- git使用以及对应sourceTree
git上面的几条指令 (1)要想把A合并到B分支上,就需要先切换到B分支上,然后在合并A分支,执行指令: git checkout B // 这是切换到B分支上 git merge A // 这是将A ...
- wex5 如何导包
wex5中 导jar包 要先把jar文件放在: E:\WeX5\runtime\BaasServer\WEB-INF\lib目录中(我wex5放的是E盘) 点击项目 --> 属性 --> ...
- matlab 正弦信号产生
fs=2400;%设定采样频率N=1000; %采样的点数n=0:N-1;t=n/fs; %1/fs相当于隔多长时间才一个点f1=50;%设定争先信号频率xn=sin(2*pi*f1*t);figur ...
- id 显示用户与用户组的信息
id 显示用户与用户组的信息 1.命令功能 id显示指定用户的用户ID和组ID等信息. 2.语法格式 id option username 参数说明 选项 选项说明 -gx 显示用户组ID -G ...
- (转) linux实现ssh免密码登录的正确方法
方法/步骤 验证ssh远程登录,未作免密处理的两台机器,登录时,是需要输入密码的 本地系统执行 ssh-keygen -t rsa 命令,生成密钥文件 在相应的目录下查看生成的密钥文件,其中:id_r ...
- caffe py3 docker
https://hub.docker.com/r/mapler/caffe-py3/ docker pull mapler/caffe-py3 docker run -it mapler/caff ...
- php正则替换非站内链接 替换zencart描述内的非本站链接
php正则替换非站内链接 <?php //要替换的文本,比如产品描述中的文字 header("content-Type: text/html; charset=utf-8") ...