CMS의 종류나 제품에 따라 다르지만, 익스포트(Export)한 HTML이나 CSS를 변경할 수 없기 때문에 구조를 조금 바꾸고 싶더라도 어쩔 수 없이 이것들을 그대로 사용해야 하는 경우가 있습니다. 혹은 어느 정도 조정은 가능하지만, ‘어떻게 하더라도 특정 부분은 CMS에서 익스포트한 HTML/CSS를 사용할 수밖에 없는’ 경우도 있습니다.
---p.6

웹사이트의 규모가 커지고 모듈 수가 증가할수록 ‘클래스 이름에서 형태, 기능, 역할을 유추할 수 있다’는 중요성은 늘어납니다. 미디어(Media) 외에도 아코디언(Accordion)이나 슬라이더(Slider) 등 일반적으로 사용하는 UI라면 좋지만, 때로는 이에 해당하지 않는 모듈도 나올 수 있을 것입니다. 이런 경우에는 형태를 떠올릴 수 있는 이름을 사용하는 것이 좋습니다.
---p.60

블록 모듈과 마찬가지로 엘리먼트 모듈에 대해서도 기본적인 레이아웃 관련 스타일링은 하지 않습니다. 단, 블록 모듈에 비해 엘리먼트 모듈은 그 변형에 한계가 있는 경우가 많습니다. 예를 들면, 버튼 크기의 유형은 사이트 안에서 열 가지 이상이 되는 경우는 적으며 대개 다섯 가지에서 여섯 가지 정도입니다. 엘리먼트 모듈에 직접 width를 지정하거나 Modifier를 사용해 크기를 변경하는 것은 허용합니다.
---p.145

background-size 속성은 배경 이미지 크기를 조정하기 위한 속성입니다. 표시하고자 하는 이미지를 배경 이미지로 설정해야 하기 때문에 HTML 구조를 변경해야 합니다. 또한 배경 이미지를 설정할 때는 img 요소를 사용하지 않으므로 머신리더블(Machine-Readable)하지 않습니다. SEO나 접근성 보장에 있어서는 다소 비효율적이므로 background-size 속성을 사용할 때는 ‘콘텐츠로 인식되지 않아도 문제없는가’를 잘 확인해야 합니다.
---p.239

FAQ의 대답 안에 리스트를 삽입한 패턴입니다. 실제로 자주 접하는 FAQ 모듈을 생각해 봤을 때 눈에 익은 조합일 것입니다. 이 패턴에서는 추가 CSS 없이 간단히 리스트 모듈을 해당 위치에 삽입해 구현을 완료합니다. 스타일링의 책임 범위를 구분하고, 특히 모듈 자체에 레이아웃에 관한 지정을 수행하지 않도록 하면, 이와 같이 추가 코드 없이 조합을 완료할 수 있는 경우도 많습니다.