Freecodecamp: freeCodeCamp의 CSS 스타일 가이드 만들기

에 만든 2018년 01월 08일 · 47코멘트 · 출처: freeCodeCamp/freeCodeCamp

코드베이스의 전반적인 유지 관리를 개선하기 위해 freeCodeCamp의 CSS 스타일 가이드를 제안하고 싶습니다. FreeCodeCamp에는 많은 기여자가 있으며 모든 사람이 CSS를 다른 방식으로 작성합니다. 그리고 CSS를 작성하는 다양한 방법을 추적하기가 어렵습니다.

초기 권장 사항 :

코멘트

주석 추가, 새 LESS 파일을 시작할 때 개발자가 작업중인 내용을 알 수 있도록 코드 블록과 관련된 새 섹션을 시작할 때 주석을 추가하면 가독성에 도움이됩니다. 아래의 예를 참조하십시오. 이러한 스타일의 주석은 코드베이스에 걸쳐 있으므로 새로운 스타일을 제안하는 대신 계속 작성하고 싶습니다)
예 1-새 LESS 파일을 시작할 때 :

//
// Navigation
// --------------------

예 2-탐색과 관련된 섹션을 추가 할 때

//
// Navigation - Mobile Styles
// ------------------------------

간격

속성 뒤에 공백을 추가하면 이러한 코드베이스를 읽고 유지 관리하는 것이 훨씬 쉽습니다. 아래의 예를 참조하십시오.
예 1-올바른 방법

p {
  color: #fff;
}

예 2-잘못된 방법
뭐가 잘못 되었 니?
콜론 뒤에 공백 없음

p {
  color:#fff;
}

그림 물감

대문자 대신 소문자를 선호합니다. 이제 CSS 전반에 걸쳐 기여자들이 두 가지를 혼합하고 있습니다. 소문자는 쓰기가 빠르고 읽기 쉽습니다. CSS에 일관된 규칙이있는 경우 다시 전반적인 유지 관리 가능성이 향상됩니다. 또한 가능하면 16 진수 값을 줄이십시오. 아래의 예를 참조하십시오.
예 1-올바른 방법

p {
  color: #fff;
}

예 2-잘못된 방법
뭐가 잘못 되었 니?
단축되지 않은 대문자 16 진수 값

p {
  color: #FFFFFF;
}

RGBA 또는 RGB 색상

값 뒤에 공백을 추가하면 가독성이 향상됩니다. 아래의 예를 참조하십시오.
예 1-올바른 방법

p {
  color: rgba(123, 123, 0, 0.1);
}

예 2-잘못된 방법
뭐가 잘못 되었 니?
값 뒤에 공백 없음

p {
  color: rgba(123,123,0,0.1);
}

0 선언시 단위 없음

box-shadow와 같은 속성에서 0 값을 설정하면 단위 추가를 피해야합니다. 아래 예를 참조하십시오.
예 1-올바른 방법

p {
  box-shadow: 1px 1px 0 rgb(0, 0, 0);
}

예 2-잘못된 방법
뭐가 잘못 되었 니?
0 이후 단위

p {
  box-shadow: 1px 1px 0px rgb(0, 0, 0);
}

부동 숫자 피하기

가능하다면 CSS에서 다른 크기로 부동 숫자를 사용하지 않는 것이 좋습니다. 이는 약간 다르게 렌더링 될 수 있기 때문입니다. 아래 첨부 된 링크를 참조하십시오.

브라우저 반올림

help wanted docs on the roadmap

출처

tomasvn

👍1

가장 유용한 댓글

@raisedadead @tomasvn 나에 따르면 CSS 스타일 가이드를 만들고이를 고수하는 과정은 장기적으로 유용한 결과를 얻지 못할 것입니다. React, Yarn, Babel 및 기타 많은 오픈 소스 프로젝트는 Prettier 및 기타 유사한 확장을 CSS 스타일 형식으로 사용합니다.

