首页 > 代码库 > [CSS] Reduce Ambiguity in Class Names using a Naming Convention

[CSS] Reduce Ambiguity in Class Names using a Naming Convention

2024-09-20 08:05:01   211人阅读

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


联系
我们