css命名规范

前文 css包含许多东西，自己也知道在css方面基础不够扎实，本周的学习我计划从几个我自认为不足的方面进行学习，在css的基本语法方面我就不进行过多的学习了。然后在学习中的例子，保证自己亲手把代码打出来，不要只是复制粘贴，希望以此能记得牢一些。 CSS的命名与书写规范 我觉得在写网页的时候，书写规范是十分重要的，既能保证自己的清晰思路，也能让别人更好的看懂你的代码。但我对这方面也没重视过，当回去看自己原来的代码时，才发现有多么的头疼。所以自己总结了一下： css类在命名的时 大专栏 CSS的基础学习1 -命名与书写规范 候应该全用小写加中划线“-” 的方式，并分清父类与子类，让层次更加清晰 尽量用英文来概括你这一部分代码样式的含义，也有利于多学几个英文单词 然后避免class与id的重名，在js中id的命名十分重要，如果与class重名以后其实本身不会发生什么问题，主要怕搞混 CSS书写先后顺序 位置属性: display position top、right、bottom、left(顺时针) float clear z-index … 盒模型: margin padding width height … 文字等排版: color font content border background 来源： https://www.cnblogs.com/liuzhongrong/p

为新项目写的一份规范文档, 分享给大家. 我想前端开发过程中, 无论是团队开发, 还是单兵做站, 有一份开发文档做规范, 对开发工作都是很有益的. 本文档由本人编写, 部分意见来源于网络, 以此感谢, 片面及有误的地方, 希望大家指正. 另, 本文档部分规范是为我所在项目组所写, 使用时请根据实际项目需求修改. 以下为[WEB前端开发规范文档]正文 点此查看WEB版本 规范目的 为提高团队协作效率, 便于后台人员添加功能及前端后期优化维护, 输出高质量的文档, 特制订此文档. 本规范文档一经确认, 前端开发人员必须按本文档规范进行前台页面开发. 本文档如有不对或者不合适的地方请及时提出, 经讨论决定后方可更改. 基本准则 符合web标准, 语义化html, 结构表现行为分离, 兼容性优良. 页面性能方面, 代码要求简洁明了有序, 尽可能的减小服务器负载, 保证最快的解析速度. 文件规范 1. html, css, js, images文件均归档至<系统开发规范>约定的目录中; 2. html文件命名: 英文命名, 后缀.htm. 同时将对应界面稿放于同目录中, 若界面稿命名为中文, 请重命名与html文件同名, 以方便后端添加功能时查找对应页面; 3. css文件命名: 英文命名, 后缀.css. 共用base.css, 首页index.css, 其他页面依实际模块需求命名.; 4

一、命名规范 使用有意义的或通用的ID和class命名：ID和class的命名应反映该元素的功能或使用通用名称，而不要用抽象的晦涩的命名。反映元素的使用目的是首选；使用通用名称代表该元素不表特定意义，与其同级元素无异，通常是用于辅助命名；使用功能性或通用的名称可以更适用于文档或模版变化的情况。 /* 不推荐: 无意义 */ #yee-1901 {} /* 不推荐: 与样式相关 */ .button-green {}.clear {} /* 推荐: 特殊性 */ #gallery {}#login {}.video {} /* 推荐: 通用性 */ .aux {}.alt {} 常 用命名（多记多查英文单词）：page、wrap、layout、header(head)、footer(foot、ft)、 content(cont)、menu、nav、main、submain、sidebar(side)、logo、banner、 title(tit)、popo(pop)、icon、note、btn、txt、iblock、window(win)、tips等 ID和class命名越简短越好，只要足够表达涵义。这样既有助于理解，也能提高代码效率。 /* 不推荐 */ #navigation {}.atr {} /* 推荐 */ #nav {}.author {} 类型选择器避免同时使用标签

