命名空间
另外最好的实践就是当命名你的类名的时候,使用命名空间前缀来进行分类。这些前缀会在你的命名前添加一组字符,但是这个值能立刻标记每一个类的目的,在你看 HTML 或者样式的时候是很需要的。我使用下面这些命名空间: 对象类:.o-
组件:.c-
状态类:.is- 或者 .has-
主题:.t-
工具类:.u-
JavaScript 勾子:.js-
<footer class="c-footer">
<div class="o-container-wide">
<a class="c-footer__logo" href="/">The Assist</a>
<div class="c-social c-social--follow">
<div class="c-social__label u-txt-center">Join the conversation</div>
<ul class="c-social__list">
<li class="c-social__item"></li>
<li class="c-social__item is-active"></li>
<li class="c-social__item"></li>
</ul>
</div>
<p class="c-footer__credit"></p>
</div>
</footer>

原文地址:https://www.60sky.com/post/thoughtful-css-architecture.html

css 命名规范参考[转]的更多相关文章

  1. web前端开发CSS命名规范参考

    做为一个web前端工程师,每天接触HTML.css就像吃饭一样,但是作为一名合作.优秀的web前端工程师,对DIV+CSS命名还是有一定的规范的,本文整理了一份web前端开发中DIV+CSS各种命名规 ...

  2. CSS命名规范参考及书写注意事项

    CSS书写顺序 *{ /*显示属性*/ display position float clear cursor … /*盒模型*/ margin padding width height /*排版*/ ...

  3. CSS 命名规范及标题供参考与学习

    一.CSS 命名规范   XHTML-CSS写作建议 所有的xhtml代码小写 属性的值一定要用双引号("")括起来,且一定要有值 每个标签都要有开始和结束,且要有正确的层次 空元 ...

  4. DotNet命名规范参考(转)

    来自:http://www.cnblogs.com/w-y-f/archive/2012/05/30/2526254.html DotNet命名规范参考 一.命名规范 注意事项:使用英文命名规则,尽量 ...

  5. 通用CSS命名规范

    一.文件命名规范 样式文件命名主要的 master.css布局,版面 layout.css专栏 columns.css文字 font.css打印样式 print.css主题 themes.css [/ ...

  6. CSS 命名规范总结

    CSS 命名规范总结 BEM 命名给 CSS 以及 html 提供清晰结构,命名空间提供更多信息,模块化提高代码的重用,以达到 CSS 命名语义化.可重用性高.后期维护容易.加载渲染快的要求. 首先, ...

  7. CSS命名规范

    DIV+CSS规范命名大全集合 前端人员必看CSS命名规范 整理: 文件名必须由小写字母.数字.中划线组成 ).所有的命名最好都小写,一律采用小写加中划线的方式,不允许使用大写字母或 _2).属性的值 ...

  8. html,css命名规范 (转)

    HTML+CSS命名规范总结 1.HTML部分 1.1添加必须的utf-8的字符集,并且使用HTML5的简洁 方式: <meta charset="utf-8"> 1. ...

  9. Html+CSS命名规范:

     Html+CSS命名规范: 1.样式命名: 2.样式文件命名:

随机推荐

  1. Vue IE11 报错 Failed to generate render function:SyntaxError: 缺少标识符 in

    报错截图: 查了篇文章(https://blog.csdn.net/weixin_42018057/article/details/81385121),遇到的情况跟文章里描述的类似,他提供的方法是:需 ...

  2. learning scala pattern matching

    code: package com.aura.scala.day01 import scala.util.Random object patternMatching01 { def main(args ...

  3. P4556 雨天的尾巴 线段树合并

    使用线段树合并,每个节点维护一棵权值线段树,下标为救济粮种类,区间维护数量最多的救济粮编号(下标).所以每个节点答案即为\(tre[rot[x]]\). 然后运用树上点的差分思想,对于分发路径\(u, ...

  4. (WAWAWAWAWAWA) BZOJ 1858: [Scoi2010]序列操作

    二次联通门 : BZOJ 1858: [Scoi2010]序列操作 /* BZOJ 1858: [Scoi2010]序列操作 已经... 没有什么好怕的的了... 16K的代码... 调个MMP啊.. ...

  5. Luogu5072 [Ynoi2015]盼君勿忘 【莫队】

    题目描述:对于一个长度为\(n\)的序列,\(m\)次询问\(l,r,p\),计算\([l,r]\)的所有子序列的不同数之和\(\mathrm{mod} \ p\). 数据范围:\(n,m,a_i\l ...

  6. php关于mysql长连接问题

    1.当 函数 mysql_connect 的前三个参数(server username password)相同,并且第四个参数(new_link)不传递时候,重复调用 mysql_connect 是会 ...

  7. Ubuntu14.04 软件安装卸载

    ----常用软件安装 sudo apt-get install vim-gtk //安装vim软件 sudo apt-get install zip //安装解压软件和解压文件 sudo apt-ge ...

  8. c 字符串的结束标志

    //char carray[]="nihao"; char carray[]={'a','b','c','d','\0'}; printf("array=%s" ...

  9. 如何用Deepin-wine安装运行win32的程序

    创建容器 容器就是win32程序运行的环境,可以理解为一个极小的windows,在Linux下面实际对应一个文件目录,如QQ对应的容器目录是~/.deepinwine/Deepin-QQ. 创建容器最 ...

  10. linux listen()

    listen(等待连接) 相关函数 socket,bind,accept,connect表头文件 #include<sys/socket.h>定义函数 int listen(int s,i ...