질문드립니다!

Question

안녕하세요 😃 강의 듣다 작은 궁금함이 생겨 질문 드립니다. 문제 1번과 문제 3번을 들었는데 CSS 작성 시 1번은 부모 자식 클래스를 한 줄에 다 작성하시고 .cont-movie .list-movieNav .link-nav{ } 3번은 클래스를 하나씩 작성하셨는데 .star-average{ } .star-point-container{ } .star-background{ } 두 방식에는 어떤 차이점이 있을까요? 개인적으로는 3번 방식을 선호하는데 장단점이 있는지도 궁금합니다! 감사합니다😃

Bonfire · Answer

안녕하세요! Kenna 님! 좀더 부연설명을 드리자면, 요즘 컴포넌트 형태로 UI 를 만드는 것이 인기를 끌고 있는데요. 이것을 기준으로 보시면 좋을 것 같습니다. 내가 정확히 떼어서 사용할 컴포넌트를 기준으로 해서 부모로 잡고 그 아래에 자식 클래스로 CSS를 주는 것이 가장 유리합니다. (2 depth ~ 3 depth 까지만) 가령 내가 이 컴포넌트 부분을 다른 데에 재사용 하려고 할 때 어떻게 하면 가장 깨지지 않고 편리하게 가져갈 수 있을지 대해서 고민하셨을 때 나온 정답이 가장 맞는 해답이 될 것입니다. 예를 들어 아이콘 같은 경우에는 어디에나 붙여서 쓸 수 있어야 하기 때문에 아이콘에 대한 스타일링을 할 때에는 depth가 많이 들어가지 않게 되거나 다른 공통 아이콘 클래스와 결합 (ex: .icon-star 혹은 .icon.icon-star ) 와 같은 형태로 작성하게 될꺼구요. 이 때 전자의 케이스에서는 .icon- 프리픽스에 스타일링을 달아서 사용하는 방식을 활용할 수도 있습니다. 3번의 경우에는 초기에 스타일링에 대한 소개까지 가게 될지 제가 미처 알지 못해서 마음가는 대로 분리된 부분도 있습니다. 이 점 죄송하게 생각하며 양해부탁드립니다. 위의 경우에는 괜찮아보이는 케이스는 .star-point 라는 클래스를 가장 상위에 두고 하위에 .star-background 등을 둬서 2depth 제어를 하는 것일 것으로 생각됩니다. 또한 중요한 것 중 하나는가장 적은 수의 CSS 클래스로 최고의 효율을 발휘할 수 있는 케이스를 만드는 것인데요. 그 이유를 이해할 수 있는 몇 가지 글을 소개 드립니다. 요약하자면 DOM 과 CSSOM가 결합하는 과정이 있는데 이 결합 과정에서 아무래도 제어하는 class가 적을 수록 연산이 더 빠를 것이기 때문입니다. 사실 최근 PC나 모바일의 성능이 워낙 좋기 때문에 이렇게까지 해야할까 싶긴 하지만, 사실 무엇보다 중요한 건 협업 을 생각하여 고민하는 것입니다. 적은 수와 보기 좋은 CSS 클래스 사용을 하게 되면 협업 (남들 혹은 자신과의 협업)에 유리하기 때문에 이런 부분도 고려하시면 좋을 것 같습니다. 위의 이유들 때문에(성능, 협업 등) SMACSS, BEM 등 여러가지 CSS 기법들도 나와있는데 이런 것들을 따로 참고하셔도 좋고, 개인적으로는 기법을 따라하는 것보다 스스로 생각해보면서 길을 찾아 보는 것도 좋은 것 같습니다! (결국엔 비슷한 형태로 가게 됩니다.) https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-tree-construction?hl=ko https://frontdev.tistory.com/entry/CSSOM%EC%9D%B4%EB%9E%80-%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80-%EB%A0%8C%EB%8D%94%EB%A7%81-%EA%B3%BC%EC%A0%95%EC%97%90-%EB%8C%80%ED%95%98%EC%97%AC https://designer-ej.tistory.com/entry/Web-Rendering-DOMCSSOMRender-Tree

-J- · Answer

안녕하세요 Kenna 님! 위에서 호준님이 달아주신 답 처럼 1번 방식의 장점은 CSS만 읽었을 때 이게 어디에 달려있는 클래스인지 마크업을 보지 않고 파악이 가능하다는 점도 있구요! 또 다른 장점으로는 자식 클래스가 부모 클래스에 의존하게 만들수 있다는 점 입니다. 스타일을 부모로부터 타고 들어가도록 유도하면 클래스가 중복되었을 때 스타일이 겹치는 것을 막을 수 있습니다. 답변이 도움이 됐으면 좋겠습니다~ 감사합니다!

Hojun Lee · Answer

안녕하세요! 제주코딩베이스캠프의 이호준입니다. 저희회사가 주 4일 근무이다 보니 답변이 월요일날 달릴 것 같아 제가 먼저 달려왔습니다.ㅎㅎ (저는 FE는 아니지만 해당 강의에서 9번과 10번을 담당하고 있어요.) 월요일에 추가 답변이 달릴테니 조금 기다려 주세요. :) 우선 저는 SASS를 병행 사용하고 있는데요. SASS를 병행사용하면 1번 방식으로 자동완성이 됩니다. 또한 전체 구조를 파악하기 용이해요. CSS만 읽었을 때 이게 어디에 달려있는 클래스인지 마크업을 보지 않고 파악이 가능하죠. 제가 드릴 수 있는 답변은 이정도이고, 월요일에 저희 FE 개발자 분들에게 한 번 더 답변 요청할게요. 감사합니다.