分享各种网络资源
是我乃至整个互联网的精髓所在
最新公告:
  • 开启被动注册模式,详情点击这里,同时接小单,QQ:330733312
  • 目前站点正在不断折腾和调试中,如有问题请见谅
     您目前所在位置: 站点首页 » 移动互联 » 学习之路 » 推荐大家使用的CSS书写规范、顺序
  • 推荐大家使用的CSS书写规范、顺序

  • CSS书写顺序
  • CSS书写规范
  • 使用CSS缩写属性
  • 去掉小数点前的“0”
  • 简写命名
  • 16进制颜色代码缩写
  • 连字符CSS选择器命名规范
  • 不要随意使用Id
  • CSS命名规范(规则)
  • 常用的CSS命名规则
  • 注释的写法:
  • Id的命名:
  • 注意事项::
  • CSS样式表文件命名
  • 总结
  • 看了这篇文章之后,我才知道,之前书写 CSS 的方式都是不正确的,那么这里我就转载了一篇比较有用的文章给大家,希望能帮助到正在学习 CSS 用户吧。

    写了这么久的CSS,但大部分前端er都没有按照良好的CSS书写规范来写CSS代码,这样会影响代码的阅读体验,这里设计达人网总结一个CSS书写规范、CSS书写顺序供大家参考,这些是参考了国外一些文章以及我的个人经验总结出来,我想对写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等)

    推荐大家使用的CSS书写规范、顺序-BanYuner

    CSS书写规范

    使用CSS缩写属性

    CSS有些属性是可以缩写的,比如padding,margin,font等等,这样精简代码同时又能提高用户的阅读体验。
    推荐大家使用的CSS书写规范、顺序-BanYuner

    去掉小数点前的“0”

    推荐大家使用的CSS书写规范、顺序-BanYuner

    简写命名

    很多用户都喜欢简写类名,但前提是要让人看懂你的命名才能简写哦!
    推荐大家使用的CSS书写规范、顺序-BanYuner

    16进制颜色代码缩写

    有些颜色代码是可以缩写的,我们就尽量缩写吧,提高用户体验为主。
    推荐大家使用的CSS书写规范、顺序-BanYuner

    连字符CSS选择器命名规范

    1.长名称或词组可以使用中横线来为选择器命名。

    2.不建议使用“_”下划线来命名CSS选择器,为什么呢?

    • 输入的时候少按一个shift键;
    • 浏览器兼容问题 (比如使用_tips的选择器命名,在IE6是无效的)
    • 能良好区分JavaScript变量命名(JS变量命名是用“_”)

    推荐大家使用的CSS书写规范、顺序-BanYuner

    不要随意使用Id

    id在JS是唯一的,不能多次使用,而使用class类选择器却可以重复使用,另外id的优先级优先与class,所以id应该按需使用,而不能滥用。
    推荐大家使用的CSS书写规范、顺序-BanYuner

    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 代码都是使用的下划线分割的,这个我之前根本没有意识到,其次就是 CLASS 命名方式的不正确,我表示这方面我从来没有学习也没有去了解过,但是我相信现在改应该还是来得及的。

    关注我们 打赏 分享此文

    微信扫码,关注我们

    扫码,支持我

    推荐大家使用的CSS书写规范、顺序

    支付宝(点击图片切换)

    扫码,支持我

    推荐大家使用的CSS书写规范、顺序

    微信(点击图片切换)

    扫码,手机看

    推荐大家使用的CSS书写规范、顺序
    匿名

    个人评价:┃草根博主┃站点无技术含量┃文章内容不够吸引人┃转载内容随处可见┃资源均来自网络┃分享是我的宗旨,也是这个站点存在意义,分享的东西你现在可能不需要,但是我相信只要在某个时间你需要的时候能在这里找到,那么我就是成功的

    推荐大家使用的CSS书写规范、顺序
    3 + 3 =
    1. 4楼
      衣皇后
      最后评论时间:2017/09/14 20:46
      这家伙可能用了美佬的代理 搜狗浏览器 Windows 7 香港 阿里云香港数据中心
      对你爱爱爱不完,我可以天天月月年年看你博客到永远!
      衣皇后 1个月前 (09-14)回复
    2. 3楼
      明月学习笔记Blog
      最后评论时间:2017/04/04 22:12
      来自天朝的朋友 谷歌浏览器 Windows 10 河南省南阳市 电信
      这是QQ浏览器手机版下的!
      明月学习笔记Blog 7个月前 (04-04)回复
    3. 2楼
      明月登楼学习Blog
      最后评论时间:2017/09/29 16:51
      来自天朝的朋友 QQ浏览器 Android 6.0.1 MI 4LTE Build/MMB29M 河南省南阳市 电信
      携我的Tyoecho博客过来支持一下!我也是喜欢这个图片延迟载入的特效!
      • 帅气小琦琦
        最后评论时间:2017/10/20 15:02
        来自天朝的朋友 WordPress for iOS iPhone & iPad 湖北省武汉市 联通
        @明月登楼学习Blog 哈哈,去过你的博客了,你也是折腾,居然弄两个类型的博客
        帅气小琦琦    16小时前回复
        • 明月登楼学习Blog
          最后评论时间:2017/09/29 16:51
          来自天朝的朋友 QQ浏览器 Android 6.0.1 MI 4LTE Build/MMB29M 河南省南阳市 电信
          @帅气小琦琦 呵呵,生命不止,折腾不息嘛我发现你的回顶按钮挡着手机端评论的回复和提交了!
          • 帅气小琦琦
            最后评论时间:2017/10/20 15:02
            来自天朝的朋友 WordPress for iOS iPhone & iPad 湖北省武汉市 联通
            @明月登楼学习Blog 应该不会吧,点击了输入内容框之后,这个应该会隐藏了吧
            帅气小琦琦    16小时前回复
            • 明月学习笔记Blog
              最后评论时间:2017/04/04 22:12
              来自天朝的朋友 谷歌浏览器 Windows 10 河南省南阳市 电信
              @帅气小琦琦 没有隐藏,无论是小米原生浏览器还是UC里都没有隐藏的!
              明月学习笔记Blog 7个月前 (04-04)回复
    4. 1楼
      明月登楼
      最后评论时间:2017/09/29 16:51
      来自天朝的朋友 QQ浏览器 Android 6.0.1 MI 4LTE Build/MMB29M 河南省南阳市 电信
      博主,你这个图片延迟载入真的好酷呀,求分享!
      明月登楼 3周前 (09-29)回复
      • 帅气小琦琦
        最后评论时间:2017/10/20 15:02
        来自天朝的朋友 WordPress for iOS iPhone & iPad 湖北省武汉市 联通
        @明月登楼 延迟加载就是lazyload哦 只不过配合了animate而已
        帅气小琦琦    16小时前回复