Tufte-css: CSS 서식

저는이 프로젝트에서 사용 된 포맷 표준을 선택했습니다. 왜냐하면 여는 중괄호 나 닫는 중괄호에 공간을 줄 필요가없고, 수평 엇갈림이 선택기 블록을 구별하는 데 유용한 시각적 / 정신적 버팀목이 될 수 있기 때문입니다.

나를 위해 "표준"CSS 들여 쓰기 _ 감소 _ 가독성을 높이기 때문에, 내가 볼 수있는 유일한 가치는 외부 프로젝트와의 코드 일관성을 높이는 것입니다. 내가 그다지 설득력이 없다고 생각하는 이유 중 하나는 다른 프로젝트에서 CSS에 많은 시간을 소비하지 않기 때문에 컨텍스트 전환과 관련된 정신적 오버 헤드가 없기 때문입니다. 익숙하지 않은 것이 다른 사람들에게 방해가됩니까? 내가 보지 못하는 "표준"들여 쓰기에 대한 다른 이점이 있습니까?

제 경우에는 제 프로젝트를 위해 많은 부분을 SCSS로 변환했으며 모든 것을 표준으로 다시 포맷해야하는 것이 고통 스러웠습니다. 나는 그것이 단지 경고를 없애기위한 것인지 아니면 오류를 일으켰는지 기억이 나지 않습니다. 중첩과 같은 것은 반드시 다시 포맷해야합니다.

또한 그렇지 않으면 더 쉽게 병합 될 수있는 업데이트를 위해 다시 돌아 오지 못하게합니다.

80 자 (매우 정상적 임)의 소프트 래핑을 사용하는 편집기에서 미디어 쿼리가있는 부분은 정말 지저분 해집니다.

내가 신음하고 싶은 건 아니야! :) 누구나 선호하는 서식 지정 방법을 사용하여 내 경험을 알려줍니다.

문안 인사,

@ yb66 SCSS 변환은 내 마음에 오지 않은 실질적인 이유입니다.

...하지만 추가 검사에서 http://csstoss.com/ 과 같은 도구가이 작업을 쉽게 수행하지 않습니까? 또는 모든 여는 중괄호를 선택하고 뒤에 개행을 추가 한 다음 모든 닫는 중괄호를 선택하고 앞에 개행을 추가 한 다음 파일을 다시 들여 쓰시겠습니까?

소프트 랩핑 문제도 알고 있습니다.

형식을 지정하고 주어진 linter / formatter 도구에 대한 사양을 제공하는 것이 매우 도움이 될 것이라고 생각합니다. 나는 그러한 도구를 지원하고 모든 병합 된 커밋과 함께 사용하면 실제로 사람들이 기여하고 끌어 오기 요청을하는 것이 더 쉬워 질 것이라고 생각합니다. 커밋하기 전에 *.css 파일에서 명령을 실행하고 완료 할 수있을 때 들여 쓰기와 중괄호를 조작하는 데 시간을 소비하는 사람은 아무도 없다고 생각합니다. 어떤 형식이 선택되었는지에 대해서는 무관심합니다. 단지 변경 사항을 커밋하기 전에 간단한 명령 줄 도구를 실행하여 만족시킬 수 있다는 점입니다.

한 가지 옵션은 stylelint.io 이지만 다른 옵션도 있습니다.

편집 : 문법

내 말은, 공룡이 지구를 배회하고 대서양을 건너 배로 커밋을 보냈을 때부터 README에 CSS 스타일 가이드 섹션이있었습니다. 그 표준을 시행하는 것에 대한 나의 정책은

1. 사람들이 따르기를 바랍니다
2. 상관없이 PR 수락
3. 부적합 코드를 수동으로 강제 강제

이 프로젝트는 300 줄 미만입니다. 대부분의 PR에있는 6-8 개의 중괄호를 수정하는 데 90 초가 걸리는 프로세스를 자동화하기 위해 명령 줄 도구 종속성을 도입 할 필요성을 정중하게 생각하지 않습니다.

나는 버그와 PR을 느리게 처리해 왔지만 스타일 문제가 아니라 외부 시간 압박과 많은 장치와 시나리오에서 테스트 변경의 복잡성으로 인한 것입니다.

내가 의도 한 원래 요점은 더 명확하지 않은 것에 대해 유감스럽게도, 코드를 읽기 위해 눈을 지그재그로 둘러 야한다는 것입니다.

현재 서식을 다른 두 옵션 A 및 B와 비교해 보겠습니다.

흐름:

.table-caption { float:right;
                 clear:right;
                 margin-right: -60%;
                 width: 50%;
                 margin-top: 0;
                 margin-bottom: 0;
                 font-size: 1.0rem;
                 line-height: 1.6; }

.sidenote-number { counter-increment: sidenote-counter; }

.sidenote-number:after, .sidenote:before { content: counter(sidenote-counter) " ";
                                           font-family: et-book-roman-old-style;
                                           position: relative;
                                           vertical-align: baseline; }

.sidenote-number:after { content: counter(sidenote-counter);
                         font-size: 1rem;
                         top: -0.5rem;
                         left: 0.1rem; }

