前言

在项目开发中对于css名字的命名和书写老是感觉很混乱,这对于代码的可读性以及维护提出了挑战,所以在闲暇之余看了一些这方面的内容,现总结如下...

1.命名规则说明

  1. 所有的命名最好都小写
  2. 属性的值一定要用双引号("")括起来,且一定要有值如class="divcss5",id="divcss5"
  3. 每个标签都要有开始和结束,且要有正确的层次,排版有规律工整
  4. 空元素要有结束的tag或于开始的tag后加上"/"
  5. 表现与结构完全分离,代码中不涉及任何的表现元素,如style、font、bgColor、border等
  6. 给每一个表格和表单加上一个唯一的、结构标记id
  7. 给图片加上alt标签
  8. 尽量不缩写,除非一看就明白的单词,不知道的用翻译软件翻译一下
  9. 无论是使用“.”(小写句号)选择符号开头命名,还是使用“#”(井号)选择符号开头命名都无所谓,但我们最好遵循,主要的、重要的、特殊的、最外层的盒子用“#”(井号)选择符号开头命名,其它都用“.”(小写句号)选择符号开头命名
  10. 如果名字过长可以用中横线但是拒绝使用下划线(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.去掉小数点后面的0
bad

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属性声明顺序

详细的声明顺序可以参考此文章

  1. 位置属性(position, top, right, z-index,display, float等)
  2. 大小(width, height, padding, margin)
  3. 文字系列(font, line-height, letter-spacing,color- text-align等)
  4. 背景(background, border等)
  5. 其他(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命名和书写规范的更多相关文章

  1. 原来你一直写错了?!实力分享一波 CSS 使用的书写规范顺序与偏门又实用的样式...

    我们在埋头写代码的时候,还要学会收集整理一些常用的代码小技巧,以便在工作时候,可以及时调取,提高工作效率. 今天,我把之前收集整理的一些CSS代码小技巧分享出来,供你参考学习,希望对你有帮助. 一.C ...

  2. web前端开发企业级CSS常用命名,书写规范总结

    1.常用命名 标题: title 摘要: summary 箭头: arrow 商标: label 网站标志: logo 转角/圆角: corner 横幅广告: banner 子菜单: subMenu ...

  3. SQL Server性能优化(4)命名和书写规范

    命名规范是一个老生常谈的问题,好的命名规范对于团队程序开发,对bug定位.处理,项目延续有很重要的作用. 一. 列举现在的问题:     1.名称首字母不大写     2. 用中文名字         ...

  4. css学习_css书写规范

    css书写规 1.空格规范: div { color: red; } 2.选择器规范 3.属性 属性定义要另起一行 属性定义后必须以分号结尾 div { color: red; font-size: ...

  5. css命名书写规范小结。

    单行形式书写风格的排版约束 1.   每一条规则的大括号 { 前后加空格 2.   多个selector共用一个样式集,则多个selector必须写成多行形式 3.   每一条规则结束的大括号 } 前 ...

  6. CSS书写规范、命名规范、网易CSS框架NEC

    网易CSS框架NEC:http://nec.netease.com/ NEC框架的CSS规范:  CSS规范 - 分类方法 CSS规范 - 命名规则 CSS规范 - 代码格式 CSS规范 - 优化方案 ...

  7. CSS书写规范、顺序和命名规则

    写了这么久的CSS,但大部分前端er都没有按照良好的CSS书写规范来写CSS代码,这样会影响代码的阅读体验,这里总结一个CSS书写规范.CSS书写顺序供大家参考   这些是参考了国外一些文章以及我的个 ...

  8. css的定义、用法、注释、命名规则、书写规范

    什么是css: css全名是层叠样式表(Cascading Style Sheets) CSS的作用:给html标签添加"样式",样式定义了如何显示 HTML 元素 标签是可以由自 ...

  9. 如何规范 CSS 的命名和书写

    我开始学前端的时候也是对于规范问题头疼,后来看了网易的NEC规范,惊呼牛逼 NEC : 更好的CSS样式解决方案 只遵循横向顺序即可,先显示定位布局类属性,后盒模型等自身属性,最后是文本类及修饰类属性 ...

随机推荐

  1. noip2018day1-赛道修建

    题目描述 \(C\) 城将要举办一系列的赛车比赛.在比赛前,需要在城内修建 $m $条赛道. \(C\) 城一共有 \(n\) 个路口,这些路口编号为 \(1,2,-,n\)有 $n-1 $条适合于修 ...

  2. Java Web开发技术教程入门-静态网页技术

        昨天了解了构建动态网站的几种技术:Servlet技术.JSP技术,ASP技术和ASP.NET技术以及PHP技术.昨天的精髓在于JSP技术的运行原理:通过用户请求JSP文件,首先检查JSP文件的 ...

  3. Coursera机器学习笔记(一) - 监督学习vs无监督学习

    转载 http://daniellaah.github.io/2016/Machine-Learning-Andrew-Ng-My-Notes-Week-1-Introduction.html 一. ...

  4. Deadlock_synchromized-Java_se

    class Test implements Runnable{ private boolean flag; Test(boolean flag) { this.flag = flag; } publi ...

  5. Bootstrap4中栅格系统CSS中 col-sm-* col-md-* col-lg-*的意义以及当其同时具有col-xs-* col-sm-* col-md-* col-lg-*的含义

    根据Bootstrap--Grid 中 col-sm-* col-md-* col-lg-* col-xl-*的意义: .col-sm-* 小屏幕 手机 (≥ 576px) .col-md-* 中等屏 ...

  6. python程序超时处理 timeout_decorator

    如下两个例子,实现对某个函数的超时处理(其实就是加了一个装饰器timeout): 成功例子: 代码: import time import timeout_decorator @timeout_dec ...

  7. MathType 7.4.2.480

    目录 1. 相关推荐 2. 按 3. 软件介绍 4. 安装步骤 5. 使用说明 6. 下载地址 1. 相关推荐 推荐使用:AxMath(AxMath可以与LaTeX进行交互):https://blog ...

  8. matlab 中figure的图像 抗锯齿

    linehandle = plot(xxxxxx); set( linehandle, 'linesmoothing', 'on' );

  9. Scrapy-redis分布式+Scrapy-redis实战

    [学习目标] Scrapy-redis分布式的运行流程 Scheduler与Scrapy自带的Scheduler有什么区别 Duplication Filter作用 源码自带三种spider的使用 6 ...

  10. @ResponseBody 注解是什么意思?

    1. @ResponseBody注解的作用是将Controller的方法返回的对象通过适当的转换器转换为指定的格式之后,写入到response对象的body区,通常用来返回JSON数据或者是XML数据 ...