css 컨벤션, css 코딩 스타일

스크립트 코딩 컨벤션을 정하던 중 css 컨벤션에 대하여 이야기가 나왔다.

css 컨벤션이 있을거라고 생각하지 못했다.

중요하지 않다고 생각했기 때문인가..

 

이야기가 나온 김에 css 컨벤션 및 스타일 가이드에 대하여 알아보았다.

유용한것 같은것만 몇개 정리해보았다.

CSS에서 캐멀케이스(camelCase)는 좋지 않다.

1.  css는 하이픈을 구분자로 사용하는 프로퍼티로 되어있다.

.class-name {     border-bottom: 1px solid #fff;     font-size: 1rem; }

 

2. XHTML은 소문자를 사용하는 언어이다.

<img src="/img/people/harry-roberts.jpg" alt="A picture of Harry Roberts" class="userImageAvatar" />

케밥 케이스를 사용하는것이 표준적이며 일관성을 유지 할 수 있습니다!

 

border: none 대신 0을 사용하자.

평소에 별 생각 없이 none을 이용해왔다.

 

1. 모든 input 요소에 border styled 선언.
2. border: 0 // border-style: dashed를 선언하면 통하지 않음.
3. border: none //  border-style: dashed를 선언하면 통함.
4. border-style은 border: none보다 우선순위가 높아서 이런 현상이 발생.
5. border-style 다음에 border: none을 선언하면 캐스케이딩 원칙에 따라 dashed가 적용되지 않기는 함!

 

codePen에서 확인하기

중복을 최대한 줄이자.

const StyledComponents = styled.div`
    .warning {
        width: 100%;
        height: 120px;
        background: #ff4c01;
        border-radius: 10px;
    }


    .warning-message {
        width: 100%;
        height: 120px;
        font-size: 150%;
        background: #ff4c01;
        box-shadow: 1px 2px 5px #CCC;
        border-radius: 10px;
    }
`;

const App = () => {

     return (
		<StyledComponents>
			<div class="warning">⚠</div>
			<div class="warning-message">messages</div>
		</StyledComponents>
    )
}

css 선언에서 중복되는 스타일이 몇가지가 있습니다.

위 선언을 아래와 같이 개선 할 수 있습니다.

const StyledComponents = styled.div`
    .warning {
        width: 100%;
        height: 120px;
        background: #ff4c01;
        border-radius: 10px;
    }


    .warning-message {
        font-size: 150%;
        box-shadow: 1px 2px 5px #CCC;
    }
`;

const App = () => {

     return (
		<StyledComponents>
			<div class="warning">⚠</div>
			<div class="warning warning-message">messages</div>
		</StyledComponents>
    )
}

축약형을 사용하자.

padding, border, background ... 등 축약형이 사용 가능한 프로퍼티를 사용 할 때는 가능한 축약형을 사용한다.

 

/* Bad */ font-family: 'Open Sans', 'Noto Serif ', sans-serif; font-size: 100%; line-height: 1.6; padding-bottom: 2px; padding-left: 1px; padding-right: 1px; padding-top: 0; /* Good */ font: 100%/1.6 'Open Sans', 'Noto Serif ', sans-serif; padding: 0 1px 2px;

 

Mozilla에서 제안한 CSS 기술 순서

1. display (요소의 노출여부/표현방식)
2. list-style
3. position (위치/좌표)
4. float
5. clear
6. width / height (크기/여백)
7. padding / margin
8. border / background (윤곽/배경)
9. color / font (글자/정렬)
10. text-decoration
11. text-align / vertical-align
12. white-space
13. other text
14. content (내용)

Mozilla에서는 css 속성을 기술할 때 다음과 같은 순서로 작성할 것을 제안하고 있습니다.

이 순서를 지키는 것이 웹 브라우저의 퍼포먼스 향상이나 에러 방지에 영향을 주지 않습니다.

위 순서는 크게 4단계로 나눠볼 수 있다.

1. 레이아웃
2. 테두리/배경
3. 폰트
4. 기타

회사별로 다른 기술 가이드를 제안하고 있다.

구글은 위순서가 아닌 알파벳 순서로 하는것을 제안하고 있다.

 

취향별로 선택해서 사용하면 될  것 같다.

개인적으로는 알파벳 순서보다는 mozilla 에서 제안 한 방법이 뭔가 카테고리가 잘 나뉘어진 느낌이라 선호된다.

 

참조

CSS에서 캐멀케이스(camelCase)는 좋지 않다.

border: none과 border: 0의 차이

css개선을 위한 10가지 방법

NHN 코딩 컨벤션

구글 스타일 가이드

CSS 속성을 순서대로 정리하기