BEM 아키텍처 설계
혼자서 작은 웹사이트를 만들 때는 상관없지만, 10명이 넘는 개발자가 네이버 같은 거대한 사이트를 만들 때는 클래스 이름이 겹쳐서 디자인이 박살나는 대참사가 벌어집니다. 이를 막기 위한 작명 규칙이 BEM입니다.
- 언더바 2개(
__)는 내가 누구의 소속(Element)인지 밝힙니다. - 대시 2개(
--)는 나의 현재 상태나 강조(Modifier)를 나타냅니다.
브라우저 호환성 (Vendor Prefix)
새로 나온 최신 CSS 기술을 아직 업데이트하지 않은 구형 브라우저에서도 작동하게 만들기 위해 브라우저 회사(Vendor)의 접두사를 붙여주는 것입니다.
🛠️ 실무 꿀팁: Autoprefixer
요즘 실무에서는 개발자가 일일이 저 긴 접두사를 손으로 치지 않습니다. 표준 코드 한 줄만 적으면, Webpack이나 PostCSS 같은 도구가 코드를 배포할 때 알아서 벤더 프리픽스를 덕지덕지 붙여주는 자동화 시스템을 사용합니다.