命名空间
另外最好的实践就是当命名你的类名的时候,使用命名空间前缀来进行分类。这些前缀会在你的命名前添加一组字符,但是这个值能立刻标记每一个类的目的,在你看 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. Postgresql Useful SQL/Commands

    Update records ' and a.subscriber_id=b.subscriber_id; Connections select count(*) from pg_stat_activ ...

  2. 线程(C++11)

    不同平台.框架.语言所使用的线程函数不同.对于初学者选择一种适合自己的,用熟用透即可. Windows中,CreateThread() Linux中,pthread_create() MFC框架中,A ...

  3. DOM Diff(差分)算法

    1. 算法由来 React调用render()方法后,会生成一个React元素组成的树. 再次调用,生成一个新的树.React比较两者的差异,然后更新UI. 如果单纯使用算法,来查找两个DOM树的差异 ...

  4. Mysql查看所有表的数据量

    ##查看所有表信息 SELECT * FROM information_schema.TABLES WHERE TABLE_SCHEMA = 'pcms-zgh20190327' ##查看各个表数据量 ...

  5. 二十一.构建memcached服务、LNMP+memcached、PHP的本地Session信息、PHP实现session共享

    proxy client web1 web2   1.构建memcached服务 ]# yum -y install memcached ]# cat /etc/sysconfig/memcached ...

  6. Bzoj 2282: [Sdoi2011]消防(二分答案)

    2282: [Sdoi2011]消防 Time Limit: 10 Sec Memory Limit: 512 MB Description 某个国家有n个城市,这n个城市中任意两个都连通且有唯一一条 ...

  7. 为List<T>中的T进行参数校验

    1.现在前端发送了一个POST请求,他的Data是一个数组,而不是对象(jsonObj的值两侧是中括号). var jsonObj = [{'id':11, 'name':'叵'}, {'id':12 ...

  8. gitlab怎么用

    0101在个人资料里面去设置去找密钥.... 0102 点击生成密钥 0103 在文件夹的命令行输入 ssh-keygen -t rsa -C "your.email@example.com ...

  9. meshing-八分之一圆球

    ​原视频下载地址:https://yunpan.cn/cqwiFDCg6PbFj  访问密码 d1c8

  10. Java 学习资料网站集合

    一.开源项目的搜集 https://www.jianshu.com/p/6c75174e0f07 -- https://github.com/flyleft/tip 二.简单的开源项目 https:/ ...