相对网页外层重要部分CSS样式命名： 外套 wrap ------------------用于最外层 头部 header ----------------用于头部 主要内容 main ------------用于主体内容（中部） 左侧 main-left -------------左侧布局 右侧 main-right -----------右侧布局 导航条 nav -----------------网页菜单导航条 内容 content ---------------用于网页中部主体 底部 footer -----------------用于底部 网页公共命名 #wrapper 页面外围控制整体布局宽度 #container或#content 容器,用于最外层 #layout 布局 #head, #header 页头部分 #foot, #footer 页脚部分 #nav 主导航 #subnav 二级导航 #menu 菜单 #submenu 子菜单 #sideBar 侧栏 #sidebar_a, #sidebar_b 左边栏或右边栏 #main 页面主体 #tag 标签 #msg #message 提示信息 #tips 小技巧 #vote 投票 #friendlink 友情连接 #title 标题 #summary 摘要 #loginbar 登录条 #searchInput 搜索输入框

Web前端作为开发团队中不可或缺的一部分，需要按照相关规定进行合理编写（一部分不良习惯可能给自己和他人造成不必要的麻烦）。不同公司不同团队具有不同的规范和文档。下面是根据不同企业和团队的要求进行全面详细的整理结果。备注：实际开发请以本公司的规范为标准。 A.基本原则 符合web标准（UTF-8，HTML5），语义化html（HTML5新增要求，减少div和span等无特定语义的标签使用），结构表现行为分离（HTML-CSS-JS代码分离，不同行为代码高内聚低耦合），兼容性优良（早期版本浏览器兼容，移动端和PC端设备兼容）.页面性能方面（减少请求次数，例如使用精灵图和sass语法），代码要求简洁明了有序，尽可能的减小服务器负载，保证最快的解析速度（减小repaint和reflow）. B.文件命名规范 1、html，css，js，lib，images文件均存放至项目的目录中。如果使用相关前端框架，根据框架的文件格式进行合理布局。 2、所有文件夹及文件使用英文命名（避免使用中文路径）。 3、html文件：入口文件使用index.html。如果有对应的设计组设计原稿，需要将对应的设计稿和html文件命名一致并合理存放。 4、css文件命名：后缀.css。通用initial.css，初始化base.css，首页index.css，其他页面按照对应的html命名。 5、Js文件命名：英文命名

一、什么是BEM？ 　　BEM代表块（Block），元素（Element），修饰符（Modifier）。无论是什么网站页面，都可以拆解成这三部分。 二、带你认识网页 　　我们来看一下qq的官网，它可以由三个块组成：logo，导航nav和页面主题mian三个模块构成，如果再细分一下呢？logo是由图片和文字两个元素组成，导航由三个元素组成，页面主题中包含图片，文字和按钮三个元素， 如果把一个块看作是一个数组的话，那么元素就是数组中的每一项。 　　什么是修饰符呢？你可以看作是元素的属性，或者是他的形态、状态，比如导航中的三个元素有的长，有的短，页面主体文字有的大，有的小 三、BEM命名如何书写 　　BEM给我们的规定是块和元素之间用 — 连接，元素和修饰符之间用 _ 连接。例如：我们要设置表格某一行的背景颜色为红色，我们可以如下命名 四、实战篇 　　下面，我们来用bem的命名规范来写一下qq的官网 　　<header> <div class="logo"> <img class="logo-img" src="./logo.png" alt=""> <span class="logo-words_big">QQ·</span> <span class="logo-word_small">PC版</span> </div> <ul class="nav"> <li class="nav

在工作当中css样式是非常重要的，但是咋样书写css样式更重要。 一、css书写规范 1、定位属性：position display float left top right bottom overflow clear z-index 2、自身属性：width height padding border margin background 3、文字样式：font-family font-size font-style font-weight font-varient color 4、文本属性：text-align vertical-align text-wrap text-transform text-indent text-decoration letter-spacing word-spacing white-space text-overflow 5、css3中新增属性：content box-shadow border-radius transform…… 按照上述1 2 3 4 5的顺序进行书写。 二、css书写规范 1.使用CSS缩写属性 CSS有些属性是可以缩写的，比如padding,margin,font等等，这样精简代码同时又能提高用户的阅读体验 2.去掉小数点前的“0” 3.简写命名 很多用户都喜欢简写类名，但前提是要让人看懂你的命名才能简写哦！ 4

