A solid naming convention makes it less likely to run into naming conflicts and helps establish a semantic pattern that is easier for a team to follow. In this lesson, I'm using a variation of the BEM (Block Element Model) naming convention. OOCSS and SMACSS offer similar methodologies. I also use the class attribute selector to target multiple modifier classes.

.todo-list {
list-style: none;
margin:;
padding:;
width: 100%;
order: -1;
display: flex;
flex-direction: column;
}
[class^="todo-list__item"] {
cursor: pointer;
height: 80px;
display: block;
text-transform: uppercase;
color: #af544f;
letter-spacing: 2px;
box-sizing: border-box;
padding: 27px 33px 0 78px;
box-shadow: 0 1px 0 0 #e6e6e6, 0 2px 0 0 white;
background-image: url('https://jsbin-user-assets.s3.amazonaws.com/GarthDB/box.svg');
background-repeat: no-repeat;
background-position: 28px 16px;
}
.todo-list__item--completed {
color: #16a085;
background-image: url('https://jsbin-user-assets.s3.amazonaws.com/GarthDB/done.svg')
}
const Todo = ({
onClick,
completed,
text
}) => (
<li
onClick={onClick}
className={
completed ?
"todo-list__item--completed" :
"todo-list__item--active"
}
>
{text}
</li>
);

[CSS] Reduce Ambiguity in Class Names using a Naming Convention的更多相关文章

  1. 词频统计_输入到文件_update

    /* 输入文件见337.in.txt 输出文件见338.out.txt */ #include <iostream> #include <cctype> #include &l ...

  2. (摘)ORACLE DBA的职责

    ORACLE数据库管理员应按如下方式对ORACLE数据库系统做定期监控: (1). 每天对ORACLE数据库的运行状态,日志文件,备份情况,数据 库的空间使用情况,系统资源的使用情况进行检查,发现并解 ...

  3. css best practice for big team and project

    推荐查看以下文章: https://segmentfault.com/a/1190000000704006 关于BEM,SMACSS,OOCSS的通俗易懂的介绍 http://philipwalton ...

  4. [React] {svg, css module, sass} support in Create React App 2.0

    create-react-app version 2.0 added a lot of new features. One of the new features is added the svgr  ...

  5. 【转】没那么难,谈CSS的设计模式

    什么是设计模式? 曾有人调侃,设计模式是工程师用于跟别人显摆的,显得高大上:也曾有人这么说,不是设计模式没用,是你还没有到能懂它,会用它的时候. 先来看一下比较官方的解释:“设计模式(Design p ...

  6. 没那么难,谈CSS的设计模式

    没那么难,谈CSS的设计模式 来源: 灵感的小窝  发布时间: 2016-09-09 16:46  阅读: 8949 次  推荐: 27   原文链接   [收藏]   什么是设计模式? 曾有人调侃, ...

  7. css命名管理混乱?不妨试试BEM

    css的缺陷 我们知道,css使用中一个比较令人烦恼的问题,就是css没有作用域可言,我们写了一个组件或者模块之后,往往希望它们可以四处复用,但是由于css没有作用域,我们给样式命名的时候都会非常小心 ...

  8. CSS的设计模式

    什么是设计模式? 曾有人调侃,设计模式是工程师用于跟别人显摆的,显得高大上:也曾有人这么说,不是设计模式没用,是你还没有到能懂它,会用它的时候. 先来看一下比较官方的解释:“设计模式(Design p ...

  9. 在django中访问静态文件(js css img)

    刚开始参考的是别的文章,后来参考文章<各种 django 静态文件的配置总结>才看到原来没有但是没有注意到版本,折腾了一晚上,浪费了很多很多时间.后来终于知道搜索django1.7访问静态 ...

随机推荐

  1. element-UI 表单校验失效处理

    1.el-form-item 的 prop属性绑定的要是字符串: eg: :prop="'answer[' + 0 + ']' "       //而不是    :prop=&qu ...

  2. LiveReload配置,安装使用方法~~~前端页面神助手

    一.Chrome端安装LiveReload插件 1.首先这里啰嗦一下,如果Chrome无法进入商店,可以先安装一下谷歌商店助手 谷歌商店插件地址 http://pan.baidu.com/s/1dF1 ...

  3. CODEVS——T1332 上白泽慧音 || 洛谷——P1726 上白泽慧音

    http://codevs.cn/problem/1332/|| https://www.luogu.org/problem/show?pid=1726#sub  时间限制: 1 s  空间限制: 1 ...

  4. 【SonicUI】关于字体高亮的问题。。

    m_pSonicString[1]->Format(_T("/c=%x, a='http://hi.csdn.net/', linkh=0xFF00F0, font, font_hei ...

  5. 2.写给设计师看的HTML&CSS入门指导

    转自:http://www.uisdc.com/html-and-css-guide 整体简介 在开始学习HTML&CSS之前,首先要搞清楚两者的区别.两者在整体上有着很明显的差异. 整体看来 ...

  6. 1.2 Use Cases中 Messaging官网剖析(博主推荐)

    不多说,直接上干货! 一切来源于官网 http://kafka.apache.org/documentation/ 下面是一些关于Apache kafka 流行的使用场景.这些领域的概述,可查看博客文 ...

  7. 库函数strcpy/strlen的工作方式

    库函数strcpy/strlen的工作方式         分类:             C/C++              2011-07-03 23:49     1032人阅读     评论 ...

  8. 洛谷 P1551 亲戚

                      洛谷 P1551 亲戚 题目背景 若某个家族人员过于庞大,要判断两个是否是亲戚,确实还很不容易,现在给出某个亲戚关系图,求任意给出的两个人是否具有亲戚关系. 题目描 ...

  9. valueof(), intvalue(0 parseint() 这三个方法怎么用

    valueOf(int i) 返回一个表示指定的 int 值的 Integer 实例.valueOf(String s) 返回保存指定的 String 的值的 Integer 对象.valueOf(S ...

  10. 多线程在python中的使用 thread

    近期想学习研究一下python中使用多线程,来提高python在爬虫项目中的效率. 如今我们在网页上查询到在python中使用的多线程的使用大多数都是使用的threading模块,可是python中另 ...