DEV Community

Discussion on: BEM - A CSS Naming Convention

View post
Collapse
 
salhernandez profile image
Salvador Hernandez • • Edited

I like BEM because it makes CSS feel more like you're working with Classes and Inheritance even if its just for syntax purposes. I prefer using Sass with the SCSS syntax because it feels better organized as well. Below is how CSS would look like using SCSS

.nav {
  text-decoration: none;
  background-color: white;
  color: #888;
  border-radius: 5px;
  display: inline-block;
  margin: 10px;
  font-size: 18px;
  text-transform: uppercase;
  font-weight: 600;
  padding: 10px 5px;

    /* Element */
    &__ul {
        background-color: white;
        color: #fff;
        padding-right: 12px;
        padding-left: 12px;
        margin-right: -10px; /* realign button text padding */
        font-weight: 600;
        background-color: #333;
        opacity: 0.4;
        border-radius: 5px 0 0 5px;
        }

    &__li {
        /* Modifier */
        &--blue {
            color: blue;
            font-size: 28px;
            padding: 10px;
            font-weight: 400;
        }

        /* Modifier */
        &--red {
            border-color: #0074d9;
            color: white;
            background-color: #0074d9;
        }

        /* Modifier */
        &--hover{
            &:hover {
            border-color: #ff4136;
            color: white;
            background-color: #ff4136;
            }
        }
    }
}
Enter fullscreen mode Exit fullscreen mode
Collapse
 
charissayj profile image
Charissa Johnson •

I actually plan to have a future post with SASS and SMACSS!