이 글은 다음을 번역했습니다. [https://rhodesmill.org/brandon/2011/concentric-css/]
내 마음이 유별나게 시적이긴 하지만, 각 선언 블록 내에서 그들의 CSS 프로퍼티들을 알파벳 순으로 정렬하라는 일반적인 충고를 따를 때 사람들이 어떻게 그들의 CSS 규칙을 그리고 있는지 모르겠다.
(이 스택오버플로우 답처럼)
이 알파벳정렬의 주 대안은 box 모델을 기반한다고 주장하는 CSS 프로퍼티 정렬같다. 하지만 이건 슬프게도 무모한 정렬로 프로퍼티들과 씨름하는 것이다. display와 position으로 시작해보자, 이것들은 좋은 시작이지만 금방 height와 width이 따라붙는다. - 비록 이 수치들이 오직 박스의 제일 깊은 수준에 자리잡고 있는 content에 적용된다고한다고 해도! 그 다음 정렬은 계속해서 스킵하고, 박스의 밖으로 넘어가서 margin에 대해서 이야기한다음에, 거의 안쪽으로 뛰어들어가서 패딩에 대해서 이야기한다. 마침내, border들 맞이한다. 비록 브라우저가 렌더링할 때 margin과 padding사이에 실제로 끼일지라도 말이다
레퍼런스에선, css 스탠다드 자체로 그려진 박스모델이 나타나 있다.
width와 height가 오직 content에만 적용되고 패딩과 다른 것들에 적용되지 않는 다는 사실은 CSS에선 중요한 이슈다. -
신입들에게 많은 슬픔을 안겨주는 이슈이다. width와 height 박스 자체의 구조를 반영해서 프로퍼티들을 선언하는 정렬이 모두의 정신건강을 위해 필요하다. 박스 자체를 감싸고 있는 장식 뒤에 오는 width과 height도 포함해서 말이다.
나는 이 결과를 Concentric CSS라고 부르고 기본 템플린은 다음과 같다.
{
display: ; /* 어디서 어떻게 박스가 위치해있는가 */
position: ;
float: ;
clear: ;
visibility: ; /* 박스가 어떻게 보이는가 */
opacity: ;
z-index: ;
margin: ; /* 박스모델의 레이어들 */
outline: ;
border: ;
background: ;
padding: ;
width: ; /* 콘텐트 수치들과 스크롤바들 */
height: ;
overflow: ;
color: ; /* 텍스트들 */
text: ;
font: ;
}놀랍지 않은가? borer와 paading사이에 background을 나중에 놓지않고 가운데 끼웠다. 내 이유는 padding은 실제로 배경색을 칠하게되는 박스의 첫 부분이기 때문이다. - 그 밑에 있는 것들이 background color를 가지게 하기 위해서 background를 배치했다, 반면에 위에 있는 모든 것들은 자신의 color(borders) 나 transparent(margin)을 가지도록했다.
overflow 프로퍼티를 어디에 놓아야 할지에 대한 내 선택은 확실치 못하다. 현재 위치는 종종 너무 작은 height와 width에 촉발되는 사실에 좌우된다. - 그래서 height와 width가 너무 좁을 경우 어떤 일이 일어나야 하는지 알려주는 "else 절" 역할을 맡는 경우가 많으므로, 프로퍼티들이 그 옆에 있는 것이 타당하다. 하지만 오버플로우 결과 중 하나로 스크롤바가 상자 주위에 나타날 수 있으며, border들과 padding사이에 overflow를 올려놓는 논쟁이 일어날 수 있다. 왜냐하면 바로 표준문서에선 따르면 스크롤바가 그려져야하는 장소이기 때문이다.
완성도를 위해, 내가 선호하는 프로퍼티 정렬을 위에 있는 스케치들보다 충분히 철처한 프로퍼티들의 리스트들을 style.css에 작성했다. 나는 의견과 개선을 좋아한다. 특히 이 정렬이 박스 모델을 훨씬 잘 반영하게 할 것이다! 내 CSS가 숙련된 전문가뿐 아니라 주니어들에게도 가능한 많은 의미가 되기를 바란다!
