命名空间
另外最好的实践就是当命名你的类名的时候,使用命名空间前缀来进行分类。这些前缀会在你的命名前添加一组字符,但是这个值能立刻标记每一个类的目的,在你看 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. JS 仿支付宝input文本输入框放大组件

    input输入的时候可以在后边显示数字放大镜 <!doctype html> <html lang="en"> <head> <meta ...

  2. 织梦cms导航高亮显示栏目及首页的方法

    直奔主题了,高亮显示教程适用于您具有一定的CSS基础才可以了,前提把高亮显示的样式写好,然后再开始高亮显示标签适用. <li {dede:field name=typeid runphp=&qu ...

  3. DOM属性获取、设置、删除

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. 加入redis缓存的 优 缺 点以及解决方案

    redis(支持十万级的并发) 优点:         1.减轻数据库压力         2.增强系统的并发量         3.提高用户体验 缺点:         1.数据不一致(延迟更新) ...

  5. PostgreSQL、Greenplum 日常监控 和 维护任务

    背景 Greenplum的日常监控点.评判标准,日常维护任务. 展示图层 由于一台主机可能跑多个实例,建议分层展示. 另外,即使是ON ECS虚拟机(一个虚拟机一个实例一对一的形态)的产品形态,实际上 ...

  6. (RE) luogu P3690 【模板】Link Cut Tree

    二次联通门 : luogu P3690 [模板]Link Cut Tree 莫名RE第8个点....如果有dalao帮忙查错的话万分感激 #include <cstdio> #includ ...

  7. Cannot initialize a variable of type 'Stu *' with an rvalue of type 'void *'

    code: 将 Stu* pStu = malloc(sizeof(Stu)); 改为Stu* pStu = (Stu*)malloc(sizeof(Stu)); code #include < ...

  8. mysql IFNULL函数和COALESCE函数使用技巧

    IFNULL() 函数      IFNULL() 函数用于判断第一个表达式是否为 NULL,如果为 NULL 则返回第二个参数的值,如果不为 NULL 则返回第一个参数的值. IFNULL() 函数 ...

  9. codeforces#1120C. Compress String(dp+后缀自动机)

    题目链接: https://codeforces.com/contest/1120/problem/C 题意: 从前往后压缩一段字符串 有两种操作: 1.对于单个字符,压缩它花费$a$ 2.对于末尾一 ...

  10. JRebel for IntelliJ激活

    好久没用jrebel了,跟前端进行项目联调总是有些许改动,还是热部署方便. 目前用的idea版本:IntelliJ IDEA 2019.2 JRebel插件版本:JRebel for IntelliJ ...