Question about ECSS

README.md

Question

I understand why ECSS make CSS be isolated but I have a question. Here is two modal components and I cannnot same components. There are buttons which rules are same in each component. According to ECSS I should write same code but I think it is redundant. what would you do in this situation ? Thaks in advance. 😄

Structure

components           # Presentational Components
.
├── foo-modal
│   ├── foo.css
│   └── foo.html
└── hoge-modal
    ├── hoge.css
    └── hoge.html

2 directories, 4 files

foo.css

.foo-Modal_button {
  border-radius: 3px;
  color: blue;
}

.foo-Modal_button--success {
  background: green;
  color: white;
}

foo.html

<div class="foo-Modal" role="dialog" aria-hashup="true">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit
  <button type="button" class="foo-Modal_button foo-Modal_button-success">OK</button>
</div>

hoge.css

.hoge-Modal_button {
  border-radius: 3px;
  color: blue;
}

.hoge-Modal_button--success {
  background: green;
  color: white;
}

.hoge-Modal_button--danger {
  background: red;
  color: white;
}

hoge.html

<div class="hoge-Modal" role="dialog" aria-hashup="true">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit
  <button type="button" class="hoge-Modal_button hoge-Modal_button-success">Stay on Page</button>
  <button type="button" class="hoge-Modal_button-success hoge-Modal_button-danger">Leave Page</button>
</div>