css命名规范

写了这么久的CSS，但大部分前端er都没有按照良好的CSS书写规范来写CSS代码，这样会影响代码的阅读体验，这里总结一个CSS书写规范、CSS书写顺序供大家参考，这些是参考了国外一些文章以及我的个人经验总结出来，我想对写CSS的前端用户来说是值得学习的。 　 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等) 　 CSS书写规范 　　使用CSS缩写属性 　　CSS有些属性是可以缩写的，比如padding,margin,font等等，这样精简代码同时又能提高用户的阅读体验。 　　去掉小数点前的“0” 　　简写命名 　　很多用户都喜欢简写类名，但前提是要让人看懂你的命名才能简写哦！ 　　16进制颜色代码缩写 　　有些颜色代码是可以缩写的，我们就尽量缩写吧，提高用户体验为主。 　　连字符CSS选择器命名规范 　　1.长名称或词组可以使用中横线来为选择器命名。 　　2.不建议使用“_

一、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等) 二、CSS书写规范 1.使用CSS缩写属性 CSS有些属性是可以缩写的，比如padding,margin,font等等，这样精简代码同时又能提高用户的阅读体验。 2.去掉小数点前的“0” 3.简写命名 很多用户都喜欢简写类名，但前提是要让人看懂你的命名才能简写哦！ 4.16进制颜色代码缩写 有些颜色代码是可以缩写的，我们就尽量缩写吧，提高用户体验为主。 5连字符CSS选择器命名规范 1）.长名称或词组可以使用中横线来为选择器命名。 2）.不建议使用“_”下划线来命名CSS选择器，为什么呢？ 输入的时候少按一个shift键； 浏览器兼容问题 （比如使用_tips的选择器命名，在IE6是无效的） 能良好区分JavaScript变量命名（JS变量命名是用“_”） 6.不要随意使用id id在JS是唯一的，不能多次使用，而使用class类选择器却可以重复使用

写了这么久的 CSS ，但大部分前端er都没有按照良好的CSS书写规范来写CSS代码，这样会影响代码的阅读体验，这里设计达人网总结一个CSS书写规范、CSS书写顺序供大家参考，这些是参考了国外一些文章以及我的个人经验总结出来，我想对写CSS的前端用户来说是值得学习的。 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等) CSS书写规范 使用CSS缩写属性 CSS有些属性是可以缩写的，比如padding,margin,font等等，这样精简代码同时又能提高用户的阅读体验。 去掉小数点前的“0” 简写命名 很多用户都喜欢简写类名，但前提是要让人看懂你的命名才能简写哦！ 16进制颜色代码缩写 有些颜色代码是可以缩写的，我们就尽量缩写吧，提高用户体验为主。 连字符CSS选择器命名规范 1.长名称或词组可以使用中横线来为选择器命名。 2.不建议使用“_”下划线来命名CSS选择器，为什么呢？

一、命名规则说明： 1）、所有的命名最好都小写 2）、属性的值一定要用双引号("")括起来，且一定要有值如class="divcss5",id="divcss5" 3）、每个标签都要有开始和结束，且要有正确的层次，排版有规律工整 4）、空元素要有结束的tag或于开始的tag后加上"/" 5）、表现与结构完全分离，代码中不涉及任何的表现元素，如style、font、bgColor、border等 6）、<h1>到<h5>的定义，应遵循从大到小的原则，体现文档的结构，并有利于搜索引擎的查询。 7）、给每一个表格和表单加上一个唯一的、结构标记id 8）、给图片加上alt标签 9）、尽量使用英文命名原则 10）、尽量不缩写，除非一看就明白的单词 二、相对网页外层重要部分CSS样式命名： 外套 wrap ------------------用于最外层 头部 header ----------------用于头部 主要内容 main ------------用于主体内容（中部） 左侧 main-left -------------左侧布局 右侧 main-right -----------右侧布局 导航条 nav -----------------网页菜单导航条 内容 content ---------------用于网页中部主体 底部 footer -----------------用于底部

作为一个前端菜鸟，进公司的第一个项目就是中途从外包公司接过来的公司网站，在别人写过了的基础上接着写，命名什么的，简直不要太痛苦。 目前，这个网站已经完成，但是被后台人员指出命名不规范。有心想解释一两句，但是又觉得的这一个月在命名上的折腾，的确让我对命名规范都模糊了不少。 在看了一些css样式命名规则后，我做了一些笔记。 一、命名规则说明 1.所有的命名最好都小写 2.属性的值一定要用双引号("")括起来，且一定要有值如class="divcss5",id="divcss5" 3.每个标签都要有开始和结束，且要有正确的层次，排版有规律工整 4.空元素要有结束的tag或于开始的tag后加上"/" 5.表现与结构完全分离，代码中不涉及任何的表现元素，如style、font、bgColor、border等 6.<h1>到<h5>的定义，应遵循从大到小的原则，体现文档的结构，并有利于搜索引擎的查询。 7.给每一个表格和表单加上一个唯一的、结构标记id 8.给图片加上alt标签 9.尽量使用英文命名原则 10.尽量不缩写，除非一看就明白的单词 11.在外框楼层太多，无法具体命名的情况下，可以使用af、bf、cf来区别命名 二、相对网页外层重要部分CSS样式命名 外套 wrap ------------------用于最外层 头部 header ----------------用于头部 主要内容

最近工作实在是繁忙，所以好久没有更新自己的博客了，实在是对不起各位读者。今天好不容易闲下来半天，所以和大家分享一下我之前总结的一套Web UI 设计命名规范，也就是网站用户界面设计(俗称网页设计)命名规范。 这套规范并非单纯的 CSS 、html或 JavaScript 命名规范，它涉及了很多使用PhotoShop这类设计工具进行网页设计过程中的命名规范。(好久没写文章了，有点罗嗦，吼吼~)。首先我是出于公司几位美工的设计效果图源文件没有对图层命名而开始考虑总结一套的，还有一个原因就是网上大多命名规范都是关于编码的，也就是那些css、html、js和一些服务器端语言的，至于设计方面的命名规范实在是很少。但是毕竟设计师也是技术团队的成员，而且前端开发工程师是要使用设计师的效果图源文件的，所以统一命名规范和设计规范对于团队的协作和工作效率肯定是有好处的。 这套WebUI设计命名规范总结自我的一些Web设计经验和国外设计师的命名方式推荐。 Web UI 设计命名规范 一.网站设计及基本框架结构: 1. Container “container“ 就是将页面中的所有元素包在一起的部分，这部分还可以命名为: “wrapper“, “wrap“, “page“. 2. Header “header” 是网站页面的头部区域，一般来讲，它包含网站的logo和一些其他元素。这部分还可以命名为:

最近工作实在是繁忙，所以好久没有更新自己的博客了，实在是对不起各位读者。今天好不容易闲下来半天，所以和大家分享一下我之前总结的一套Web UI 设计命名规范，也就是网站用户界面设计(俗称网页设计)命名规范。 这套规范并非单纯的 CSS 、html或 JavaScript 命名规范，它涉及了很多使用PhotoShop这类设计工具进行网页设计过程中的命名规范。(好久没写文章了，有点罗嗦，吼吼~)。首先我是出于公司几位美工的设计效果图源文件没有对图层命名而开始考虑总结一套的，还有一个原因就是网上大多命名规范都是关于编码的，也就是那些css、html、js和一些服务器端语言的，至于设计方面的命名规范实在是很少。但是毕竟设计师也是技术团队的成员，而且前端开发工程师是要使用设计师的效果图源文件的，所以统一命名规范和设计规范对于团队的协作和工作效率肯定是有好处的。 这套WebUI设计命名规范总结自我的一些Web设计经验和国外设计师的命名方式推荐。 Web UI 设计命名规范 一.网站设计及基本框架结构: 1. Container “container“ 就是将页面中的所有元素包在一起的部分，这部分还可以命名为: “wrapper“, “wrap“, “page“. 2. Header “header” 是网站页面的头部区域，一般来讲，它包含网站的logo和一些其他元素。这部分还可以命名为:

http://www.qingdou.me/2142.html 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等) CSS书写 规范 使用CSS缩写属性 CSS有些属性是可以缩写的，比如padding,margin,font等等，这样精简代码同时又能提高用户的阅读体验。 去掉小数点前的”0″ 简写命名 很多用户都喜欢简写类名，但前提是要让人看懂你的命名才能简写哦！ 16进制颜色代码缩写 有些颜色代码是可以缩写的，我们就尽量缩写吧，提高用户体验为主。 连字符CSS选择器命名规范 1.长名称或词组可以使用中横线来为选择器命名。 2.不建议使用”_”下划线来命名CSS选择器，为什么呢？ 输入的时候少按一个shift键； 浏览器兼容问题 （比如使用_tips的选择器命名，在IE6是无效的） 能良好区分JavaScript变量命名（JS变量命名是用”_”） 这里有一篇破折号与下划线的详细讨论，英文： 点击查看

一、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等) 二、CSS书写规范 1.使用CSS缩写属性 CSS有些属性是可以缩写的，比如padding,margin,font等等，这样精简代码同时又能提高用户的阅读体验。 2.去掉小数点前的“0” 3.简写命名 很多用户都喜欢简写类名，但前提是要让人看懂你的命名才能简写哦！ 4.16进制颜色代码缩写 有些颜色代码是可以缩写的，我们就尽量缩写吧，提高用户体验为主。 5连字符CSS选择器命名规范 1）.长名称或词组可以使用中横线来为选择器命名。 2）.不建议使用“_”下划线来命名CSS选择器，为什么呢？ 输入的时候少按一个shift键； 浏览器兼容问题 （比如使用_tips的选择器命名，在IE6是无效的） 能良好区分JavaScript变量命名（JS变量命名是用“_”） 6.不要随意使用id id在JS是唯一的，不能多次使用，而使用class类选择器却可以重复使用

我也是一个经历过柴米油盐酱醋茶、尝过酸甜苦辣咸的前端程序员。知道前端的东西入门简单，有深度却很难；表似好看无比的应用，其实背后逻辑复杂，然而要想成长的更快，一定要学会站在巨人的肩膀上，“学以师技以自长”。所以一些经验非常可贵，在此我想和大家分享一下我的经验。我是一个从jquery，zepto，到vue的比较常规的技术栈过渡过程。 本文涉及面包括：jquery处理模板的办法，高效处理json数据，如何有效命名，如何搭建合适的web服务，如何做出h合理炫酷的动画，vue组件处理的方式，同时覆盖如何使用github管理你的项目和文章 1、jQuery.js中的tmpl大法 在当初没有vue、react等mvvm框架的时候，这些都是非常牛逼使用的东西 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>jquery-tmpl</title> <script type="text/javascript" src="./jquery.min.js"></script> <script type="text/javascript" src="./jquery.tmpl.js"></script> </head> <style> .left-box { float: left; width: 50%; } .right-box