스타일 가이드를 만드는 대신. 기여자에게 IDE / 코드 편집기에 Prettier 을 설치하라고 알려야합니다.
@raisedadead 이것에 대한 생각?

vkWeb 에 2018년 01월 08일

👍6

모든 47 댓글

@raisedadead 어떻게 생각하세요?

tomasvn 에 2018년 01월 08일

감사합니다. 보풀이 일지 않는 방법을 알고 계십니까? 린터를 사용하십니까?

raisedadead 에 2018년 01월 08일

스타일 가이드를 만드는 대신. 기여자에게 IDE / 코드 편집기에 Prettier 을 설치하라고 알려야합니다.
@raisedadead 이것에 대한 생각?

vkWeb 에 2018년 01월 08일

👍6

감사합니다. 보풀이 일지 않는 방법을 알고 계십니까? 린터를 사용하십니까?

예쁘게 잘 작동합니다;). CSS 스타일 규칙을 위반하면 경고합니다.

vkWeb 에 2018년 01월 08일

스타일 가이드를 만드는 대신. 기여자에게 IDE / 코드 편집기에 Prettier를 설치하라고 알려야합니다.

문제에서 숨는 것은 누구에게도 도움이되지 않았습니다 ... 😅!

나는 포매터를 피하고 대신 린터를 사용하는 것을 강력히 선호합니다. 자동화는 멋지고 쉬운 것처럼 들리지만 표준 코드 작성의 요점을 제거합니다.

IMHO, 우리는 학습을 중심으로 한 커뮤니티이기 때문에 린터가 가리키는 코드 스타일로 문제를 수정하는 것을 주저해서는 안됩니다.

또한 Prettier는 _Opinionated_ Code Formatter입니다.

raisedadead 에 2018년 01월 08일

👍1

나에 따르면 CSS 스타일 가이드를 만들고이를 고수하는 과정은 장기적으로 유용한 결과를 얻지 못할 것입니다.

나는 이것은 잘못된 주장이라고 생각합니다 (통계가 있으면 틀렸다는 것을 자유롭게 증명하십시오).

Airbnb JS 스타일 가이드, JS Standard 등을 확인하면 표준 코드를 작성하는 도우미가 있으며 수천 개의 회사와 개발자가 매일 사용하고 있습니다.

raisedadead 에 2018년 01월 08일

@raisedadead 우리는 문제에서 숨어 있지 않습니다 ...! 우리는 linters를 사용할 수 있지만 Prettier를 사용하여 단일 키 바인딩으로 동일한 작업을 수행 할 수 있습니다. 왜 우리가 그것에 대해 장기적으로 시도하고 있습니까?

vkWeb 에 2018년 01월 08일

나는 이것은 잘못된 주장이라고 생각합니다 (통계가 있으면 틀렸다는 것을 자유롭게 증명하십시오).
Airbnb JS 스타일 가이드, JS Standard 등을 확인하면 표준 코드를 작성하는 도우미가 있으며 매일 수천 개의 회사와 개발자가 사용하고 있습니다.

나는 이것에 대해 당신과 강력히 동의합니다! 그들의 JS 스타일 가이드는 정말 도움이됩니다.

vkWeb 에 2018년 01월 08일

우리는 문제에서 벗어나지 않고있다 ...! 우리는 linters를 사용할 수 있지만 Prettier를 사용하여 단일 키 바인딩으로 동일한 작업을 수행 할 수 있습니다. 왜 우리가 그것에 대해 장기적으로 시도하고 있습니까?

왜냐하면 우리는 표준 코드를 작성하고 싶습니까? 기여자는 원하는 도구를 자유롭게 사용할 수 있지만 가이드가 필요하지 않다는 의미는 아닙니다.

raisedadead 에 2018년 01월 08일

어쨌든, 가이드에 대한 건설적인 피드백을 위해이 스레드를 유지하겠습니다. 대신 채팅에서 항상 토론을 할 수 있습니다.

