[CSS] Reduce Ambiguity in Class Names using a Naming Convention
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的更多相关文章
- 词频统计_输入到文件_update
/* 输入文件见337.in.txt 输出文件见338.out.txt */ #include <iostream> #include <cctype> #include &l ...
- (摘)ORACLE DBA的职责
ORACLE数据库管理员应按如下方式对ORACLE数据库系统做定期监控: (1). 每天对ORACLE数据库的运行状态,日志文件,备份情况,数据 库的空间使用情况,系统资源的使用情况进行检查,发现并解 ...
- css best practice for big team and project
推荐查看以下文章: https://segmentfault.com/a/1190000000704006 关于BEM,SMACSS,OOCSS的通俗易懂的介绍 http://philipwalton ...
- [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 ...
- 【转】没那么难,谈CSS的设计模式
什么是设计模式? 曾有人调侃,设计模式是工程师用于跟别人显摆的,显得高大上:也曾有人这么说,不是设计模式没用,是你还没有到能懂它,会用它的时候. 先来看一下比较官方的解释:“设计模式(Design p ...
- 没那么难,谈CSS的设计模式
没那么难,谈CSS的设计模式 来源: 灵感的小窝 发布时间: 2016-09-09 16:46 阅读: 8949 次 推荐: 27 原文链接 [收藏] 什么是设计模式? 曾有人调侃, ...
- css命名管理混乱?不妨试试BEM
css的缺陷 我们知道,css使用中一个比较令人烦恼的问题,就是css没有作用域可言,我们写了一个组件或者模块之后,往往希望它们可以四处复用,但是由于css没有作用域,我们给样式命名的时候都会非常小心 ...
- CSS的设计模式
什么是设计模式? 曾有人调侃,设计模式是工程师用于跟别人显摆的,显得高大上:也曾有人这么说,不是设计模式没用,是你还没有到能懂它,会用它的时候. 先来看一下比较官方的解释:“设计模式(Design p ...
- 在django中访问静态文件(js css img)
刚开始参考的是别的文章,后来参考文章<各种 django 静态文件的配置总结>才看到原来没有但是没有注意到版本,折腾了一晚上,浪费了很多很多时间.后来终于知道搜索django1.7访问静态 ...
随机推荐
- 解决 Visual Studio 2013、2015、2017 工具箱不显示ArcGIS 10.2 控件,及ArcGIS模板丢失问题
1.重装ArcObject SDK for .NET Framework方法 (1)问题描述: 环境:WIN10 64bit.Visual Studio 2013.ArcGIS10.1.ArcGIS ...
- [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 ...
- MDL--元数据锁的锁请求与锁等待+元数据锁类对象
1 元数据锁的锁请求与锁等待 元数据锁在MySQL Server层,依照锁的状态被细分为两种.一种是已经施加的锁.一种是等待施加的锁即锁请求,这样被区分的原因,如MySQL对"cla ...
- 【Android】利用安卓的数据接口、多媒体处理编写内存卡Mp3播放器app
通过调用安卓的MediaPlayer能够直接完毕Mp3等主流音频的播放,同一时候利用ContentResolver与Cursor能够直接读取安卓内在数据库的信息.直接获取当前sdcard中全部音频的列 ...
- iTOP-4412开发板使用
使用环境:win7 旗舰64位,VMware11 使用使用板上提供的ubuntu12.04,用VMWARE直接打开虚拟机,因为之前开发epc9600开发板,所以虚拟机网络已经设置过,加载ubuntu1 ...
- SpringCloud核心教程 | 第三篇:服务注册与发现 Eureka篇
Spring Cloud简介 Spring Cloud是一个基于Spring Boot实现的云应用开发工具,它为基于JVM的云应用开发中涉及的配置管理.服务发现.断路器.智能路由.微代理.控制总线.全 ...
- 【Good Bye 2017 B】 New Year and Buggy Bot
[链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 枚举一下全排列.看看有多少种可以到达终点即可. [代码] #include <bits/stdc++.h> using ...
- [python]bug和debug
bug:代码中存在的语法或者逻辑问题 debug:自查和解决代码中的问题 (coding五分钟,debug两小时) 一.出现bug原因的四大类型 1.粗心 1)错误案例 上面这个错误就是因为 if语句 ...
- FansMail:邮件发送标准API与技术实现(Java)
发送邮件,是Web系统等IT建设中最常见的一种功能. 我对最常见的一种需求进行了抽象和封装,定义了一套标准的API,并且使用Java技术实现. 项目信息 项目名称:FansMail 项目作者:LeiW ...
- COGS——C66. [HAOI2004模拟] 数列问题
http://www.cogs.pro/cogs/problem/problem.php?pid=66 ★☆ 输入文件:dfs3.in 输出文件:dfs3.out 简单对比 时间限制:1 ...