Sass Scss css

프린이·2021년 9월 9일
0

스타일 작업 가이드

기본 원칙

  • CSS 작성에는 다음과 같은 기본 원칙이 적용됩니다.
  • 관련있는 선택자는 동일한 라인에 작성하고 관련 없는 선택자는 새로운 라인에 작성합니다.
  • 선택자와 여는 브레이스 ({) 사이에 공백을 한 칸 둡니다.
  • 여는 브레이스와 동일한 라인에 특성-값을 적지 않습니다.
  • 특성과 값은 동일 라인에 작성합니다.
  • 특성 작성시 특성 앞에 공백을 두 칸 둡니다.
  • 값 작성시 콜론(:) 사이에 공백을 한 칸 둡니다.
  • 특성-값을 작성한 이후 세미 콜론(;)을 추가합니다.
  • 특성-값은 하나의 라인에 하나만 작성하고 개행 후 같은 들여쓰기 라인에 다른 특성-값을 작성합니다.
  • 닫는 브레이스(})는 개행 후 선택자와 동일한 들여쓰기 위치에 작성합니다.
  • 새로운 CSS block을 작성하는 경우 윗 라인에 다른 선언이 존재 한다면 그 사이에 공백 라인을 한 줄 둡니다.
  • 다른 선언 내부에 선택자를 추가한 경우 들여쓰기 공백 두 칸을 두고 선택자를 작성합니다.

적용 예시

class 기반 스타일 작업

선택자로 class를 사용합니다.

인라인 스타일은 적용 우선 순위가 높기 때문에 class 기반 스타일에서는 어떤 방법으로도 오버라이드 할 수 없습니다. 마찬가지이유로 class 대신 id를 사용하는 것도 허용하지 않습니다.

Component Style Scoped

스타일 언어는 사용하는 프레임워크에 따라 다를 수 있지만 scoped 특성만은 반드시 넣어줍니다. scoped 대신 namespace를 지정하는 방법도 있지만 scoped를 넣는 방법을 놔두고 굳이 그렇게 할 이유가 없습니다.

변수 사용

모던 웹 UI 프레임워크는 Sass등의 전처기리를 사용하여 테마를 구성하고 각종 컴포넌트를 생성할 때 필요한 값들을 변수에 저장하여 사용하도록 설계되어 있습니다. 즉 변수 하나를 변경하면 관련된 모든 컴포넌트에서 수치가 변경되므로 일괄적인 작업이 이루어짐을 뜻합니다.

설계 당시에서부터 이와 같은 특성을 이해하고 통제 가능한 프로젝트를 구성해야 합니다. 컴포넌트 설계부터 치밀하게 이루어진 프런트 엔드 프로젝트는 해당 컴포넌트를 호출하는 쪽에서는 해당 컴포넌트의 스타일을 임의로 변경해서는 안됩니다. 모든 스타일은 개발 초기에 정해진 원칙에 따라 컴포넌트에 이미 적용되어 있기 때문입니다. 설계에 관련해서는 따로 문서를 작성할 예정이지만 매우 중요한 원칙이므로 미리 언급합니다.

모든 색상 및 사이즈 등은 미리 정의된 값이 없는지 확인하고 있다면 해당 변수를 사용하도록 합니다.

또한 별다른 이유 없이 새로운 색상을 사용, 생성해서는 안되며 새롭게 추가된 경우 변수에 할당하여 프로젝트 전체에서 사용할 수 있도록 해야 합니다.

CSS 중첩 깊이

Sass 문법을 사용하다보면 너무 깊은 단계까지 indent가 들어가는 경우가 있습니다. 구조상으로는 합리적일 수 있으나 가독성면에서 좋지 않고, 무엇보다 선택자 우선순위 문제로 낮은 중첩 단계를 사용해서 해당 셀렉터를 변경할 수 없는 문제를 만들게 되므로 2단계 이상의 중첩은 피하는 것이 좋습니다.

https://developer.mozilla.org/ko/docs/Web/CSS/Specificity

스타일 관련 문서 공유

Sass 관련 사용법 숙지

profile
프론트 개발자

0개의 댓글