@tomasvn RFC는 흥미로워 보이며 피드백에 관심이 있으시기 때문에 우리가 영감을 얻을 수있는 확립 된 스타일 가이드와 도구를 찾아 보는 것이 가능할 것이라고 생각하십니까?

raisedadead 에 2018년 01월 08일

왜냐하면 우리는 표준 코드를 작성하고 싶습니까? 기여자는 원하는 도구를 자유롭게 사용할 수 있지만 가이드가 필요하지 않다는 의미는 아닙니다.

나도 이것에 대해 당신과 함께 있습니다. 좋습니다. 스타일 가이드를 사용하여 stylelint 를 린터로 사용할 수 있습니다.

vkWeb 에 2018년 01월 08일

@raisedadead stylelint는 괜찮아 보입니다

tomasvn 에 2018년 01월 08일

👍2

@tomasvn 방금 새로운 커리큘럼과 학습 플랫폼을 출시했습니다. 아직도이 일을 돕고 싶으십니까?

우리의 모든 CSS에는 좋은 리팩터링이 필요합니다. 이것은 스타일 가이드를 만들뿐만 아니라이를 프로젝트에 즉시 적용하고 모든 리포지토리가 이에 부합하는지 확인하는 좋은 기회가 될 것입니다.

QuincyLarson 에 2018년 06월 03일

@QuincyLarson 물론입니다. freecodecamp는 꽤 큰 코드베이스이기 때문에 시간을내어 CSS를 리팩토링하는 데 도움을 줄 수 있습니다.

tomasvn 에 2018년 06월 03일

@tomasvn 굉장 할 것입니다!

freeCodeCamp에는 그다지 많은 CSS가 없습니다. freeCodeCamp의 CSS는 주로 "main.less"에 있습니다. 그리고 우리는 Bootstrap 3.0을 사용하고 있습니다.

우리는 결국 Bootstrap 4.0으로 이동하거나 Flexbox를 사용하도록 CSS를 다시 작성할 수 있습니다. 그러나 당분간 우리는 여러 애플리케이션에서 React Bootstrap을 사용하고 있으며 현재 Bootstrap 3.0에 고정되어 있습니다. 따라서 main.less에있는 기존 사용자 정의 CSS를 정리하고 중복을 줄이고 논리적으로 정렬하는 것이 좋습니다.

QuincyLarson 에 2018년 06월 03일

@QuincyLarson 이 가져 왔고 main.less는 client / less / main.less에 있습니다. 이것이 올바른 파일입니까?

tomasvn 에 2018년 06월 03일

@tomasvn 양해

QuincyLarson 에 2018년 06월 16일

@tomasvn 이것에 도움이 필요하십니까? 기꺼이 기여하겠습니다

borisyordanov 에 2018년 08월 04일

@tomasvn 아직이 작업을 시작할 기회가 있었습니까? 그렇지 않다면 @borisyordanov 예-우리는 이것에 대한 귀하의 기여를 환영합니다.

QuincyLarson 에 2018년 08월 18일

@borisyordanov 지연 죄송합니다. Windows에서 dev env를 실행하는 데 몇 가지 문제가 있으므로 시작할 수 있습니다. 내 물건을 고칠 때 리팩토링하는 데 도움이 될 수 있습니다.

tomasvn 에 2018년 08월 19일

@tomasvn 내가 당신에게 이메일을 보냈습니다. 채팅에서 만나서 이것을 계획하겠습니다. 프로젝트를 실행하는 데 문제가 있으면 가이드 를 살펴 보거나 Gitter에서 도움을 요청 하는 것이 좋습니다.

borisyordanov 에 2018년 08월 27일

여전히 필요한 경우이 작업을 도와 드릴 수 있습니다.

Jgriebel1990 에 2018년 10월 31일

@ Jgriebel1990 나는

borisyordanov 에 2018년 10월 31일

@ jgriebel1990 자유롭게 만하면 됩니다.

