애플뮤직에서 사용하는 CSS

https://music.apple.com/us/playlist/new-music-daily/pl.2b0e6e332fdf4b7a91164da3162127b5

New Music Daily on Apple Music

 

 

현재 회사에서 운영하고 있는 아주아주 오래된 사이트를 손좀 봐주려고 이리저리 디자인을 살짝 손좀 보고, 마크업과 css도 같이 비밀스럽게 정리해보고 있는 중에~

 

고민되는 것이 어떻게 하면 CSS의 변수를 잘 만들 수 있을까 하는 점이었음.

그래서 색상이름을 그대로 네이밍으로 사용하지 말고, primary, secondary와 같이 역할과 용도를 명확히 나타내며, 구체적이 아닌 추상적인 단위를 사용하고, 확장 가능한 네이밍으로 만들라고 하는데...

옛날옛적 디자인을 공통화시키기가 쉬... 쉽지가 않음;;;

 

아무튼 다른 사이트들은 어떻게 "잘" 정리가 되어있는지 벤치하던 도중, 애플 사이트를 들어가 코드를 보았는데,

개발자 도구에서 보니 뭔가 무지개처럼 이쁘게 정리되어 있는 것을 봄!

 

한 줄로 정리해보면...

깔.끔.

 

 

 

 

무지개를 만들어놓았다.

 

 

정리를 어떻게 해놓았는지 보는 것도 좋았지만,

네이밍 지을 때도 참고하기 좋을 것 같음!

 

 

apple_music.css

0.67MB