• CSS命名以及书写规则总结


    公司里面采用的是less动态编译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等)
     1 属性缩写
     2 去掉小数点前的0
     3 16进制颜色代码缩写
     4 
     5 连字符CSS选择器命名规范
     6   长名称或词组可以使用中横线来为选择器命名。
     7   不建议使用“_”下划线来命名CSS选择器,为什么呢?
     8   
     9   浏览器兼容问题 (比如使用_tips的选择器命名,在IE6是无效的)
    10   能良好区分JavaScript变量命名(JS变量命名是用“_”)
    11 
    12 不要随意使用Id
    13   id在JS是唯一的,不能多次使用,而使用class类选择器却可以重复使用,另外id的优先级优先与class,所以id应该按需使用,而不能滥用。
    14 
    15 为选择器添加状态前缀
    16   有时候可以给选择器添加一个表示状态的前缀,让语义更明了.
      1   头:header
      2   内容:content/container
      3   尾:footer
      4   导航:nav
      5   侧栏:sidebar
      6   栏目:column
      7   页面外围控制整体佈局宽度:wrapper
      8   左右中:left right center
      9   登录条:loginbar
     10   标志:logo
     11   广告:banner
     12   页面主体:main
     13   热点:hot
     14   新闻:news
     15   下载:download
     16   子导航:subnav
     17   菜单:menu
     18   子菜单:submenu
     19   搜索:search
     20   友情链接:friendlink
     21   页脚:footer
     22   版权:copyright
     23   滚动:scroll
     24   内容:content
     25   标签:tags
     26   文章列表:list
     27   提示信息:msg
     28   小技巧:tips
     29   栏目标题:title
     30   加入:joinus
     31   指南:guide
     32   服务:service
     33   注册:regsiter
     34   状态:status
     35   投票:vote
     36   合作伙伴:partner
     37 注释的写法:
     38   /* Header */
     39   内容区
     40   /* End Header */
     41 Id的命名:
     42   1)页面结构
     43   容器: container
     44   页头:header
     45   内容:content/container
     46   页面主体:main
     47   页尾:footer
     48   导航:nav
     49   侧栏:sidebar
     50   栏目:column
     51   页面外围控制整体佈局宽度:wrapper
     52   左右中:left right center
     53 (2)导航
     54   导航:nav
     55   主导航:mainnav
     56   子导航:subnav
     57   顶导航:topnav
     58   边导航:sidebar
     59   左导航:leftsidebar
     60   右导航:rightsidebar
     61   菜单:menu
     62   子菜单:submenu
     63   标题: title
     64   摘要: summary
     65 (3)功能
     66   标志:logo
     67   广告:banner
     68   登陆:login
     69   登录条:loginbar
     70   注册:register
     71   搜索:search
     72   功能区:shop
     73   标题:title
     74   加入:joinus
     75   状态:status
     76   按钮:btn
     77   滚动:scroll
     78   标籤页:tab
     79   文章列表:list
     80   提示信息:msg
     81   当前的: current
     82   小技巧:tips
     83   图标: icon
     84   注释:note
     85   指南:guild
     86   服务:service
     87   热点:hot
     88   新闻:news
     89   下载:download
     90   投票:vote
     91   合作伙伴:partner
     92   友情链接:link
     93   版权:copyright
     94 注意事项::
     95   1.一律小写;
     96   2.尽量用英文;
     97   3.不加中槓和下划线;
     98   4.尽量不缩写,除非一看就明白的单词。
     99 CSS样式表文件命名
    100   主要的 master.css
    101   模块 module.css
    102   基本共用 base.css
    103   布局、版面 layout.css
    104   主题 themes.css
    105   专栏 columns.css
    106   文字 font.css
    107   表单 forms.css
    108   补丁 mend.css
    109   打印 print.css
  • 相关阅读:
    会声会影教程之图片音乐相册制作
    js校验表单后提交表单的三种方法总结(转)
    如何避免后台IO高负载造成的长时间JVM GC停顿(转)
    nginx的upstream目前支持5种方式的分配(转)
    Nginx配置文件详细说明(转)
    如何将character_set_database latin1 改为 gbk(转)
    Maven打包可执行Jar包方式
    六种微服务架构的设计模式(转)
    Linux Shell 命令
    Condition的await-signal流程详解(转)
  • 原文地址:https://www.cnblogs.com/sumbud/p/5785345.html
Copyright © 2020-2023  润新知