[TIL] 09.24 box shadow naming

요즘 디자이너와 css의 특정 값들을 지정하는 작업을 진행 하고 있다. 오늘은 box shadow의 값을 지정 하였는데 네이밍에 대해서 고민을 하게 되었다. 

해당 값은 우선 전역 변수로 지정해주어 className에 추가하면 적용이 되도록 만들 생각이였다. 

그래서 우선 혹시 다른 box-shadow 값을 사용하게 되어 네이밍이 겹치는걸 방지하기 위해 global css 에는

제일 앞에 "-- "를 붙여 주기로 정하였다. 

 

디자이너 우선 사용하기로한 shadow는 3가지였다. 

1. 1px 1px 8px 

2. 1px 1px 3px 

3. 0px -3px 6px

 

여기서 문제는 저 3번째 값이였다. 원래 기존 생각능 shadow-1 shadow-2 이런 방식으로 이름을 지어주여고 하였다. 하지먼 저 3번째 값은 마이너스 값이기에 다른 네이밍이 필요했다. 

우선은 shadow-reverse-1 이렇게 reverse 를 붙여 줄까 했지만 뭔가 한 네이밍으로 처리가 되길 원했기에 이건 패스 하였다. 

shadow-offset-X-1 이런 방식으로 처리를 할까 싶기도 했는데 너무 길어져서 패스 하였다. 이 방식도 마이너스 처리하기에도 애매하긴 했다. 

 

우선은 shadow-0 에 저 값을 지정을 해두었다. 추후 계속 생각을 해보아야 겠다.