css 书写顺序、命名规则的指南

2015-6-4 / 8 评论 PHP / Mrxn

本文共计 3751 字,感谢您的耐心浏览与评论.

这里总结了一些国外一些文章以及我的个人经验总结出来,我想对写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等)

img.png

CSS书写规范

使用CSS缩写属性

CSS有些属性是可以缩写的,比如padding,margin,font等等,这样精简代码同时又能提高用户的阅读体验。

img.png

去掉小数点前的“0”

img.png

简写命名

很多用户都喜欢简写类名,但前提是要让人看懂你的命名才能简写哦!

img.png

16进制颜色代码缩写

有些颜色代码是可以缩写的,我们就尽量缩写吧,提高用户体验为主。

img.png

连字符CSS选择器命名规范

  1. 长名称或词组可以使用中横线来为选择器命名。
  2. 不建议使用“_”下划线来命名CSS选择器,为什么呢?
    • 输入的时候少按一个shift键;
    • 浏览器兼容问题 (比如使用_tips的选择器命名,在IE6是无效的)
    • 能良好区分JavaScript变量命名(JS变量命名是用“_”)
    • 这里有一篇破折号与下划线的详细讨论,英文::f点击查看 中文篇:f点击查看

      img.png

      不要随意使用Id

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

      img.png

      为选择器添加状态前缀

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

      img.png

      CSS命名规范(规则)

      常用的CSS命名规则

      • 头:header
      • 内容:content/container
      • 尾:footer
      • 导航:nav
      • 侧栏:sidebar
      • 栏目:column
      • 页面外围控制整体佈局宽度:wrapper
      • 左右中:left right center
      • 登录条:loginbar
      • 标志:logo
      • 广告:banner
      • 页面主体:main
      • 热点:hot
      • 新闻:news
      • 下载:download
      • 子导航:subnav
      • 菜单:menu
      • 子菜单:submenu
      • 搜索:search
      • 友情链接:friendlink
      • 页脚:footer
      • 版权:copyright
      • 滚动:scroll
      • 内容:content
      • 标签:tags
      • 文章列表:list
      • 提示信息:msg
      • 小技巧:tips
      • 栏目标题:title
      • 加入:joinus
      • 指南:guide
      • 服务:service
      • 注册:regsiter
      • 状态:status
      • 投票:vote
      • 合作伙伴:partner

      注释的写法:

      /* Header */ 内容区 /* End Header */

      Id的命名:

      1)页面结构

      • 容器: container
      • 页头:header
      • 内容:content/container
      • 页面主体:main
      • 页尾:footer
      • 导航:nav
      • 侧栏:sidebar
      • 栏目:column
      • 页面外围控制整体佈局宽度:wrapper
      • 左右中:left right center

      (2)导航

      • 导航:nav
      • 主导航:mainnav
      • 子导航:subnav
      • 顶导航:topnav
      • 边导航:sidebar
      • 左导航:leftsidebar
      • 右导航:rightsidebar
      • 菜单:menu
      • 子菜单:submenu
      • 标题: title
      • 摘要: summary

      (3)功能

      • 标志:logo
      • 广告:banner
      • 登陆:login
      • 登录条:loginbar
      • 注册:register
      • 搜索:search
      • 功能区:shop
      • 标题:title
      • 加入:joinus
      • 状态:status
      • 按钮:btn
      • 滚动:scroll
      • 标籤页:tab
      • 文章列表:list
      • 提示信息:msg
      • 当前的: current
      • 小技巧:tips
      • 图标: icon
      • 注释:note
      • 指南:guild
      • 服务:service
      • 热点:hot
      • 新闻:news
      • 下载:download
      • 投票:vote
      • 合作伙伴:partner
      • 友情链接:link
      • 版权:copyright

      注意事项::

      • 1.一律小写;
      • 2.尽量用英文;
      • 3.不加中槓和下划线;
      • 4.尽量不缩写,除非一看就明白的单词。

      CSS样式表文件命名

      • 主要的 master.css
      • 模块 module.css
      • 基本共用 base.css
      • 布局、版面 layout.css
      • 主题 themes.css
      • 专栏 columns.css
      • 文字 font.css
      • 表单 forms.css
      • 补丁 mend.css
      • 打印 print.css


标签: 编程 代码 css

转载:转载请注明原文链接 - css 书写顺序、命名规则的指南


8条回应:“css 书写顺序、命名规则的指南”

  1. 需要用的时候翻译一下就可以了

  2. 嗯嗯   凡凡之呗来看看一下   认真收藏   很不错哦   加油

  3. 受用,真心的那种


发表评论

{view_code_no}