1. 样式属性顺序

单个样式规则下的属性在书写时,应按功能进行分组,组之间需要有一个空行。
同时要以Positioning Model > Box Model > Typographic > Visual 的顺序书写,提高代码的可读性。

  1. Positioning Model 布局方式、位置,相关属性包括:position, top, z-index, display, float等
  2. Box Model 盒模型,相关属性包括:width, height, padding, margin,border,overflow
  3. Typographic 文本排版,相关属性包括:font, line-height, text-align
  4. Visual 视觉外观,相关属性包括:color, background, list-style, transform, animation

2. CSS选择器命名规则

  • 分类式命名法(在前端组件化下尤为重要)
  1. 布局(grid)(.g-):将页面分割为几个大块,通常有头部、主体、主栏、侧栏、尾部等!
  2. 模块(module)(.m-):通常是一个语义化的可以重复使用的较大的整体!比如导航、登录、注册等
  3. 元件(unit)(.u-):通常是一个不可再分的较为小巧的个体,通常被重复用于各种模块中!比如按钮、输 入框、loading等!
  4. 功能(function)(.f-):为方便一些常用样式的使用,我们将这些使用率较高的样式剥离出来,按需使用,通常这些选择器具有固定样式表现,比如清除浮动等!不可滥用!
  5. 状态(.z-):为状态类样式加入前缀,统一标识,方便识别,她只能组合使用或作为后代出现(.u-ipt.z-dis{},.m-list li.z-sel{})
  6. javascript(.j-):.j-将被专用于JS获取节点,请勿使用.j-定义样式
  • 不要使用 ” _ ” 下划线来命名css
    能良好的区分javascript变量名
    输入的时候少按一个shift键
    浏览器兼容性问题(比如使用_tips的选择器命名,在IE6是无效的)
  • id采用驼峰式命名(不要乱用id)
  • scss中的变量、函数、混合、placeholder采用驼峰式命名
  • 相同语义的不同类命名方法:
    直接加数字或字母区分即可(如:.m-list、.m-list2、.m-list3等,都是列表模块,但是是完全不一样的模块)。其他举例:.f-fw0、.f-fw1、.s-fc0、.s-fc1、.m-logo2、.m-logo3、u-btn、u-btn2等等。
  • 命名方式(BEM):类-体(例:g-head)、类-体-修饰符(例:u-btn-active)
  • 后代选择器:体-修饰符即可(例:.m-page .cut{})注:后代选择器不要在页面布局中使用,因为污染的可能性较大;

3. 最佳写法

/* 这是某个模块 */
    .m-nav{}/* 模块容器 */
    .m-nav li,.m-nav a{}/* 先共性  优化组合 */
    .m-nav li{}/* 后个性  语义化标签选择器 */
    .m-nav a{}/* 后个性中的共性 按结构顺序 */
    .m-nav a.a1{}/* 后个性中的个性 */
    .m-nav a.a2{}/* 后个性中的个性 */
    .m-nav .z-crt a{}/* 交互状态变化 */
    .m-nav .z-crt a.a1{}
    .m-nav .z-crt a.a2{}
    .m-nav .btn{}/* 典型后代选择器 */
    .m-nav .btn-1{}/* 典型后代选择器扩展 */
    .m-nav .btn-dis{}/* 典型后代选择器扩展(状态) */
    .m-nav .btn.z-dis{}/* 作用同上,请二选一(如果可以不兼容IE6时使用) */
    .m-nav .m-sch{}/* 控制内部其他模块位置 */
    .m-nav .u-sel{}/* 控制内部其他元件位置 */
    .m-nav-1{}/* 模块扩展 */
    .m-nav-1 li{}
    .m-nav-dis{}/* 模块扩展(状态) */
    .m-nav.z-dis{}/* 作用同上,请二选一(如果可以不兼容IE6时使用) */

4. 统一语义理解和命名

  • 布局(.g-)
  • 模块(.m-)、元件(.u-)
  • 功能(.f-)
  • 皮肤(.s-)
  • 状态(.z-)

5. 注意事项

  1. 一律小写,中划线
  2. 尽量不用缩写
  3. 不要随便使用id
  4. 去掉小数点前面的0: 0.9rem => .9rem
  5. 使用简写:margin: 0 1rem 3rem



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变量命名是用“_”)



  不要随意使用Id
  id在JS是唯一的,不能多次使用,而使用class类选择器却可以重复使用,另外id的优先级优先与class,所以id应该按需使用,而不能滥用。 


  为选择器添加状态前缀
  有时候可以给选择器添加一个表示状态的前缀,让语义更明了,比如下图是添加了“.is-”前缀。


扫一扫 分享收藏

ANALYSIS |  VISITED MAP |  GENERATOR

Copyright © 2022 shaowenhao.com,All Rights Reserved.

Designed & Powered By shaowenhao.com

admin@shaowenhao.com

辽ICP备15001991号-1