前端规范整理( 二 ) _前端

mozilla官方属性顺序推荐
建议遵循以下顺序：（stylelint）

布局定位属性：display / position / float / clear / visibility / overflow
自身属性：width / height / margin / padding / border / background
文本属性：color / font / text-decoration / text-align / vertical-align / white- space / break-word
其他属性（CSS3）：content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient …

.jdc {display: block;position: relative;float: left;width: 100pxheight: 100px;margin: 0 10px;padding: 20px 0;font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;color: #333;background: rgba(0,0,0,.5);-webkit-border-radius: 10px;-moz-border-radius: 10px;-o-border-radius: 10px;-ms-border-radius: 10px;border-radius: 10px;}

-webkit-tap-highlight-color
在 IOS Safari 上，当用户点击链接或具有 JAVAScript 可点击脚本的元素，系统会为这些被点击元素加上一个默认的透明色值，该属性可以覆盖该透明值
-webkit-line-clamp

限制在一个块元素显示的文本的行数。为了实现该效果，它需要组合其他外来的WebKit属性常见结合属性：

display: -webkit-box：必须结合的属性，将对象作为弹性伸缩盒子模型显示。
-webkit-box-orient：必须结合的属性，设置或检索伸缩盒对象的子元素的排列方式。
text-overflow：可以用来多行文本的情况下，用省略号“…”隐藏超出范围的文本。

-webkit-user-modify

定义用户是否可编辑元素内容

属性值

ead-only：只读
read-write：可读可写，粘贴内容会保留富文本格式（ Android 机不保留富文本格式）
read-write-plaintext-only：可读可写，粘贴内容所有富文本格式都会丢失

注意：使用这个属性的时候，请不要出现 -webkit-user-select: none，文本无法选中的情况下，在 Safari 该属性不生效，不过在 Chrome 依然生效
-Apple-system
苹果操作系统会从两种不同外观和大小的字体进行自动转换去调节系统新字体 “San Francisco”，可以通过 CSS 规则
font-family: -apple-system , sans-serif;让系统智能选择适配操作系统的字体，添加 -apple-system 可以使字体变得更圆润锐利。
关于 -apple-system 更详细的介绍可以参考：
What’s New in Safari 9.0
兼容性

iOS 9.0 及更高版本
Safari 9.0 及更高版本
iOS / OS X only

命名规范目录命名

项目文件夹：projectname
样式文件夹：css
脚本文件夹：js
样式类图片文件夹：img

图片命名
图片业务（可选） +（mod_）图片功能类别（必选）+ 图片模块名称（可选） + 图片精度（可选）

图片业务：
- wx_：微信
- jd_：京东商城
- …
图片功能类别：
- mod_：是否公共，可选
- icon：模块类固化的图标
- logo：LOGO类
- spr：单页面各种元素合并集合
- btn：按钮
- bg：可平铺或者大背景
- …
图片模块名称：
- goodslist：商品列表
- goodsinfo：商品信息
- userava tar：用户头像
- …
图片精度：
- 普清：@1x
- Retina：@2x | @3x
- …

HTML/CSS文件命名
确保文件命名总是以字母开头而不是数字，且字母一律小写，以下划线连接且不带其他标点符号
目前html还是保留驼峰写法。
jdc.htmljdc_list.htmljdc_detail.html jdc.scssjdc_list.scssjdc_detail.scssClassName命名
ClassName的命名应该尽量精短、明确，必须以字母开头命名，且全部字母为小写，单词之间统一使用下划线 “_” 连接
祖先模块不能出现下划线，除了是全站公用模块，如 mod_ 系列的命名：
当子孙模块超过4级或以上的时候，可以考虑在祖先模块内具有识辨性的独立缩写作为新的子孙模块