原文： http://kb.cnblogs.com/page/179593/ 项目代码风格要求 PDF版下载： 项目代码风格要求V1.0.pdf 代码风格没有正确与否，重要的是整齐划一，这是我拟的一份《项目代码风格要求》，供大家参考。 给大家再推荐一篇文章 ： 来自编程之家的 C#命名开发规范 1. C# 代码风格要求 1.1注释 类型、属性、事件、方法、方法参数，根据需要添加注释。 如果类型、属性、事件、方法、方法参数的名称已经是自解释了，则不需要加注释；否则必须添加注释。 当添加注释时，添加方式如下图所示： 1.2 类型（类、结构、委托、接口）、字段、属性、方法、事件的命名 优先考虑英文，如果英文没有合适的单词描述，可以使用拼音，使用中文是不符合要求的。 唯一可以使用中文的地方是枚举的枚举项，枚举项实际已经不属于本节标题的范畴了。这里只是放到一起说明，如下图所示： 1.3 不使用缩写 所有类型、方法、参数、变量的命名不得使用缩写，包括大家熟知的缩写，例如msg。 1.4 代码使用半展开 第一步，打开Visual Studio，进入“工具”，“选项...”，如下图所示： 第二步，进入“文本编辑器”，“C#”，“格式设置”，“新行”，取消掉右侧所有复选框中的对号，如下图所示： 第三步，点击“确定”，完成设置。 1.5 使用Tab作为缩进，并设置缩进大小为4 第一步，打开Visual

1. C# 代码风格要求 1.1注释 类型、属性、事件、方法、方法参数， 根据需要 添加注释。 如果类型、属性、事件、方法、方法参数的名称已经是自解释了， 不需要 加注释；否则需要添加注释。 当添加注释时，添加方式如下图所示： 1.2 类型（类、结构、委托、接口）、字段、属性、方法、事件的命名 优先考虑英文，如果英文没有合适的单词描述，可以使用拼音，使用中文是不符合要求的。 唯一可以使用中文的地方是枚举的枚举项，枚举项实际已经不属于本节标题的范畴了。这里只是放到一起说明，如下图所示： 1.3 不使用缩写 所有类型、方法、参数、变量的命名不得使用缩写，包括大家熟知的缩写，例如msg。 1.4 代码使用半展开 第一步，打开Visual Studio，进入“工具”，“选项...”，如下图所示： 第二步，进入“文本编辑器”，“C#”，“格式设置”，“新行”，取消掉右侧所有复选框中的对号，如下图所示： 第三步，点击“确定”，完成设置。 1.5 使用Tab作为缩进，并设置缩进大小为4 第一步，打开Visual Studio，进入“工具”，“选项...”，如下图所示： 第二步，进入“文本编辑器”，“C#”，“制表符”，如下图所示，设置制表符。 第三步，点击“确定”，完成设置。 1.6 一个.cs源文件至多定义两个类型 如果两个类型的关系是紧密相关的，比如 产品、产品类型，此时Product类

最近没啥时间自己状态也不是很好，公司的事情忙，自己也有一些事情要处理，所以好久没有写博客了。利用公司午休时间写一写，以下是参考了一些资料，整理出来，共勉之。 代码风格没有正确与否，重要的是整齐划一，清晰易读。 1. C# 代码风格要求 1.1注释 类型、属性、事件、方法、方法参数， 根据需要 添加注释。 如果类型、属性、事件、方法、方法参数的名称已经是自解释了， 不需要 加注释；否则需要添加注释。 当添加注释时，添加方式如下图所示： 1.2 类型（类、结构、委托、接口）、字段、属性、方法、事件的命名 优先考虑英文，如果英文没有合适的单词描述，可以使用拼音，使用中文是不符合要求的。 唯一可以使用中文的地方是枚举的枚举项，枚举项实际已经不属于本节标题的范畴了。这里只是放到一起说明，如下图所示： 1.3 不使用缩写 所有类型、方法、参数、变量的命名不得使用缩写，包括大家熟知的缩写，例如msg。 1.4 代码使用半展开 第一步，打开Visual Studio，进入“工具”，“选项...”，如下图所示： 第二步，进入“文本编辑器”，“C#”，“格式设置”，“新行”，取消掉右侧所有复选框中的对号，如下图所示： 第三步，点击“确定”，完成设置。 1.5 使用Tab作为缩进，并设置缩进大小为4 第一步，打开Visual Studio，进入“工具”，“选项...”，如下图所示： 第二步，进入