[코딩 공부_69] css의 클래스명에 대하여

네이밍 정하기? 코딩을 할 때 가장 중요한 부분이라 생각한다

특별하게 이 네이밍으로 하세요! 하는 건 없지만 기준없이 네이밍을 정하게 되면 스타일을 수정하거나 추가할 때, 헷갈리고 코드가 엉망이 될 수 있다 그리고 함께 작업하는 부분이라면 더더욱 기준없이 클래스명을 지어버리면 안된다!!

 

 

[코딩 공부_35] bem class명 규칙

전에도 클래스명 관련 글인 BEM 규칙에 대해 포스팅한 적 있지만 나는 코딩 할 때, camel case를 자주 사용했었다! 그런데 css에선 camel case를 사용하는 건 올바른 표기법이 아니란 이야기를 듣고 재정리를 하기 위해 게시글을 올린다!

그렇다면 어떤 클래스명이 좋은 방법일까 한번 생각해보자!

 

 

1. 규칙있는 클래스명을 하면 좋은 점?

 - selector 이름만 보고 어디에 사용하는 지, 무엇을 하는지에 대해 알 수 있다

 - 클래스 이름으로 관계를 알 수 있다

 

2. CSS에서 Camel Case?

 - camel case는 자바스크립트에서 많이 사용하는 형식이기 때문에 CSS에선 하이픈(-)을 주로 사용해야한다

 

3. 왜 CSS에선 하이픈을 사용해야할까?

 - css의 속성 이름(font-size..)과 같은 형식이기 때문에 사용하기 편하다

 

---

물론 하이픈만 사용하는 것보단 BEM을 이용하여 클래스명을 주는 것이 더 바람직하다 나는 아직 BEM에 서툴러서 자주 사용하고 있진 않지만 포트폴리오를 제작할 때는 BEM을 이용하여 클래스를 줄 예정이다!

클래스명이 전부는 아니지만 클래스명을 보고 스타일을 주기 때문에 중요한 역할을 한다!! 그렇기 때문에 클래스명을 소홀하게 여기면 안될 거 같다