• css编写规范最佳实践


    最初,在编写CSS的时候,我们往往想到哪儿就写到哪儿,它们之间的关联性和有序性并不在考虑之中。但随着代码量的增加,亦或是多人共同开发,CSS的编写规范变得重要起来了。本文通过三个方面,总结出CSS编写的最佳实践。一来强制自己按照规范编写CSS,二来可以推广到团队使用。

    层级规范(从高到低)

    • Popout
    • Mask
    • Navigation
    • Content

    书写规范

    • 小写、英文
    • tab四个空格缩进
    • 以'-'短横杠连接名词
    • 为选择器添加状态前缀(.is-xxx)
    • 关于空格的使用
      • 选择器与{之间有空格
      • 属性名后要有空格
    • 关于选择器
      • 每个选择器占一行
      • 不要随意使用id选择器,id的优先级高于class
    • 关于样式
      • 链接的样式a:link->a:visited->a:hover->a:active
      • 去掉小数点之前的0
      • 统一0后面就不要加单位啦

    书写顺序

    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样式表文件命名

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

  • 相关阅读:
    Android的数据存储
    Servlet第一天
    JavaScript高级程序设计读书笔记(3)
    Interesting Papers on Face Recognition
    Researchers Study Ear Biometrics
    IIS 发生意外错误 0x8ffe2740
    Father of fractal geometry, Benoit Mandelbrot has passed away
    Computer vision scientist David Mumford wins National Medal of Science
    Pattern Recognition Review Papers
    盒模型bug的解决方法
  • 原文地址:https://www.cnblogs.com/fayin/p/6610744.html
Copyright © 2020-2023  润新知