Global(전역)
Style Class Naming Convention
예: header, main, aside, footer, button-primary
- 전역에는 core 클래스만 작성한다.
- 전역에서 작성되는 클래스는 App파일, View파일, Component파일 어디에서든 쓰일 수 있다.
예: header, main, aside, footer
view-{ class-name } 은 view에서 core로서 공통으로 쓰일 수 있는 최소 단위 클래스만 작성한다.
prefix는 view-로 정한다. view- 로 시작되는 클래스는 component 에서는 이용하지 못한다.
view-header, view-main, view-aside, view-footer
참고: view-{ class-name }이면 전역에 작성된 클래스이고 { class-name }-view는 로컬에 작성된 클래스로 구분한다.
com-{ class-name } 은 Component File에서 core로서 공통으로 쓰일 수 있는 최소 단위 클래스만 작성한다.
prefix는 com-로 정한다. com- 로 시작되는 클래스는 view에서는 이용하지 못한다.
com-header, com-main, com-aside, com-footer
참고: com-{ class-name }이면 전역에 작성된 클래스이고 { class-name }-com는 로컬에 작성된 클래스로 구분한다.
View File
파일명: FileNameView.vue
로컬 스타일 클래스명: { class-name }-view
Styling Guide
Utility 클래스 등을 포함하여 최대한 전역 클래스 (view-{ class-name } 포함)를 이용한다.
전역에 클래스가 없는 경우 인라인 스타일링을 한다.
인라인 스타일링 중에 유사한 패턴이 발생하는 경우 반복되는 패턴은 로컬 클래스로 작성해 둘 수 있다.
로컬 클래스 명은: { class-name }-view 형식으로 작성한다.
이후 파일 내에 작성된 클래스 이름은 전역에 작성 불가하다.
단, scoped 되어 있기 때문에 다른 view파일에서는 동일명칭 사용이 가능하다.
로컬 클래스를 작성하면서 View 전반에 걸쳐 사용될 것 같은 파일은 전역 클래스에 view-{ class-name }으로 클래스를 작성해둔다.
기존에 로컬로 작성됐던 클래스나 스타일은 별도로 수정해도 되고 안해도 된다. 신규 파일부터 전역 view-{ class-name } 파일을 이용한다.
Component File
파일명: FileName.vue, FileNameAl.vue, FileNameBl.vue, FileNameEl.vue
로컬 스타일 클래스명: { class-name }-com (예: lead-header-com)
Styling Guide
Utility 클래스 등을 포함하여 최대한 전역 클래스 (com-{ class-name } 포함)를 이용한다.
전역에 클래스가 없는 경우 인라인 스타일링을 한다.
인라인 스타일링에서 유사한 패턴이 발생하는 경우 로컬 클래스를 작성할 수 있다.
로컬 클래스 명은:{ class-name }-com 형식으로 작성한다.
파일네임이 너무 길거나 할 경우, <style>바로 하단에 주석으로 코드명을 작성하고 파일네임 대신 코드명으로 이용한다.
이후 파일 내에 작성된 클래스는 전역 css 파일에 작성 불가하다.
Leave a Reply