data 속성을 활용하고 싶습니다.

예를 들면, 상기와 같은 버튼이 있었다고 해서, LP 제작이라든가라면,
「그 버튼에 맞는 클래스를 작성한다」라고 하는 느낌이 될까 생각합니다.

hoge.html

<p><a href="#" class="m-btn-small">幅決まっているボタン</a></p>
<p><a href="#" class="m-btn">幅100%ボタン</a></p>

hoge.scss

.m-btn{
  position: relative;
  display: inline-block;
  color: #fff;
  background: pink;
  font-size: 1.4rem;
  font-weight: bold;
  padding: 6px 20px;
  width: 100%;
  border-radius: 5px;
  max-width: 100%;
  text-align: center;
  text-decoration: none;
  &-small{
    position: relative;
    display: inline-block;
    color: #fff;
    background: pink;
    font-size: 1.4rem;
    font-weight: bold;
    padding: 6px 20px;
    width: 100%;
    border-radius: 5px;
    max-width: 400px;//ここだけ値を変更
    text-align: center;
    text-decoration: none;
  }
}

이 경우 LP이면 좋지만 사이트 운용이나 사이트 리뉴얼 등에서 "버튼의 색을 파란색으로 변경하고 싶다"라든가 된 경우를 생각하면,

hoge.scss

.m-btn{
  position: relative;
  display: inline-block;
  color: #fff;
  background: pink;
  font-size: 1.4rem;
  font-weight: bold;
  padding: 6px 20px;
  width: 100%;
  border-radius: 5px;
  max-width: 100%;
  text-align: center;
  text-decoration: none;
  &-small{
    position: relative;
    display: inline-block;
    color: #fff;
    background: pink;
    font-size: 1.4rem;
    font-weight: bold;
    padding: 6px 20px;
    width: 100%;
    border-radius: 5px;
    max-width: 400px;//ここだけ値を変更
    text-align: center;
    text-decoration: none;
    &-blue{
    position: relative;
    display: inline-block;
    color: #fff;
    background: blue;//ここの色を変えるために他のプロパティも記述しないといけない
    font-size: 1.4rem;
    font-weight: bold;
    padding: 6px 20px;
    width: 100%;
    border-radius: 5px;
    max-width: 400px;
    text-align: center;
    text-decoration: none;
    }
  }
}

위와 같이 되어 버려,
· css가 중복됩니다.
· 중복 된 분 유지 보수가 어렵습니다.
· 다른 색상과 너비를 추가 할 때 더 중복됩니다.
등 단점이 많이 있습니다.

data 속성을 사용한 경우

hoge02.html

<p><a href="#" class="m-btn" data-btn-width="small">幅決まっているボタン</a></p>
<p><a href="#" class="m-btn">幅100%ボタン</a></p>

hoge02.scss

.m-btn{
  position: relative;
  display: inline-block;
  color: #fff;
  background: pink;
  font-size: 1.4rem;
  font-weight: bold;
  padding: 6px 20px;
  width: 100%;
  border-radius: 5px;
  max-width: 100%;
  text-align: center;
  text-decoration: none;
  &[data-btn-width="small"]{
    max-width: 400px;
  }
}

이와 같이 .m-btn에 data 속성을 가지게 해, 그것에 대해서 css를 설정하는 것으로,
· css 설명을 줄일 수 있습니다.
· 유지 보수가 쉽다.
· 다른 색상과 너비를 추가해도 이해하기 쉽습니다.
라는 장점이 있습니다.

조금 전의, 「버튼의 색을 파랑으로 변경하고 싶다」의 경우에서도,

hoge02.scss

.m-btn{
  position: relative;
  display: inline-block;
  color: #fff;
  background: pink;
  font-size: 1.4rem;
  font-weight: bold;
  padding: 6px 20px;
  width: 100%;
  border-radius: 5px;
  max-width: 100%;
  text-align: center;
  text-decoration: none;
  &[data-btn-width="small"]{
    max-width: 400px;
  }
  &[data-btn-bg="blue"]{
    background: blue;
  }

그리고 설명이 짧아지고 알기 쉽습니다.

요약

LP가 아니라 사이트 운영, 사이트 리뉴얼이라면 제작과 그 후의 보수도 생각 data 속성을 활용해 나가는 것을 추천합니다.