一、 规范目的： 为提高工作效率，便于后台人员添加功能及前端后期优化维护，输出高质量的文档，在 网站建设中，使结构更加清晰，代码简明有序，有一个更好的前端架构，有利于SEO优化。 二、 规范基本准则： 符合web标准，使用具有语义的标签，使结构、表现、行为分离，兼容性优良，页面性能优化，代码简洁、明了、有序，尽可能的减少服务器的负载，保证最快的解析速度。 ...
1、顺序 class 、id 、name 2、名称 字母加破折号、尽量短、以父类为前缀、js-前缀代表行为不写入css文件 class="btn btn-red js-cry" 3、 两个空格来代替制表符
视觉格式化模型 Visual Formatting Model URL：http://www.w3.org/TR/CSS2/visuren.html Translator: HaoyCn Date: 10th of Aug, 2015 本文并未全部翻译，译者在原文基础上稍有添加图示。如了解全部信息，请参看规范原版。个人水平有限，欢迎指正。 9.1 视觉格式化模型介绍 本章和下章用于描述视觉格式化模型：用户代理 User Agent如何在视觉媒体 Visual Media 下处理文档树 Document Tree。 视觉格式化模型中，文档...
8 盒模型 Box Model URL: http://www.w3.org/TR/CSS2/box.html Translator : HaoyCn Date: 15th of Aug, 2015 译者注：本译文仅择精要部分翻译了规范，主要描述了盒模型结构，以及重点分析外边距折叠。个人水平有限，欢迎指正！ CSS盒模型所描述的矩形盒由文档树内的元素生成，根据视觉格式化模型布局。 8.1 盒尺寸 Box Dimensions 每个盒都有一个内容区域 Content （如，文本，图片等）以及可选的围绕在周围的内边距...
1. CSS浏览器支持标准 WinXP Win7 OS X IE9 C C IE8 A A IE7 A A IE6 A A Chrome7 C C C Chrome6 A A A Chrome3 B B B Firefox4 C C C Firefox3.6 A A A Firefox3.5 C C Firefox3 C C ...
######语法- 两个空格代替制表符（tab）。- 为选择器分组时，将单独的的选择器单独放在一行- 声明块左花括号左边留一空格。- 声明块右花括号独占一行。- 声明语句后留一空格。- 每条声明独占一行??便与获得更准确的错误报告。- 所有声明语句都以分号结尾，包括最后一行。- 逗号分隔的属性值，逗号后插入一个空格。- 不要在rgb(),rgba(),hsla(),rect()值内部的逗号后加空格。- 属性值或颜色参数，省略小于1的小数前面的0.- 十六进制...
原文：http://www.w3.org/TR/CSS2/visudet.html 译者注：本文未全文翻译（最近要校招找工作，所以学习压力大，先挑重头，所以暂省略了最大最小宽度高度两部分）。文中部分内容和配图是我自己的理解，但没有一一标注。此外，文中有许多术语，我都有在后面注明原英文。最后要吐槽以下，vertical-align 属性在各浏览器中的兼容性真是跪了，如果读者有了解这个兼容性问题，请务必留言解惑！之后我也会抽空解决这个属性问题哒！ ...
这是一份旨在增强团队的开发协作，提高代码质量和打造开发基石的编码风格规范，其中包含了 html，css，javascript 和 jquery 这几个部分。我们知道，当一个团队开始指定并实行编码规范的话，错误就会变得更加显而易见。如果一段特定的代码不符合规范的话，它有可能只是代码风格错误，而也有可能会是 bug。早期指定规范就使得代码审核得以更好的开展，并且可以更精确的地定位到错误。只要开发者们能够保证源代码源文件都严格遵循规范...
* 约定： 以下事例代码中所用单位均为 rem ，关于 rem 单位的使用可参照 《移动端web app自适应布局探索与总结》 1 命名 1.1 文件命名 常用的文件命名： 全局：global.css 结构：layout.css 模块：module.css 主题: teemes.css 较长文件名必须以 - 中横杠符连接，项目里面的私有样式文件：项目名-业务模块名称.css。 例: /* 项目名为clout *//* good */clout-home.css/* bad */cloutHome.css; ...
单行形式书写风格的排版约束1. 每一条规则的大括号 { 前后加空格2. 多个selector共用一个样式集，则多个selector必须写成多行形式3. 每一条规则结束的大括号 } 前加空格4. 属性名冒号之前不加空格，冒号之后加空格5. 每一个属性值后必须添加分号; 并且分号后空格例如：div.test { width: 100px; height: 200px; }a:focus, a:hover { position: relative; right: 1px; }多行形式书写风格的排版约束1. 每一条规则的大括号...
1. 不同浏览器元素的默认属性有所不同，使用Reset可重置浏览器元素的一些默认属性，以达到浏览器的兼容。 /** 清除内外边距 **/ body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* structural elements 结构元素 */ dl, dt, dd, ul, ol, li, /* list elements 列表元素 */pre, /* text formatting elements 文本格式元素 */ form, fieldset, legend, button, input, textarea, /* form elements 表单元素 */ th, td, /* table ...
网站首页的色彩怎样搭配，有没有一些规范？ 回复讨论(解决方案) 看是什么网站了，一般的网站看起来要清爽，如果是某一类的网站你可以去看看相关网站的首页的颜色搭配，大概都是相近的
产品图标网格已经形成了一致的标准，且建立了一套明确的图形元素定位规则。这种标准化带来了灵活，而连贯的系统。 以上已经是全尺寸比例高宽网格图可以右击另存作为参考图使用 网格 关键线的形状 关键线的形状是网格的基础。利用这些核心形状做为向导，即可使整个相关产品的图标保持一致的视觉比例。 方形 高&宽: 152 圆形 直径: 176 竖直矩形 高:176 宽:128 ...
经常有朋友找袁程旭给其项目检测或更改某些模块功能，在查看其项目源码的时候，对那些毫无意义可言的 id（或class），还有那些不规范的CSS样式书写顺序，着实让人不理解到头疼。如果不是为了兼容各大浏览器而写的兼容性代码的话，CSS样式书写顺序一般不影响最终结果，但样式书写不规范的话对后期维护会造成很大困扰。看见了没，或许前端开发并没有你想象中那么随意。 当然值得抱歉的是，袁程旭没去找什么官方文档来严格规范书写...
相信写css的人都会遇到下面的问题： 糟糕，怎么命名这个class，好像不太贴切，要是冲突了怎么办，要不要设计成通用一点... 而改别人css代码的时候则会一直有个疑问：这个class到底是只在这个地方用了，还是其他地方都用了？ 于是就有了下面的做法： 最后终于被逼出了个class，简洁也好，中英混搭也罢，看着一头雾水也没关系，反正最后页面显示出来的。 这个class应该是只有这个地方用到，我可以放心写。上线之后...