입사 후 CSS 기술에서 지적된 사항🌟

입문

CAM 엔지니어 Advent Calendar 2019 5일차 기사입니다.
기사 일람은 여기서↓
https://qiita.com/advent-calendar/2019/cam-inc
어제는 id:gasheeee선생님의 브라우저 렌더링 시작입니다.
브라우저 렌더링에 관하여 쓴 것이기 때문에'렌더링이 아직 단번에 되지 않았구나~'라고 생각하는 사람은 꼭 보세요!!
이 글에서 저는 반년 동안 전단직에서 업무를 수행하는 과정에서 코치님께 지적받은 css에 대한 설명을 쓰고 싶습니다.

1. 부모 요소에 영향을 주는 아이 요소의 margin은 NG입니다!

우선 첫 번째는 마르진에 대한 추측 방법이 지적된 내용이다.
자신이 지적한 것은component 중의margin이 바깥의component에 영향을 미치기 때문에 이상하다
간단한 예를 들다
index.html

<div class="box"></div>
<div class="box">
  <div class="box__item"></div>
</div>

상술한 html
가설id:youkouJB은 부모 원소의component이고 그 중에서 box는 하위 원소의component이다.
그중에서,box와box에margin이 있으려면 아래의 css를 써 보세요.
index.css

.box {
  height: 200px;
  background-color: #ccc;
}

.box__item {
  margin-top: 40px;
  height: 100px;
  background-color: #000;
}

실제로 디스플레이에서 박스와 박스 사이에margin이 있을 수 있다box__itemmargin이 있기 때문에 이component를 필요로 하지 않고 삭제하면 margin이 완전히 사라지고 디스플레이에 영향을 미친다.

따라서 부요소에 영향을 주지 않기 위해서는 부요소에 대해 css를 기술해야 한다.
서비스에서도 몇 가지 이런 스타일의 맞추는 방법이 있기 때문에 찾아서 고칠 수 있기를 바랍니다.

2. BEM의 modifier

다음은 BEM(block,element,modifire)이 지적한 내용을 적겠습니다.
BEM

block: 하나의 집합, 부원소

element:block의 속성인 서브원소

modifier: 상태 변화를 나타내는 요소

에서 기술한 장면은 다음과 같은 절차를 이용하여 명세표를 작성하여 개념 디자인에서 체량의 부피를 분석하도록 한다.
BEM에 대해 더 자세히 알고 싶은 사람은 보세요여기.(공식)
이번에 지적된 건modifier에 관한 거예요.
실제로 지적된 기술은 여기에 있다
index.css

.service__subTitle--white {
  margin-top: 60px;
  color: white;
}

.service__subTitle--blue {
  margin-top: 40px;
  color: blue;
}

검은색 부제 외에 흰색 부제, 파란색 부제를 추가하고 싶습니다.
그러나 이 코드라면box__item과--white 같은 확장 클래스는margin-top이 있고 흰색 부제와 파란색 부제가 따로 나오면 이 클래스는 더 이상 사용할 수 없습니다.
나는 class 이름을 변경해서 대응하지만, 이렇게 맹렬하게 달리면 언젠가는 class가 증가할 때와 필요하지 않을 때 엉망진창이 될 수 있으니 주의해야 한다고 생각한다...

마지막

어때요?
이번에 입사한 후, 나는 CSS 기술에서 지적한 내용을 썼다.
기사를 쓸 때 나는 내가 복습할 수 있어서 정말 좋다고 느꼈다.
그리고 Qiita에 기사를 쓰는 것은 처음이라 주도면밀하지 못한 부분이 있습니다. 끝까지 봐주셔서 감사합니다!
"이건 옳지 않아!"있다면 댓글로 지적해 주세요!
다음은 --blue 선생님의 css 애니메이션!
기대해주세요!!