.sidenote:before { content: counter(sidenote-counter) " ";
                   top: -0.5rem; }

blockquote .sidenote, blockquote .marginnote { margin-right: -82%;
                                               min-width: 59%;
                                               text-align: left; }    

p, footer, table, div.table-wrapper-small, div.supertable-wrapper > p, div.booktabs-wrapper { width: 55%; }

옵션 A

.table-caption               { float:right;
                               clear:right;
                               margin-right: -60%;
                               width: 50%;
                               margin-top: 0;
                               margin-bottom: 0;
                               font-size: 1.0rem;
                               line-height: 1.6; }

.sidenote-number             { counter-increment: sidenote-counter; }

.sidenote-number::after,
.sidenote::before            { content: counter(sidenote-counter) " ";
                               font-family: et-book-roman-old-style;
                               position: relative;
                               vertical-align: baseline; }

.sidenote-number::after      { content: counter(sidenote-counter);
                               font-size: 1rem;
                               top: -0.5rem;
                               left: 0.1rem; }

.sidenote::before            { content: counter(sidenote-counter) " ";
                               top: -0.5rem; }

blockquote .sidenote,
blockquote .marginnote       { margin-right: -82%;
                               min-width: 59%;
                               text-align: left; }    

p,
footer,
table,
div.table-wrapper-small,
div.supertable-wrapper > p,
div.booktabs-wrapper         { width: 55%; }

옵션 B :

.table-caption {
  float: right;
  clear: right;
  margin-right: -60%;
  width: 50%;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 1.0rem;
  line-height: 1.6;
}

.sidenote-number {
  counter-increment: sidenote-counter;
}

.sidenote-number::after,
.sidenote::before {
  content: counter(sidenote-counter) " ";
  font-family: et-book-roman-old-style;
  position: relative;
  vertical-align: baseline;
}

.sidenote-number::after {
  content: counter(sidenote-counter);
  font-size: 1rem;
  top: -0.5rem;
  left: 0.1rem;
}

.sidenote::before {
  content: counter(sidenote-counter) " ";
  top: -0.5rem;
}

blockquote .sidenote,
blockquote .marginnote {
  margin-right: -82%;
  min-width: 59%;
  text-align: left;
}

p,
footer,
table,
div.table-wrapper-small,
div.supertable-wrapper > p,
div.booktabs-wrapper {
  width: 55%;
}

내 인생에서 수십만 줄의 CSS를 쓴 나는 옵션 B를 읽는 데 가장 익숙하지만 옵션 A와 같은 케이스가 만들어지는 것을 절대적으로 볼 수 있습니다. 가독성면에서 현재 형식을 능가하지 않습니다. 물론, 당신이 지적했듯이, 그것은 <300 줄이기 때문에 어느 쪽이든 큰 문제가 아닙니다.

이 시점에서 저는 좀 더 전통적인 것으로 기울여서 더 읽기 쉽고 더 광범위한 커뮤니티의 CSS 규범에 부합합니다. 옵션 B는 사람들이 더 잘 알아볼 수있을 것 같습니다.

나도 옵션 B로 갈 것입니다. 사람이 읽을 수 있고 여러 포맷터 / 린터에 대해 기계가 읽을 수있는 형식을 지정하는 방법이 없습니까?

드디어 이것에 대해 알아 봤습니다. 이 문제를 제기 해주셔서 Adam과 2 센트를 추가 해주신 모든 분들께 감사드립니다.

잠시 시간 이 있으면 커밋 (https://github.com/edwardtufte/tufte-css/commit/bfbe3b5c50ee450ba09122f1506233edf6a97ffe)을 살펴보고 A) 들여 쓰기 또는 진술을 추가로 표준화 할 수 있는지 알려주세요. B) 구현 변경 사항이 있습니다. (샘플 문서를 수동으로 스크롤하는 것 외에는 변경 사항을 테스트하는 방법을 구현하지 않았습니다.)

@daveliepmann이보기 좋네요. 이런 오래된 문제에 직면 할 수있는 에너지를 찾는 것이 얼마나 힘든지 알고 있으므로 그 노력에 감사드립니다! 내 블로그를 새 사이트에 다시 게시하는 중이므로 이러한 변경 사항을 사용하고 문제가 있으면 알려 드리겠습니다.

@daveliepmann 멋지네요 . 이렇게 해주셔서 감사합니다.

@ yb66 그래 ... SCSS가 어딘가에 있습니까? github에서? HTML MIME 부분을 표시 할 때 스타일을 재정의 할 수있는 이메일 도구를 사용하고 있으며 SCSS를 사용합니다. 이를 위해 Tufte를 사용하고 싶습니다. 누군가 이미 SCSS 변환을 수행했다면 훨씬 쉽게 만들 수 있습니다.

@serussell CSS가 유효한 SCSS가 아닌가요?

@adamschwartz :

린터를 사용하는 것이 좋습니다! 여기서 CSS를 사용하면 Stylelint가 크리스마스처럼 빛납니다. 그것들 중 일부는 스타일의 문제이지만 우리가 쉽게 제거 할 수있는 많은 불일치도 있습니다.