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

    Git在克隆的时候报错.Permission denied (publickey). 报错 Permission denied (publickey) 具体如下: 原因:没有将自己的电脑的SSH ke ...

  2. keil mdk 菜单 “project” 崩溃问题解决

    今天发现我的 Keil MDK5.28z win10系统上面,点击 Project 菜单立即崩溃.网上找到了解决方法 简单粗暴的处理方法:重装keil ,但是依然点击 project 崩溃. 通过搜索 ...

  3. Object.defineProperty 相关学习

    Object.defineProperty 学习   描述: 方法直接在对象上定义一个新属性,或修改对象上的现有属性 并返回该对象.该方法允许精确地添加或修改对象上的属性: 语法: Object.de ...

  4. 31、[源码]-AOP原理-AnnotationAwareAspectJAutoProxyCreato机

    31.[源码]-AOP原理-AnnotationAwareAspectJAutoProxyCreato机

  5. MongoDB CRUD 操作

    crud是指在做计算处理时的增加(Create).读取查询(Retrieve).更新(Update)和删除(Delete)几个单词的首字母简写.crud主要被用在描述软件系统中数据库或者持久层的基本操 ...

  6. java上传超大文件

    上周遇到这样一个问题,客户上传高清视频(1G以上)的时候上传失败. 一开始以为是session过期或者文件大小受系统限制,导致的错误.查看了系统的配置文件没有看到文件大小限制,web.xml中sees ...

  7. mybatis xml中是sql语句报错: Error creating document instance. Cause: org.xml.sax.SAXParseException: The

    最近项目折腾了老半天,找了资料才知道是这么回事... 因为语句中有一个小于号“<”,在XML中,会被当成一个页面元素来解析,不会处理为mysql的SQL语句的组成部分,修改如下: 1.在xml的 ...

  8. meshing-圆锥网格划分

    原视频下载地址: https://pan.baidu.com/s/1boSjGXh 密码: 9zis

  9. 查看日志tail命令

    打开终端,连接jboss: 命令: tail -f -n 500 /var/log/wildfly/wrapper.log

  10. elasticsearch集群健康状态查看

    1. 查看ES集群健康状态 http://localhost:9200/_cluster/health?pretty 响应: { "cluster_name" : "if ...