당신은 주제를 찾고 있습니까 “css 네이밍 – 칭찬받는 코드 작성법 (처음 HTML/CSS 공부하시는 분들이라면 꼭꼭 보세요!)“? 다음 카테고리의 웹사이트 https://hu.taphoamini.com 에서 귀하의 모든 질문에 답변해 드립니다: https://hu.taphoamini.com/photos/. 바로 아래에서 답을 찾을 수 있습니다. 작성자 김버그 Kimbug 이(가) 작성한 기사에는 조회수 40,789회 및 좋아요 906개 개의 좋아요가 있습니다.
Table of Contents
css 네이밍 주제에 대한 동영상 보기
여기에서 이 주제에 대한 비디오를 시청하십시오. 주의 깊게 살펴보고 읽고 있는 내용에 대한 피드백을 제공하세요!
d여기에서 칭찬받는 코드 작성법 (처음 HTML/CSS 공부하시는 분들이라면 꼭꼭 보세요!) – css 네이밍 주제에 대한 세부정보를 참조하세요
0:10 코드 가독성의 꽃, Indentation (들여쓰기) 🌹
0:45 HTML 마크업 할 때 팁 🎉
1:28 용서할 수 없는 못된 코드 발견 😡
1:55 인라인 스타일을 사용하는 사람을 대처하는 방법 😈
2:14 인라인 스타일이 왜 악마 같은 짓이죠? 🤔
2:33 커여운 재혁님의 질문 🐧
2:43 더 이상 날 거슬리게 하지 말라 (feat. 일관성이 제일 중요합니다) 🚫
3:05 자바스크립트 코드는 head에 넣지 않습니다 ✋
3:18 뜻밖의 버그 발견 🐛
3:28 올바른 title 사용법 🤘
4:27 HTML 리뷰 끝, 이제 CSS로 🎉
4:37 파일 이름은 명시적으로! 🔖
4:54 (대공사 시작) CSS를 읽기 쉽게 작성하는 방법 🚧
5:54 고급진 CSS 선택자를 사용하시는 군요 🥨
6:30 CSS를 200% 활용하는 스타일시트 관리법 😎
7:18 재혁님의 코드 습관을 뜯어 고치기 위한 버그의 작은 선물 🎁
7:32 Prettier를 소개합니다 🎊
7:41 .prettierrc 설정하는 법 💙
8:35 그래서 Prettier를 쓰면 어떻게 되는데요? 🤷♀️
9:16 HTML에 Prettier가 작동 안 했던 이유ㅠㅠ (feat. 태그를 잘 사용하자) 🕵️♀️
10:06 세 살 버릇이 여든 간다, 올바른 코드 작성 습관이 중요한 이유! 👴
10:50 그래도 이 정도면 훌륭하십니다 🍼
11:15 에필로그 💕
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
다소 주관적인 리뷰이긴 하지만
도움이 되었으면 좋겠어요!
그리고 참여해주신 재혁님
잔소리는 많았지만 제 맘 아시죠…?
좋아요 + 구독 = 해피 🥰
좋아요/구독은 버그를 춤추게 합니다
👀 Prettier에 대해 더 자세히 알고 싶으시다면?
▶︎ https://prettier.io/
🦄 김버그의 HTML\u0026CSS는 재밌다
▶︎ https://bit.ly/35p5BsC
아래의 쿠폰 코드를 결제 시 입력하시면
50% 할인을 해드립니다!!!!
😎 THX_KIMBUG_SUBSCRIBERS
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
🐝
KIMBUG
출연_김버그, 장재혁
영상편집_김버그
css 네이밍 주제에 대한 자세한 내용은 여기를 참조하세요.
CSS 네이밍 규칙
공통 규칙 잘못된 예 올바른 예 설명 Tit_pop.html *-hden-obj 03_btn_more.gif tit-section 시작이름은 영문 대문자, 숫자, 특수문자로 시작할 수 …
Source: uipac.com
Date Published: 7/13/2022
View: 2729
네이밍 컨벤션 BEM
회사에 입사하기 전에는 “css는 그냥 돌아가기만 하면 됐지” 하고 나 이름을 대충대충 적어서 코드를 짜는 일이 많았었습니다.
Source: tech.elysia.land
Date Published: 9/19/2022
View: 9432
[CSS] Naming Conventions 네이밍 규칙 – 파고 또 파기
카멜케이스는 사용한 네이밍은 CSS에는 적합하지 않음 .redBox 보단 .red-box가 표준적인 CSS 네이밍 규칙이며 더 읽기 쉬움 …
Source: padak-padak.tistory.com
Date Published: 2/21/2022
View: 7131
[번역] 디버깅 시간을 절약할 수 있는 CSS 네이밍
이 글은 Ohans Emmanuel의 CSS Naming Conventions that Will Save You Hours of Debugging 을 번역한 내용입니다. Ohans Emmanuel(원작자)의 허락을 …
Source: blog.sonim1.com
Date Published: 7/14/2022
View: 8352
[작업가이드] 파일,CSS 네이밍 규칙 : 네이버 블로그
[작업가이드] 파일,CSS 네이밍 규칙 … ID / Class 네이밍 규칙 … 공통적으로 사용되는 예약어는 “레이아웃 > 형태” 와 같이 네이밍 한다.Source: m.blog.naver.com
Date Published: 10/13/2022
View: 3610
css 에서 class 네이밍 규칙 – 진스
css 에서 네이밍 규칙. 입방정 2021. 4. 26. 10:25. 방식 1. “역활”과 “이름” : btn, tab, tit, desc, … 방식 2. CSS 레이아웃 예약어. #header. 헤더영역.
Source: bangj.tistory.com
Date Published: 6/8/2022
View: 3812
견고한 UI 설계를 위한 마크업 가이드 정리 2탄 BEM이 뭐지 …
패스트캠퍼스 The RED : 견고한 UI 설계를 위한 마크업 가이드 정리 2탄 BEM이 뭐지? CSS 네이밍 어떻게 하지? 펠릭스 2021. 10. 29. 16:07. “이름을 ‘개똥이’라고 …
Source: felix-escape.tistory.com
Date Published: 3/3/2021
View: 6087
class 이름 정할 때 규칙? | 코드잇
big-blue-text, centered-text 처럼 css 클래스명을 지을때 자주쓰는 규칙이 있을까요? 클래스명을 보통은 어떤 방법으로 짓는지 궁금해요~!
Source: www.codeit.kr
Date Published: 3/25/2022
View: 2502
주제와 관련된 이미지 css 네이밍
주제와 관련된 더 많은 사진을 참조하십시오 칭찬받는 코드 작성법 (처음 HTML/CSS 공부하시는 분들이라면 꼭꼭 보세요!). 댓글에서 더 많은 관련 이미지를 보거나 필요한 경우 더 많은 관련 기사를 볼 수 있습니다.
주제에 대한 기사 평가 css 네이밍
- Author: 김버그 Kimbug
- Views: 조회수 40,789회
- Likes: 좋아요 906개
- Date Published: 최초 공개: 2020. 6. 26.
- Video Url link: https://www.youtube.com/watch?v=ATVDtfUe8pY
CSS 네이밍 규칙
공통 규칙
잘못된 예 올바른 예 설명 Tit_pop.html
*-hidden-obj
03_btn_more.gif tit-section 시작이름은 영문 대문자, 숫자, 특수문자로 시작할 수 없다.(파일 및 폴더 제외) cancle_btn_off_01.gif, msgbox-off-toggle btn_cancle_01_off.gif, msgbox-toggle-off 네이밍의 조합은 ‘형태_의미_순서_상태’을 기본 순서로 사용한다. customerService customer_service 네이밍 규칙의 언더스코어(_) 조합은 파일, 폴더, 이미지에 사용한다. hidden_obj hidden-obj 네이밍 규칙의 하이픈(-) 조합은CSS 네이밍에 사용하는 것을 권장한다. HTML 문서 안에서 언더스코어(_)의 조합은 form, input 엘리먼트등의 name 어트리뷰트의 값을 사용하는 것을 권장한다. 이유는 클래스 네임이 서버사이드 스크립트의 변수와 자바스크립트의 변수 정의시 혼돈을 방지하기 위함이다. cyber_center_1, cyber_center_2 cyber_center_01, cyber_center_02 1, 2과 같은 한자리 정수는 사용하지 않으며 01, 02과 같이 사용하며 사용을 권장한다. 대부분의 파일관리 유틸리티 프로그램들을 사용하여 파일의 이름으로 정렬할 때에 정렬의 순서를 보장하기 위함이다. box-type01,
box-type02,
box-type03 box-type,
box-type02,
box-type03 1, 2과 같은 한자리 정수는 사용하지 않으며 01, 02과 같이 사용하며 사용을 권장한다. 대부분의 파일관리 유틸리티 프로그램들을 사용하여 파일의 이름으로 정렬할 때에 정렬의 순서를 보장하기 위함이다.
파일 및 폴더 네이밍
기확과 개발에서 정의된 디렉토리 구조도 및 화면 아이디가 정의가 되어있다면 그에 준한 규칙에 따라 파일 및 폴더의 이름을 사용한다.
분류 예제 설명 Folder html 업무별 폴더 생성가능. 00.service, 01.customer, 02.account html_guid 마크업 가이드, 접근성가이드, 화면 목록등의 파일 및 폴더 생성 가능 js 라이브러리별 폴더 생성 가능 css 디렉토리별 폴더 생성 가능 img 네이밍별 폴더 생성 가능 HTML 0101.html 화면 코드 사용(별도의 정의된 네이밍 롤이 없을 경우 사용) 00_customer_service_list.html 화면 코드, 메뉴명, 상태의 조합 00_pop_*.html 팝업 파일 사용 00_aj_*.html ajax 이용하여 페이지를 동적으로 사용하는 파일 00_if_*.html iframe 파일 CSS 00.service.css 폴더명을 사용 default.css 브라우저 호환성을 위하여 기본 css 속성을 정의하며, common.css를 @import 한다. layout.css 화면의 레이아웃 구조의 표현을 정의한 파일 common.css 전역에 쓰이는 요소의 표현을 정의하며 html의 업무별, 디렉토리별 구분하여 작성한 css 파일을 @import 한다. JS common.js 전역에 사용하는 스크립트를 작성한다.
아이디 네이밍
시작의 이름은 영문 소문자를 사용하되 두 번째 단어부터 첫 번째 문자를 대문자로 처리하는 기법(카멜 케이스)을 사용한다.
동일한 이름의 id는 문서에서 한번만 사용이 가능하다.
지정된 레이아웃을 제외한 스타일 지정을 위하여 id를 사용하지 않는다.
앵커로서 사용되는 엘리먼트는 id 지정이 가능하다.
User Interface 동작을 위하여 DOM 선택자로서의 id 지정은 가능하다.
예약어가 있는 경우 예약어를 사용한다.
잘못된 예 올바른 예 error_Mesage errorMesage control_center controlCenter checkbox_3
레이아웃 예약어
예약어 설명 #wrapper 페이지 전체 영역 그룹핑 #header 머리글 영역 #container 본문영역 그룹핑 #content 중요컨텐츠 영역 #footer 바닥글 #popWrapper 팝업 페이지 전체 영역 그룹핑 #popHeader 팝업 머리글 영역 #popContainer 팝업 본문영역 그룹핑 #popContent 팝업 중요컨텐츠 영역 #popFooter 팝업 바닥글
동작선택 예약어
예약어 설명 #gnbNav 글로벌 네비게이션 영역 메뉴 #lnbNav 로컬 네비게이션 영역의 메뉴 #snbNav 사이드 네비게이션 영역의 메뉴
클래스 네이밍
시작의 이름은 영문 소문자를 사용하며 두 번째 단어부터 하이픈(-)으로 연결하며 대문자는 사용하지 않는다.
영문 소문자, 숫자, 하이픈(-)만 사용할 수 있다.
하이픈(-)은 2개 이상의 단어를 조합할 때만 사용한다.
클래스 예약어에 숫자, 영문소문자, 하이픈(-)을 조합하여 사용할 수 있다.
하이픈(-)을 이용하여 3단계를 초과하여 사용하는 방법은 지양한다.
숫가자 없으면 ’01’이라는 숫자가 생략된 것으로 간주한다.
다중의 클래시 지정을 허용하며 최대 3개 이상 사용하지 않도록 주의한다.
잘못된 예 올바른 예 error-Mesage error-mesage control_center control-center
기본 예약어
예약어 설명 .aside-* 보통 보통 #container 또는 #content 에 종속 되며 켵가지 영역으로 불리기도 한다. .gnb 최상위 공통 네비게이션(Global Navigation Bar)을 지정합니다. 보통 수평(bar)형태로 표현되며 #header 에 종속된다. 수직으로 표현되는 경우는 거의 드물지만 그러한 경우 #header 에 종속되지 않을 수도 있습니다. .lnb 현재 서비스의 지역(Local Navigation Bar) 네비게이션을 지정 합니다. 보통 수평(bar)형태로 표현되며 #header 에 종속된다. 수직으로 표현되는 경우는 거의 드물지만 그러한 경우 #header 에 종속되지 않을 수도 있습니다. .nav-* gnb, lnb, snb 이외의 네비게이션을 지정합니다. .path 현재 페이지의 경로를 지정합니다. 보통 #container 또는 #content 에 종속됩니다. .section-* 콘텐츠를 분할하거나 그룹핑 하는 블럭 입니다. 보통 #content 내부에 배치한 다음 heading 태그(h1~h6)와 함께 사용하는 것을 권장합니다. .snb .gnb, .lnb 를 제외한 측면(Side Navigation Bar) 네비게이션 영역을 지정합니다. 보통 #container 에 종속되고 수직으로 표현되지만 수평으로 표현되는 경우도 있으므로 #header 에 종속되는 등 예외의 경우도 있을 수 있습니다.
ㅁㄴㅇㄹ
BODY 예약어
브라우저의 호환성을 및 css 핵의 사용을 최소화 하기 위하여 javascript를 이용하여 body 엘리먼트에 클래스 명을 지정한다.
개발 완료시 서버사이드 언어로 브라우저 타입을 구별하여 해당 클래스 예약어를 body 엘리먼트에 적용하여야 한다.
예약어 브라우저 msie6 Internet Explorer6 msie7 Internet Explorer7 msie8 Internet Explorer8 msie9 Internet Explorer9 msie10 Internet Explorer10 msie11 Internet Explorer11 firefox firefox safari safari opera opera chrome chrome
이미지 네이밍
이미지 네이밍의 조합은 ‘형태_의미_순서_상태’의 순서로 조합한다.
같은 이름의 이미지가 두 개 이상 존재하면 파일 언더스코어(_)로 구분한다.
이미지 네이밍은 이미지의 확장자에 관계 없이 순차적으로 적용한.
예) btn_confirm.gif, btn_confirm_02.jpg, btn_confirm_03.png
예) btn_confirm.gif, btn_confirm_02.jpg, btn_confirm_03.png 임시이미지에 한하여 @특수문자를 처음으로 사용할 수 있다.
이미지 예약어에 숫자, 영문소문자, 언더스코어(_)를 조합하여 사용할 수 있다.
잘못된 예 올바른 예 설명 on_tab_info.gif tab_info_01_on.gif 형태_의미_순서_상태 순서로 조합한다. tio.gif tab_info_on.gif 임의로 축약하지 않는다. tbl_type_list_02_off.gif tbl_list_02_off.gif 가급적 4단계 이하의 조합을 사용한다. btn_Active.gif btn_active.gif 영문 소문자를 사용한다. bul_square_type02.gif bul_square_type_02.gif 같은 분류의 이미지 사용시 언더스코어(_)로 구분한다.
이미지 예약어
분류 예약어 사용 예 설명 텍스트 h[1-6]_*, h_* h_logo.gif, h12_header.gif, h1_article.gif heading 요소에 사용한다. tit_* tit_leble_id.gif, tit_definition_list, tit_table_th.gif heading 요소로 사용되지는 않고 문단의 강조를 나타내는 형식의 텍스트, 주로 테이블의 제목셀, dt 엘리먼트, label 엘리먼트, strong 엘리먼트에 사용 txt_* txt_msg.gif, txt_desc_1 문단의 이미지로된 텍스트에 사용 링크요소 nav_* nav_gnb_ko.gif, nav_gnb_login.gif, nav_lnb_about.gif lnb, gnb, snb 등의 네비게이션 요소에 사용 tab_* tab_style_01_on.gif, tab_style_01_off.gif 네비게이션 요소를 제외한 탭 메뉴 형태에 사용 btn_* btn_ok.gif, btn_ok_02.gif, btn_bg_type.gif 버튼 형식의 a 엘리먼트, button 엘리먼트, input[type=image] 엘리먼트 요소에 사용한다. 버튼의 이미지가 배경으로 사용하여도 btn_* 예약어를 사용 박스 box_* box_type.gif, box_login.gif grouping 목적으로 사용되는 div 엘리먼트에 주로 사용 불릿 bul_* box_arrow.gif, bul_arrow_02.gif, bul_square,gif 의미가 없는 요소로 사용할 수 있는 이미지로 사용. 아이콘 icon_* icon_download.gif, icon_upload.gif 의미가 있는 요소로 설명에 대한 텍스트가 명확한 경우 상태 *_on, *_off, *_over tab_type_01_on.gif, tab_type_01_off.gif, tab_type_01_over.gif 활성, 비활성, 오버/포커스 상태에 대한 표현에 사용 임시 @* @tm_layout_header.jpg, @thumb_photo_1.jpg, @ad_main_1.jpg 임시로 레이아웃의 구조에 사용되는 이미지 또는 개발과 연동되는 부분의 썸네일 이미지, 광고영역의 이미지에 사용
출처: http://hhh8947.tistory.com/323
[CSS] Naming Conventions 네이밍 규칙
*
카멜케이스는 사용한 네이밍은 CSS에는 적합하지 않음
.redBox 보단 .red-box가 표준적인 CSS 네이밍 규칙이며 더 읽기 쉬움
BEM 네이밍 규칙
팀마다 서로 다른 방식으로 CSS Selector를 작성함
어떤 팀은 하이픈(-)을 사용하는 반면, 더 체계적인 CSS 네이밍 규칙인 BEM을 쓰는 팀도 있음
일반적으로, CSS네이밍 규칙은 아래 3가지 문제를 해결할 수 있음
1. CSS Selector 이름을 보고 무엇을 하는지 알 수 있음
2. CSS Selector 이름을 보고 어디서 사용하는지 알 수 있음
3. CSS Selector 이름을 보고 Class들의 관계 를 알 수 있음
B – block ( nav, header, footer )
E – Elements ( head, arms, feet )
M – Modifiers
01)
Block과 같은 Component 중 스틱맨이 있다면
stick-man이라고 클래스 네임방식이 이상적이라 할 수 있음
ex)
.stick-man { }
02)
Component안에 있는 구성요소(Elements)는
BEM 네이밍 규칙을 사용하면 두개의 밑줄을 추가하고 Element이름을 추가함
ex)
.stick-man__head { }
.stick-man__arms { }
.stick-man__feet { }
03)
Component안에 있는 구성요소의 수식어(특정요소)는
두개의 하이픈( – )과 modifier 클래스 명을 추가함
ex)
.stick-man–red { }
.stick-man–blue { }
.stick-man은 Block에 해당
.stick-man__head는 구성요소에 해당
.stick-man__head–small은 수식어에 해당
참고사이트:
https://blog.sonim1.com/221
[번역] 디버깅 시간을 절약할 수 있는 CSS 네이밍
이 글은 Ohans Emmanuel의 CSS Naming Conventions that Will Save You Hours of Debugging 을 번역한 내용입니다.
Ohans Emmanuel(원작자)의 허락을 받은 후 작성되었으며, 이 글의 모든 저작권은 Ohans Emmanuel에게 있습니다. 이해의 편의상 의역이 들어가 있습니다.
잘못된 번역은 댓글로 남겨주시면 감사하겠습니다!
디버깅 시간을 절약할 수 있는 CSS 네이밍
저는 많은 개발자들이 CSS가 싫다고 하는 것을 들었습니다.
하지만 제 경험에 의하면, 이런 불만이 생기는 이유는 그들이 CSS를 배우는 데 시간을 들이지 않기 때문입니다.
CSS는 가장 아름다운 언어는 아니지만 20년 이상의 웹 스타일링을 성공적으로 수행해 왔습니다.
하지만 더 많은 CSS를 사용할 경우 CSS 유지보수가 어려워지는 단점을 쉽게 볼 수 있습니다.
이 포스트에서는 이런 단점을 보완하여 CSS로 인한 스트레스와 시간을 줄일 수 있는 몇 가지 명명 규칙을 소개합니다.
하이픈(-)으로 구분된 문자열 사용
만약 당신이 자바스크립트를 많이 사용했다면 변수명으로 카멜 케이스를 쓰는데 익숙해져 있을 겁니다.
var redBox = document .getElementById( ‘…’ )
그렇죠?
문제는 카멜 케이스를 사용한 네이밍은 CSS에는 적합하지 않습니다.
이 규칙에 대한 잘못된 예:
.redBox { border : 1px solid red; }
이 규칙에 대한 올바른 예:
.red-box { border : 1px solid red; }
이것은 표준적인 CSS 네이밍 규칙이며 더 읽기 쉽습니다.
또한 CSS 속성 이름 규칙과도 일치합니다.
// Correct // CSS 속성명도 – 을 사용 .some-class { font-weight : 10em } // Wrong // CSS 속성 명은 CamelCase 를 사용하지 않는다. .some-class { fontWeight : 10em }
BEM 네이밍 규칙
팀마다 서로 다른 방식으로 CSS Selector를 작성합니다. 어떤 팀은 하이픈(-)을 사용하는 반면, 더 체계적인 CSS 네이밍 규칙인 BEM을 쓰는 팀도 있습니다.
일반적으로, CSS 네이밍 규칙은 아래 3가지 문제를 해결할 수 있습니다.
CSS Selector 이름을 보고 무엇을 하는지 알 수 있습니다. CSS Selector 이름을 보고 어디서 사용하는지 알 수 있습니다. CSS Selector 이름을 보고 Class들의 관계 를 알 수 있습니다.
이렇게 쓰인 클래스 네임을 본적이 있나요?
.nav–secondary { … } .nav__header { … }
이것이 BEM 네이밍 규칙입니다.
5살 아이에게 BEM 설명하기
BEM은 전체 사용자 인터페이스를 재사용 가능한 작은 구성요소들로 나누려고 시도합니다.
아래 그림을 보세요.
스틱맨은 Block과 같은 Component에 해당합니다. BEM의 B는 Block이라고 이미 짐작하셨을 겁니다.
실제 환경에서 Block은 사이트의 Nav, Header, Footer 등에 해당합니다.
위에서 설명한 방식에 따라서 스틱맨 Component의 이상적인 클래스 네임은 stick-man 이 될 수 있습니다.
CSS 코드로 보면 아래와 같습니다.
.stick-man { }
그리고 우리는 구분된 문자열을 사용했습니다. Good!
E는 Elements
BEM의 E는 Elements라는 의미입니다.
전반적으로 Block이 따로 고립된 채로 있는 경우는 드뭅니다. 예를 들어, 스틱맨은 머리, 두 개의 멋진 팔 그리고 다리를 가지고 있습니다.
머리, 팔 그리고 다리는 모두 Component 안에 있는 구성요소(Elements)입니다.
BEM 네이밍 규칙을 사용하여 두 개의 밑줄을 추가하고 Element 이름을 추가 합니다.
For Example:
.stick-man__head { } .stick-man__arms { } .stick-man__feet { }
M은 Modifiers
BEM의 M는 수식어(Modifiers)라는 의미입니다.
스틱맨을 파란색이나 빨간색으로 꾸며줘야 한다면 어떨까요?
실제 예제로는 버튼을 생각할 수 있습니다. 버튼을 파란색이나 빨간색으로 꾸며줘야 할 때 이런 수식어(Modifier)를 BEM으로 표현할 수 있습니다.
두개의 하이픈(-) 과 modifier 클래스 명을 추가합니다.
For example:
.stick-man–blue { } .stick-man–red { }
위 Example에서는 Modifier가 추가된 상위 Component를 보여줍니다.
머리 크기가 다른 스틱맨이 있다면 어떨까요?
이번에는 스틱맨 Component의 내부 Element(머리)가 수정되었습니다. 머리는 하위 Component라는 걸 명심하세요.
.stick-man 은 Block에 해당하고, .stick-man__head 는 구성요소(Element) 입니다.
아래 예에서 볼 수 있듯이 하이픈을 아래와 같이 사용할 수 있습니다.
.stick-man__head–small { } .stick-man__head–big { }
다시 한번 말하지만, 위에서 두 번의 하이픈을 사용하는 걸 주목하세요. 이는 수식어(Modifier)를 나타내는 데 사용됩니다.
이제 우리는 BEM이 작동하는 기본적인 방식을 알게 되었습니다.
개인적으로 간단한 프로젝트에는 단지 하이픈(-) 구분자만 사용하는 경향이 있습니다. 그리고 사용자 인터페이스에 좀 더 관련된 경우 BEM을 사용하는 편입니다.
Read More BEM
왜 명명 규칙(Naming Conventions)을 사용하는가?
Computer Sciene에는 두 가지 어려운 문제가 있다. 캐시 무효화(cache invalidation)와 이름 붙이기 – Phil Karlton
네이밍은 어렵습니다. 하지만 일을 쉽게 만들기 위한 올바른 네이밍의 대가로 추후 유지보수 시간을 절약할 수 있습니다.
정확한 CSS 네이밍을 한다면, 코드를 읽기 쉽고 유지 보수하기 쉽게 만들어 줄 것입니다.
만약 BEM 명명 규칙을 선택한 경우, Component와 Block 간의 관계를 쉽게 확인할 수 있습니다.
CSS 네이밍에 대한 자신감이 생기셨나요?
CSS Names with JavaScript Hooks
오늘은 John의 첫 출근 날입니다.
그는 다음과 같은 HTML 코드를 건네받았습니다.
< div class = "siteNavigation" >
John은 이 포스트를 이전에 읽었고 건네받은 HTML 코드가 최선의 방법이 아닐 수도 있다는 것을 깨달았습니다. 그래서 그는 아래와 같이 코드를 다시 만들었습니다.
< div class = "site-navigation" >
좋아 보이네요. 그렇죠?
하지만 John은 코드를 망쳤습니다.
어떻게 망쳤냐구요?
어딘가에 있는 Javascript에서 변경 전 클래스 명인 siteNavigation를 사용하고 있었습니다!
const nav = document .querySelector( ‘.siteNavigation’ )
클래스 이름이 변경됨에 따라서 nav 변수가 null이 되었습니다.
이 얼마나 슬픈일이가요.
이런 경우를 방지하기 위해 개발자들은 여러 가지 전략을 내놓았습니다.
1. js- class 이름 사용하기
버그를 경감시키는 한 가지 방법으로 DOM 요소와의 관계를 나타내기 위해 js-* 클래스 명을 사용합니다.
For example:
