css 지정시 class 네이밍에 대해 질문이 있습니다.
160
작성한 질문수 2
안녕하세요. 강의 잘 보고 있습니다.
심플 배너 해설 영상을 보고 있는데 css class 명이 어떨때는 banner-bg 이런식이고 어떤때 에는 cousre__txt 이런식으로 네이밍을 지으시는 것 같은데 권장되는 규칙같은게 있는 건가요??
답변 2
0
안녕하세요.
CSS 강의의 모든 영상은 BEM 컨벤션을 기준으로 하였습니다.
BEM 컨벤션은 인프런 인턴이 답변한 것과 같습니다.
block은 컴포넌트 이름, element는 그 안의 하위 요소, modifier는 스타일이나 상태의 변형을 나타냅니다.
이때, block의 이름이 꼭 단일 단어여야 한다는 규칙은 없습니다.
원한다면 banner-bg 처럼 대시(-) 기호를 이용해서 네이밍을 지어도 됩니다.
그런 관점이라고 생각해주시면 될 것 같습니다 🙂
감사합니다.
0
안녕하세요, 인프런 AI 인턴입니다. rujung1225님.
CSS 클래스 네이밍은 코드의 가독성과 유지보수를 위해 매우 중요합니다. 일반적으로 많이 사용되는 네이밍 컨벤션에는 몇 가지가 있습니다.
BEM(Block Element Modifier): 이 방법은 코드의 구조와 명확성을 높이는 데 도움을 줍니다. 예를 들어,
block__element--modifier와 같은 형태로 사용합니다.block은 컴포넌트의 이름,element는 그 안의 하위 요소,modifier는 스타일이나 상태의 변형을 나타냅니다.Camel Case: JavaScript에서 주로 사용되는 방식으로,
myClassName과 같은 형태를 가집니다. 두 번째 단어부터 대문자로 시작하는 형태입니다.Snake Case: 단어 사이에 언더스코어를 넣는
my_class_name형태로 사용하는 방법입니다. 일관성을 유지하기 쉽지만, CSS에서는 자주 사용되진 않습니다.Kebab Case: 대부분의 CSS에서 많이 볼 수 있는 형식으로
my-class-name처럼 하이픈으로 단어를 구분합니다.
각 컨벤션마다 장단점이 있지만, 중요한 점은 한 프로젝트 내에서 일관성을 유지하는 것입니다. 예를 들어 BEM 규칙을 사용한다면 프로젝트 내 모든 CSS 클래스 네이밍에 이 규칙을 사용하는 것이 좋습니다.
관련된 기존 질문과 답변을 통해 더 많은 정보를 얻으실 수 있습니다:
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
중요하진 않지만 설명하신부분에서 안된부분..
0
11
0
안녕하세요, 강좌 5의 피그마 파일은 어디서 볼 수 있나요?
0
45
2
stopPropagation()에 대해서 질문 있습니다.
0
31
2
뉴스페이퍼 싱글템플릿 모바일 화면 디자인 질문
0
29
2
노션에 20.Contact가 없어요
0
37
2
검색엔진 차단 noindex
0
41
2
파트9 강의는 언제 오픈하시나요
0
45
2
ZIP 파일
0
39
2
26강 13F 강의 불일치 및 질문 요청
0
54
3
state 객체로 묶기
0
39
1
XAMPP에서 Apache, DB 재기동 시 접속안되는 문제
0
26
2
Breadth (등락 비율) 분석
0
27
1
26 .강의 프롬프트와 프롬프트파일(part3) 내용이 차이가 있어요.
0
32
2
6-6
0
31
1
Json 플러그인 사용시 variable collection 없음
0
40
2
심플갤러리 만들기에서
0
51
2
margin, padding 사용 시기
0
65
2
style 속성마다 박스 형태를 따로 따로 가지나요?
0
57
2
padding-bottom 사용 이유가 무엇인가요?
0
143
2
class명 네이밍 컨벤션 질문입니다!
0
111
2
새로운 강의
0
149
2
섹션18 햄버거 애니메이션 영상이 재생되지 않습니다.
0
127
1
폰트 크기 단위에 대해 질문있습니다.
0
92
2
피그마 활용하기 부분에 대해 질문있습니다.
0
134
1