CSS 변수의 명명 규칙 고려하기

https://zenn.dev/catnose99/scraps/a1ec13e8a2d17350fbfe
지금까지 나는 CSS 변수의 명명 규칙을 생각해 보았다. (불평을 해도 좋은 자료를 찾지 못하기 때문이다.)지금 자신의 경험과 생각을 바탕으로 한 내용이기 때문에 조언이 있으면 댓글을 남겨주시면 감사하겠습니다.

값 유형별 접두어

CSS 변수 선언으로 가장 많은 기회는 색상(컬러 코드)이지만 높이와 글꼴 종류 등에도 활용할 수 있다.만약 아래와 같이 이렇게 명명된다면, 무엇에 관한 변수인지 알기 매우 어렵다.
역모드

:root {
  --blue: #3d3dff;
  --red: #e7edf3;
  --header: 60px;
}

색상은 색상으로, 높이라면 높이로 정리하는 게 좋아요.색상 변수면--color-◯◯, 높이 변수면--height-◯◯.
✨끈적끈적하다

:root {
  --color-blue: #3d3dff;
  --color-red: #e7edf3;
  --height-header: 60px;
}

색상 변수 추상적으로 요약

이후 색상 조정 가능성이 있어 --color-blue라는 변수를 사용하면'블루인데 실제로는 보라색'이란 일이 벌어진다.
프로젝트에 따라'초급','보조','오류'등 각 캐릭터의 이름을 붙이면 관리하기 쉬운 경우가 많다.
역시 빨간색--color-red이면 항목 내에서'오, 좋은 색이네'라는 무질서하게 쓰일 수 있지만 --color-error이라는 이름을 쓰면'오 잘못된 부분에만 쓰는 색'이라는 뜻을 전달할 수 있다.
✨끈적끈적하다

:root {
  --color-body: #333; /* 本文のテキスト用 */
  --color-primary: #529fff; /* プライマリー */
  --color-secondary: #3d3dff; /* セカンダリー */
  --color-error: #e7edf3; /* エラー用 */
}

하지만 색깔 자체가 변수명에 포함되면 이해하기 쉽다.예를 들어'회색'은 다양한 용도로 쓰이기 때문에'회색'이라는 이름을 쓰면 이해하기 쉽다.

:root {
  --color-body: #333; /* 本文用 */
  --color-primary: #529fff; /* プライマリー */
  --color-secondary: #3d3dff; /* セカンダリー */
  --color-error: #e7edf3; /* エラー用 */
  --color-gray: #EFEFEF;
  --color-gray-dark: #EFEFEF; /* 濃いめのグレー */
  --color-gray-light: #888; /* 明るめのグレー */
}

배경색과 텍스트 색을 분리하면 비교적 관리하기 쉽다

색상 변수가 증가하는 경우 배경색과 문자색을 구분하면 이해하기 쉽다.

:root {
  --color-gray: #555;
  --background-color-gray: #EFEFEF;
}

일관성 이 있으면 짧은 글씨 도 괜찮다

취향에 따라 정해진 부분--background-color이지만 잘 보기 어렵다는 의견도 있다.제 경우는 문자색--c-◯◯, 배경색--bg-◯◯입니다.
규칙을 정한 후 생략형을 사용하다

:root {
  --c-gray: #555;
  --bg-gray: #EFEFEF;
}

그래디언트를 변수로 설정합니다:.

:root {
  --c-gray: #555;
  --bg-gray: #EFEFEF;
  --bg-gradient-primary: linear-gradient(...);
}

사용하는 변수는 가능한 한 적게 유지한다

변수가 많을수록 색상 선택이 어려워집니다.또한 CSS 변수로 오른쪽 모드 <=> 어두운 모드를 전환하면 색상 종류가 많으면 대응이 번거롭습니다.
특히 회색의 종류가 많으면 어둠과 조명 두 가지 패턴에서 대비도를 확보하기 어려우니 주의해야 한다.