Skip to content

[Convention] CSS Guide

Jump to bottom
Min Ji, Choi edited this page Apr 1, 2020 · 9 revisions

1. CSS 간소화

  • margin, padding

    // bad
div {
    margin-top:1em;
	margin-right:0;
	margin-bottom:2em;
	margin-left:0.5em;
}

// good
div {
    margin:1em 0 2em 0.5em;
}

  • borders

    // bad
div {
    border-width:1px;
	border-style:solid;
	border-color:#000;
}
// good (width, style, color 순)
div {
    border:1px solid #000000;
}

  • backgrounds

    // bad
div {
    background-color:#f00;
    background-image:url(background.gif);
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-position:0 0;
}
// good (color, image, repeat, attachment, position 순)
div {
    background:#FF0000 url(background.gif) no-repeat fixed 0 0;
}

  • fonts

    // bad
div {
    font-style:italic;
    font-variant:small-caps;
    font-weight:bold;
    font-size:1em;
    line-height:140%;
    font-family:"Lucida Grande",sans-serif;
}
// good (style, variant, weight, size, line-height, family 순)
div {
    font:italic small-caps bold 1em/140% "Lucida Grande",sans-serif;
}

  • lists

    // bad
div {
    list-style-type:square;
    list-style-position:inside;
    list-style-image:url(image.gif);
}
// good
div {
    list-style:square url(image.gif) inside;
}

2. 렌더링 관점

  • color

    렌더링 기본 표준 및 6자리 대문자로 변경되므로 6자리 대문자로 표시함

    // bad
div {
    color:#f3a;
}
// good
div {
    color:#FF33AA;
}

  • display, visibility

    display는 물리적인 공간을 차지하지 않고 visibility는 물리적인 공간을 차지해 자원을 소모하므로 성능개선이 필요함

    // bad
div {
    visibility:hidden;
}
// good
div {
    display:none;
}

  • border

    border:0은 물리적 공간을 점유하기 때문에 자원을 사용하여 성능 개선이 필요함

    // bad
div {
    border:0;
}
// good
div {
    border:none;
}

  • class와r id를 설명할 레이블을 추가하지 않기

    검색 효율성 떨어짐

    // bad
button#backButton { } 
// good
#backButton { }

// bad
.menu-left #newMenuIcon { }
// good
#newMenuIcon { }

  • 권장

    
treeitem[mailfolder="true"] > treerow > treecell { } 보다는 
.treecell-mailfolder { } 사용

// selectors에서 자식, 손자 노드 피하기  - 리소스를 가장 많이 소비하므로 사용을 피함
treehead treerow treecell { } 보다는 
treehead > treerow > treecell { } 사용

// 하위 태그를 포함하지 않는 sub-class selectors - 각 요소의 매핑에 시간 비용이 소비됨
treehead treerow treecell { } 보다는
.treecell-header { } 사용

// sub-selectors 사용시 주의해라
treeitem[IsImapServer="true"] > treerow > .tree-folderpane-icon { } 보다는
.tree-folderpane-icon[IsImapServer="true"] { }  사용

4. 공통 적용 속성

box-sizing: border-box
padding: 0
margin: 0

5. 속성 순서

CSS 속성 순위는 포퍼먼스 향상에는 영향이 없으나 일관성, 판독성, 유지보수성에 도움을 주므로 가능한 아래 순서로 작성

  1. 객체의 노출여부와 표현방식
	display
	list-style
  1. 위치와 좌표
	position
	top/ left / bottom / right
	float
	clear
  1. 크기와 여백
	width / height
	padding / margin
  1. 윤곽과 배경
	border / background
  1. 글자와 정렬
	color / font
	text-decoration
	text-align / vertical-align
	white-space
  1. 내용
	content

6. 규칙에 맞는 z-index 값 적용

적절한 z-index 사용으로 컴포넌트 간 겹침현상 해소

내용 z-index 범위
프레임 내부 단순 스타일 지정 용도 1 ~ 9
컴포넌트 내부 콘텐츠 배치 용도 10 ~ 100
컴포넌트 레이어 용도 101 ~ 1000
  • 프레임 내부 단순 스타일 지정 용도: 각 요소간 단순 layout을 위해 사용할 경우
  • 컴포넌트 내부 콘텐츠 배치 용도: tooltip, filter 등 컴포넌트 내 기능에 의해 사용할 경우
  • 컴포넌트 레이어 용도: 여러 컴포넌트가 겹칠 경우

사용 z-index 값

내용 z-index
loading mask 300
window 700
window modal 720
date picker 750
tooltip, context menu 850
message 900
message box 1000
  • tooltip은 차트나 그리드 내 필터 등 의미
    (datepicker의 calendar/ selectbox의 dropdown 메뉴 등 기타 프레임 내에서 상단에 올라와야 하는 것들은 100으로 지정)
  • loading mask 는 프레임 내부에 띄우는 용도로 지정한 것으로, 전체 화면 용도(window 위)라면 따로 z-index 지정 필요

7. 기타

  • 선택자는 상위 선택자를 포함하여 3개 이상 작성되지 않게 함
  • 전체 선택자를 사용하지 않음
  • 정규 표현식과 유사한 애트리뷰트 선택자 사용을 지양하며, 부적합한 애트리뷰트 선택자 사용을 지양함
  • 아이디 선택자를 사용하지 않음
  • 클래스 규칙에 불필요한 태그를 조합하여 사용하지 않음
  • 태그 선택자 규칙에 상위 선택자로 태그를 포함하지 않음
Clone this wiki locally