[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

最新文章

热门文章