BEM
Block Element Modifier
red-text-btnではなくerror-btnである
search-formに対するsearch-form__buttonなど
code:nest.html
<!-- 検索ブロック -->
<form class="search-form">
<!-- × span がbuttonの要素になってる -->
<button class="search-form__button">
<span class="search-form__button__text">Search</span>
</button>
</form>
<!-- 検索ブロック -->
<form class="search-form">
<!-- ○ span は検索ブロックの要素 -->
<button class="search-form__button">
<span class="search-form__text">Search</span>
</button>
</form>
code:.css
/* × 要素の詳細度が高い */
.menu {}
.menu .menu__item {}
.menu .menu__bun {}
/* ○ 詳細度が均一 */
.menu {}
.menu__item {}
.menu__bun {}
search-form__button--disabledなど
参考