반응형
https://music.apple.com/us/playlist/new-music-daily/pl.2b0e6e332fdf4b7a91164da3162127b5
New Music Daily on Apple Music
Playlist · 114 Songs
music.apple.com
현재 회사에서 운영하고 있는 아주아주 오래된 사이트를 손좀 봐주려고 이리저리 디자인을 살짝 손좀 보고, 마크업과 css도 같이 비밀스럽게 정리해보고 있는 중에~
고민되는 것이 어떻게 하면 CSS의 변수를 잘 만들 수 있을까 하는 점이었음.
그래서 색상이름을 그대로 네이밍으로 사용하지 말고, primary, secondary와 같이 역할과 용도를 명확히 나타내며, 구체적이 아닌 추상적인 단위를 사용하고, 확장 가능한 네이밍으로 만들라고 하는데...
옛날옛적 디자인을 공통화시키기가 쉬... 쉽지가 않음;;;
아무튼 다른 사이트들은 어떻게 "잘" 정리가 되어있는지 벤치하던 도중, 애플 사이트를 들어가 코드를 보았는데,
개발자 도구에서 보니 뭔가 무지개처럼 이쁘게 정리되어 있는 것을 봄!
한 줄로 정리해보면...
깔.끔.

정리를 어떻게 해놓았는지 보는 것도 좋았지만,
네이밍 지을 때도 참고하기 좋을 것 같음!
728x90
반응형
'웹 > CSS' 카테고리의 다른 글
| CDN을 이용한 "pretendard variable" 웹폰트 적용 (성능 최적화 버전) (0) | 2025.04.18 |
|---|---|
| 웹폰트 사용 시 @import와 <link> 방식 중 어떤 걸 써야할까? (0) | 2025.04.18 |
| [css] & nesting 선택자 (0) | 2025.02.13 |
| css로 요소 1개인지 체크방법 (0) | 2024.01.31 |
| 갤럭시 폴드의 실제 가로 해상도는 345px (0) | 2024.01.29 |
| 마우스 커서를 이미지로 변경하기 (0) | 2023.09.22 |
| [CSS] ":nth-child()"로 몇 번부터 몇 번까지 선택하기 (0) | 2023.08.21 |
| [css] 텍스트 안에 그라데이션 배경 움직여보기 (0) | 2023.06.08 |
댓글