标签：form cto offer make div lis style likely target
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: 0; padding: 0; 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
标签：form cto offer make div lis style likely target
原文地址：http://www.cnblogs.com/Answer1215/p/6823035.html
