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. 解决 Visual Studio 2013、2015、2017 工具箱不显示ArcGIS 10.2 控件,及ArcGIS模板丢失问题

    1.重装ArcObject SDK for .NET Framework方法 (1)问题描述: 环境:WIN10 64bit.Visual Studio 2013.ArcGIS10.1.ArcGIS ...

  2. [Angular & Unit Testing] Testing a RouterOutlet component

    The way to test router componet needs a little bit setup, first we need to create a "router-stu ...

  3. MDL--元数据锁的锁请求与锁等待+元数据锁类对象

    1 元数据锁的锁请求与锁等待     元数据锁在MySQL Server层,依照锁的状态被细分为两种.一种是已经施加的锁.一种是等待施加的锁即锁请求,这样被区分的原因,如MySQL对"cla ...

  4. 【Android】利用安卓的数据接口、多媒体处理编写内存卡Mp3播放器app

    通过调用安卓的MediaPlayer能够直接完毕Mp3等主流音频的播放,同一时候利用ContentResolver与Cursor能够直接读取安卓内在数据库的信息.直接获取当前sdcard中全部音频的列 ...

  5. iTOP-4412开发板使用

    使用环境:win7 旗舰64位,VMware11 使用使用板上提供的ubuntu12.04,用VMWARE直接打开虚拟机,因为之前开发epc9600开发板,所以虚拟机网络已经设置过,加载ubuntu1 ...

  6. SpringCloud核心教程 | 第三篇:服务注册与发现 Eureka篇

    Spring Cloud简介 Spring Cloud是一个基于Spring Boot实现的云应用开发工具,它为基于JVM的云应用开发中涉及的配置管理.服务发现.断路器.智能路由.微代理.控制总线.全 ...

  7. 【Good Bye 2017 B】 New Year and Buggy Bot

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 枚举一下全排列.看看有多少种可以到达终点即可. [代码] #include <bits/stdc++.h> using ...

  8. [python]bug和debug

    bug:代码中存在的语法或者逻辑问题 debug:自查和解决代码中的问题 (coding五分钟,debug两小时) 一.出现bug原因的四大类型 1.粗心 1)错误案例 上面这个错误就是因为 if语句 ...

  9. FansMail:邮件发送标准API与技术实现(Java)

    发送邮件,是Web系统等IT建设中最常见的一种功能. 我对最常见的一种需求进行了抽象和封装,定义了一套标准的API,并且使用Java技术实现. 项目信息 项目名称:FansMail 项目作者:LeiW ...

  10. COGS——C66. [HAOI2004模拟] 数列问题

    http://www.cogs.pro/cogs/problem/problem.php?pid=66 ★☆   输入文件:dfs3.in   输出文件:dfs3.out   简单对比 时间限制:1 ...