-
질문 & 답변
카테고리
-
세부 분야
기타 (개발 · 프로그래밍)
-
해결 여부
미해결
질문드립니다!
21.08.20 16:41 작성 조회수 144
3
.cont-movie .list-movieNav .link-nav{
}.star-average{
}
.star-point-container{
}
.star-background{
}개인적으로는 3번 방식을 선호하는데 장단점이 있는지도 궁금합니다!
답변을 작성해보세요.
3
Bonfire
지식공유자2021.08.25
안녕하세요! 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://designer-ej.tistory.com/entry/Web-Rendering-DOMCSSOMRender-Tree
2
-J-
지식공유자2021.08.20
안녕하세요 Kenna 님!
위에서 호준님이 달아주신 답 처럼 1번 방식의 장점은 CSS만 읽었을 때 이게 어디에 달려있는 클래스인지 마크업을
보지 않고 파악이 가능하다는 점도 있구요!
또 다른 장점으로는 자식 클래스가 부모 클래스에 의존하게 만들수 있다는 점 입니다.
스타일을 부모로부터 타고 들어가도록 유도하면 클래스가 중복되었을 때 스타일이 겹치는 것을 막을 수 있습니다.
답변이 도움이 됐으면 좋겠습니다~
감사합니다!
2
Hojun Lee
지식공유자2021.08.20
안녕하세요! 제주코딩베이스캠프의 이호준입니다.
저희회사가 주 4일 근무이다 보니 답변이 월요일날 달릴 것 같아 제가 먼저 달려왔습니다.ㅎㅎ
(저는 FE는 아니지만 해당 강의에서 9번과 10번을 담당하고 있어요.)
월요일에 추가 답변이 달릴테니 조금 기다려 주세요. :)
우선 저는 SASS를 병행 사용하고 있는데요. SASS를 병행사용하면 1번 방식으로 자동완성이 됩니다.
또한 전체 구조를 파악하기 용이해요. CSS만 읽었을 때 이게 어디에 달려있는 클래스인지 마크업을
보지 않고 파악이 가능하죠.
제가 드릴 수 있는 답변은 이정도이고, 월요일에 저희 FE 개발자 분들에게 한 번 더 답변 요청할게요.
감사합니다.
답변 3