zoukankan      html  css  js  c++  java
  • BEM命名规则和规范

    BEM命名规则:http://segmentfault.com/a/1190000000391762
    class命名方案:http://www.w3cplus.com/css/css-class-name.html
    常用的CSS命名规范:http://www.html5cn.org/article-7600-1.html
    通用CSS笔记、建议与指导:https://github.com/chadluo/CSS-Guidelines/blob/master/README.md
    CSS代码重构和优化之路:http://luopq.com/2016/01/05/css-optimize/
    CSS进阶:http://caibaojian.com/toutiao/6098
     

    切勿将标记 CSS 样式的 class 用作 JavaScript 钩子。把js行为与样式混在一起将无法对其分别处理。

    如果你要把js和某些标记绑定起来的话,写一个js专用的 class。简单地说就是划定一个前缀 .js- 的命名空间,例如 .js-toggle,.js-drag-and-drop。这意味着我们可以通过 class 同时绑定 JS 和 CSS 而不会因为冲突而引发麻烦。

    如:<div class="is-sortable js-is-sortable"></div>

    命名约定的模式如下:

    .block{}

    .block__element{}

    .block--modifier{}

    .block 代表了更高级别的抽象或组件。

    .block__element 代表.block的后代,用于形成一个完整的.block的整体。

    .block--modifier代表.block的不同状态或不同版本。

    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等)
    //代表当前所有的标签 通配符(兼容任何浏览器打开页面内容的边距都为0)。目前最常用的是Normalize.css ,它是一个可定制的 CSS 文件,使浏览器呈现的所有元素,更一致和符合现代标准。它正是针对只需要统一的元素样式,依赖于研究浏览器默认元素风格之间的差异,精确定位需要重置的样式。

    -ms-(私有属性);//IE
    -moz-(私有属性);//Firefox 
    -webkit-(私有属性);//Safari 和 Chrome 
    -o-(私有属性);// Opera
    如:-moz-column-count:4;(分成4块显示) // Firefox
    格式:1.先写带有浏览器私有标志的,后写W3C标准的。
    2.使用16进制表示颜色值。
    3.省略值为0时的单位
    4.最后一个值也以分号结尾
    5.根据属性的重要性按顺序书写 
    参考网址:http://nec.netease.com/standard
     
  • 相关阅读:
    训练总结
    图论--最短路--SPFA模板(能过题,真没错的模板)
    图论--最短路-- Dijkstra模板(目前见到的最好用的)
    The 2019 Asia Nanchang First Round Online Programming Contest B Fire-Fighting Hero(阅读理解)
    关于RMQ问题的四种解法
    The Preliminary Contest for ICPC Asia Xuzhou 2019 徐州网络赛 K题 center
    The Preliminary Contest for ICPC Asia Xuzhou 2019 徐州网络赛 XKC's basketball team
    The Preliminary Contest for ICPC Asia Xuzhou 2019 徐州网络赛 D Carneginon
    ZOJ 3607 Lazier Salesgirl (枚举)
    ZOJ 3605 Find the Marble(dp)
  • 原文地址:https://www.cnblogs.com/gyx19930120/p/4898485.html
Copyright © 2011-2022 走看看