[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: 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>
);