tomasvn 에 2018년 10월 31일

@tomasvn @ Jgriebel1990 과 @borisyordanov가이 문제를 해결할 기회를 얻지 못한 것처럼 들립니다.

QuincyLarson 에 2019년 01월 02일

@QuincyLarson Windows에서 작동하도록 노력하겠습니다. 여전히 실행 문제가 있습니다. 환경을 설정할 수없는 경우 스레드를 닫으십시오.

tomasvn 에 2019년 01월 15일

@tomasvn 걱정하지 마세요-로컬에서 실행되는 데 행운이 있습니까?

QuincyLarson 에 2019년 01월 24일

raisedadead 에 2019년 02월 07일

@QuincyLarson 운이

tomasvn 에 2019년 02월 09일

@tomasvn 로컬로 설정할 때 어떤 문제가 발생 했습니까?

Nirajn2311 에 2019년 02월 09일

@tomasvn이 읽어주십시오 - https://github.com/freeCodeCamp/freeCodeCamp/blob/master/docs/how-to-setup-freecodecamp-locally.md

borisyordanov 에 2019년 02월 11일

@raisedadead https://github.com/freeCodeCamp/design-style-guide 업데이트로이 문제가 필요합니까?

RandellDawson 에 2019년 05월 03일

로드맵에 더 많이 있습니다. 결국 UI 구성 요소의 중심 리소스가 될 것입니다.

raisedadead 에 2019년 05월 03일

CSS 테두리 스타일
border-style 속성은 표시 할 테두리 종류를 지정합니다.

다음 값이 허용됩니다.

dots-점선 테두리를 정의합니다.
파선-파선 테두리를 정의합니다.
solid-실선 테두리를 정의합니다.
double-이중 테두리를 정의합니다.
그루브-3D 그루브 테두리를 정의합니다. 효과는 테두리 색상 값에 따라 다릅니다.
융기-3D 융기 테두리를 정의합니다. 효과는 테두리 색상 값에 따라 다릅니다.
삽입-3D 삽입 테두리를 정의합니다. 효과는 테두리 색상 값에 따라 다릅니다.
outset-3D outset 테두리를 정의합니다. 효과는 테두리 색상 값에 따라 다릅니다.
none-테두리를 정의하지 않습니다.
hidden-숨겨진 테두리를 정의합니다.
border-style 속성은 1-4 개의 값을 가질 수 있습니다 (위쪽 테두리, 오른쪽 테두리, 아래쪽 테두리 및 왼쪽 테두리).

예-
p.dotted {border-style: dotted;} p.dashed {border-style: dashed;} p.solid {border-style: solid;} p.double {border-style: double;} p.groove {border-style: groove;} p.ridge {border-style: ridge;} p.inset {border-style: inset;} p.outset {border-style: outset;} p.none {border-style: none;} p.hidden {border-style: hidden;} p.mix {border-style: dotted dashed solid double;}

rohaanmd 에 2019년 10월 02일

야! 이것에 대한 진전은 무엇입니까? 도와 드릴 수 있습니다!

ManasMahanand 에 2020년 10월 04일

@ManasMahanand , 관심을 가져 주셔서 감사합니다.
사용 가능한 CSS 린터를 살펴보고 비교하여 stylelint보다 더 나은 것이 있는지 확인하는 것이 좋습니다.
그런 다음 리포지토리에 린터를 추가하고 CSS 파일을 변경하여 리포지토리에 린팅 오류가 없는지 확인합니다.

ahmadabdolsaheb 에 2020년 10월 05일

트윗 담아 가기

ManasMahanand 에 2020년 10월 06일

👍1

@ahmadabdolsaheb 레포에 추가한다는 의미가 무엇입니까?

eslint가 이미있는 것처럼 linter를 종속성으로 설치 하시겠습니까?

아니면 github 자체에 테스트를 설치하는 방법이 있으므로 스타일 가이드를 따르지 않는 한 병합을 허용하지 않습니까?