많은 CSS 코드를 작성하면 둘 이상의 오류가 발생할 수 있습니다. CSS 작성 오류를 방지하기 위해 일부 도구가 필요할 수 있습니다.
어쩌면 때로는 실수가 실제로 버그 일 수도 있습니다. 불일치 또는 불분명 한 코드 스타일은 단순히 성급한 것에 의해 발생할 수도 있습니다. 어쩌면 그들 중 많은 사람들이 사소한 것처럼 보일 것입니다 (당신의 성격에 따라 다름) 코드 기반이 커지고 시간이 축적됨에 따라 많은 사람들이 사용할 때 추악한 것들을 만들 것입니다. 사물의 결과는 당신이 상상할 수있는 것이 아닙니다.
당신은 자신을 통제하려고 노력합니다. 동료들은 또한 실수를 적시에 자유롭게 바로 잡을 때 도움을줍니다. 그러나 당신과 당신의 동료들은 모두 실수의 제작자이므로 결국에는 필연적으로 어느 정도까지 실패합니다. 나중에 귀하 또는 다른 사람은 귀하의 페이지의 CSS 오류로 인한 문제를 해결합니다.
당신과 당신의 동료들은 부끄러워서 실수에 대해 논의하는 것을 좋아하지 않습니다. 때때로 실망 스럽거나 감정적으로 파열 될 수도 있습니다. 특정 사양은 때때로 일관된 쓰기 스타일과 같은 코드 기반의 유지 관리에 도움이되며 수동으로 실행될 때 약간 지루하고 지루해 보일 수 있습니다. 그렇지 않으면 그들은 당신의 평범한 사랑의 요소와 완고함을 보여줄 것입니다.
또한 코드를 검토하기를 기다리는 대신 적시에 오류를 수정하고 다른 사람들이 오류를 지적하고 직접 수정하고 그러한 오류가 다시 없다고 선언 할 수 있습니다. CSS 오류가 발생하면 적시에 피드백을하면 많은 시간을 절약 할 수 있습니다.
필요한 것은 오류를 방지하는 기계입니다
오류가 발생하는 것을 방지하고 CSS를 이해하고 이해할 수있는 기계가 필요합니다. 의도, 선호도, 아이디어 및 약점.
이러한 기계에는 한계가 있습니다. 모든 것이 완벽하지 않습니다. 그러나이 한계는 당신과 당신의 동료들과 다릅니다. 오류를 방지 할 수있는 한 오류를 계속 방지하면서 지칠 줄 모르고 일할 수 있습니다. 동시에 귀하와 동료는 항상 기계를 개선하고 기능을 확장하며 한계를 약화시킬 수 있습니다. 그것은 오픈 소스이며, 전 세계 사람들이 참여하여 자신의 역할을 수행 할 수 있습니다.
다른 사람과 마찬가지로 CSS 저자는 라이터가 필요합니다
우리는 오류를 "라이터"를 방지하는이 프로그램을 호출합니다. JavaScript에는 몇 가지 더 나은 라이터가 있습니다. 특히 Eslint는 기적적으로 작동하여 좋은 린터가 매우 유용하다는 것을 보여줍니다. 그러나 CSS에서 우리는 운이 좋지 않습니다. 우리의 선택은 매우 제한적입니다. Ruby 기반 SCSS Lint와 특수 전처리 및 이전 CSS Lint.
그러나 이것은 게시물이 나타나기 전이었습니다. 또한 PostCSS는보다 대화 형 CSS 도구를 구축하는 몇 가지 방법을 제공합니다. 분석 및 작동을 위해 모든 CSS 클래스 구문을 AST (Abstract Syntax Tree) 플러그인으로 구문 분석 할 수 있습니다. Custom Parser를 사용하면 Postcss는 불규칙한 무효 패턴 (예 : // 댓글)을 처리 할 수도 있습니다.
성숙 조건은 이미 PostCS로 구동되고 SCSS-Lint 및 Eslint의 최고의 기능에서 영감을 얻은보다 강력한 기능을 갖춘 라이터를 생성 할 수 있습니다.
이 프로젝트에서 몇 명의 친구들과 함께 일했으며 이제 우리가 개발 한 도구 인 Stylelint를 소개하기 시작했습니다.
스타일링으로 할 수있는 일
다음은 Stylelint에서 시도한 기능의 요약이며 100 개가 넘는 규칙과 확장 성이 있습니다.
이 시점에서, 당신이 약간의 참을성이 없다는 것을 알게된다면 ( "좋아요 : 나는 스타일 린트가 기적적인 작업 효과를 가질 것이라고 믿습니다. 너무 많은 요약이 필요하지 않습니다.")). 다음 섹션으로 건너 뛰십시오. 여기에서 몇 가지 문제를 설명하고 몇 가지 팁을 제공합니다.
오류 캡처
일부 스타일 린트 규칙은 철자 오류 또는 화가 나 멍청한 눈으로 생기는 생략과 같은 명백한 실수를 식별하도록 설계되었습니다. 예를 들어, 빈 블록, 유효하지 않은 16 진수 값, 중복 선택기, 이름없는 애니메이션 이름 및 잘못된 선형 구배 구문을 비활성화 할 수 있습니다.
다른 규칙은 더 미묘한 실수를 저지르기 위해 최선을 다하는 것입니다. 규칙은 다음과 같습니다. 속성 동료 (예 : margin-top margin )을 사용하면 경고가 발행되므로 태만으로 인해 발생할 수 있습니다. 또한, 혼돈이 발생할 때, 규칙 A가 규칙 B 앞에 나타나면 규칙 A의 선택기가 우선 순위가 높기 때문에 (예 : 규칙 A는 .foo.bar{・・・} 이고 규칙 B는 .foo{・・・} ). 이것은 매우 어려운 상황입니다.
또한 PostCSS Doiuse 플러그인을 사용하여 브라우저 가이 스타일을 지원하는지 확인하는 규칙도 있습니다. 다른 하나는 CSS-Colorguard 플러그인을 사용하여 사용을 혼동하지 않도록 색상 유사성을 자극합니다. (참고 : 이것은 PostCS를 기반으로 한 스타일 린트의 주요 장점 중 하나입니다. 다른 PostCSS 플러그인과 비교할 때 스타일 린트는 거의 노력하지 않을 수 있습니다.)
모범 사례를 시행합니다
스타일 시트에서 시스템 메소드를 사용하거나 코드에 대한 스타일 안내서가있는 경우 이러한 패턴을 금지해야합니다. 스타일 린트는 이미 이러한 기능을 제공합니다.
먼저 선택기를 열심히 제어해야합니다. 스타일 린트를 사용하면 특정 특이성을 초과하는 선택기를 비활성화하거나 중첩 깊이에 대한 제한을 설정할 수 있습니다. 카테고리 선택기 (예 : ID가없는 선택기 등)를 비활성화하고 나머지 지역의 규칙을 명명하기 위해 정기적 인 표현식을 사용할 수 있습니다.
브라우저가 지원하지 않는 사용을 금지하거나 !important 브라우저 해킹을 금지 할 수 있습니다. autopRefixer (또는 당신이해야한다)를 사용하는 경우 소스 스타일 시트에서 공급 업체 접두사 사용을 비활성화 할 수 있습니다.
보다 엄격 해지려면 절대적인 일관성을 보장하기 위해 구성에 시간을 할애 할 수 있습니다. 스타일 시트 속성 순서를 시행하고 블랙리스트 및 화이트리스트의 속성, 값, 기능 및 단위를 제공 할 수 있습니다.
코드 스타일 규칙을 실행합니다
Stylelint에는 코드 스타일을 자동으로 실행하기위한 규칙이 있으므로 귀하와 팀원들은 적극적으로 설정할 필요가 없습니다. 우리는 이러한 규칙을보다 포괄적이고 유연하게 만들기 위해 노력하고 있습니다.
이 규칙은 주로 공간을 대상으로하지만 인용 표시, 상단 및 소문자, 소수 전에 제로를 쓰기, 키워드 사용, 값 철자 등과 같은 다른 세부 사항을 대상으로합니다.
당신과 당신의 팀원들이 형식 컨벤션을 설정할 수 있다는 꿈을 꾸고 (예를 들어, 우리는 항상 결장을 선언 한 후에 공간을 떠나고) 스타일 린트 구성으로 수정하면 그 후에 다시 논의하지 않을 것입니다. 기계 왕국에서 실행되도록하십시오.
모든 것을 개발하고 확장하십시오
Eslint (및 CSS Lint)의 제작자 인 Nicholas Zakas는 Eslint의 성공에 대해 썼습니다. 스타일 린트는 Eslint의 리드를 따르려고 시도하고 CSS 저자에게 Linter를 제공합니다.
자신의 규칙 플러그인을 작성하고 게시 할 수 있습니다. 이제 우리는 사용할 것들이 많이 있습니다. 그리고 우리는 다른 사람들의 훌륭한 플러그인을보고 싶어합니다.
구성이 확장 가능하므로 공유 할 수 있습니다. 플러그인은 Eslint 의이 기능의 가치에 대해 배웠습니다. WordPress 및 Sitcss 구성이 포함 된 확인 및 게시되었습니다.
스타일 린트의 내장 팁이 마음에 들지 않으면 직접 스타일을 직접 만들거나 조직을 위해 만들 수도 있습니다. 또한 경고 메시지를 제공하는 데 사용되는 규칙을 사용자 정의 할 수도 있습니다.
스타일 린트 API를 사용하여 텍스트 컴파일러 용 플러그인을 만들고 테스트를 수행하여 스타일 링트가 워크 플로의 모든 측면에 통합되도록 할 수 있습니다.
스타일 린트 확장에 대한 아이디어가 있으면 알려주십시오!
예상 질문에 대한 답변
당신의 마음에는 몇 가지 질문이있을 수 있습니다. 가장 일반적인 설명은 다음과 같습니다.
SCSS에서 스타일린트를 사용할 수 있습니까?
대답은 예입니다. SCSS에서 스타일 린트를 사용할 수 있으며 적은 지원을받습니다! PostCSS는 사용자 정의 파서를 허용하므로 스타일 린트는 다양한 비표준 구문을 쉽게 지원할 수 있습니다. 구문 분석을 위해 PostCSS 파서를 사용자 정의 할 수 있습니다.
Postcss Parser로 인해 Stylelint는 SCSS, Less 및 New Sugarss를 지원합니다. 다른 사용자 정의 구문 지원을 구현하려면 Postless로 수행 할 수 있습니다!
물론, 비표준 구문 (SASS ID 선택기의 #{$interpolation} )에 구속되는 특정 규칙이 있습니다. 스타일 린트는 스타일 시트의 스타일을 덮으려고 시도하기 때문에 일부 사람들은 표준 CSS를 사용하고 일부 사람들은 SCSS와 같은 확장 된 언어를 사용하고 일부 사람들은 이상한 사용자 지정 속성을 사용합니다. 그러나 우리는 우리가 찾은 이러한 오류를 다루고 있습니다. 이 기간 동안의 모든 규칙은 줄 바이즈 스타일 시트 또는 줄 바이즈 스타일로 완전히 닫히거나 비활성화 될 수 있습니다.
Stylint가 향후 CSS 구문을 사용할 수 있습니까?
예! 위에서 언급 한 답변과 마찬가지로 : Stylelint는 미래 CSS 구문 (아마도 PostCSS 플러그인을 통해)을 활성화하는 것을 포함하여 PostCS가 이해하는 모든 것을 이해할 수 있습니다. 실제로 일부 스타일 린트 규칙은 특히 미래의 CSS 구문 및 일부 사용자 정의 속성을 다루고 있습니다.
스타일 린트 구성이 거대합니다. 어디서부터 시작해야합니까?
세 가지 구성 방법을 권장합니다.
게시 된 구성을 확장합니다. 우리는 사용자가 고유 한 벤치 마크를 제공하도록 촉진하기 위해 스타일 린트-구성 표준을 유지합니다. 그리고 많은 구성이 발표되었습니다. 처음부터 시작하여 한 번에 하나의 규칙을 추가하십시오. 기본적으로 규칙이 켜지지 않으므로 규칙을 수동으로 추가하면 규칙이 적용되는 규칙을 알 수 있으며 추가하는 각 규칙을 이해할 수 있습니다. 복사-페이스트 구성을 시작하고 사용할 옵션을 선택하고 선택적으로 삭제하십시오.
고맙게도, 당신은 거대한 스타일 린트 구성을 반복해서 쓸 필요가 없습니다. 좋아하는 스타일을 선택할 수 있으며 어디서나 사용할 수 있습니다.
스타일링을 실행하는 가장 쉬운 방법은?
대부분의 사람들에게 가장 쉬운 방법은 명령 줄을 통한 것입니다.
Gulp 플러그인을 선호하는 경우 Gulp-Stylelint를 사용할 수 있습니다. Webpack의 경우 선택할 수있는 많은 가능성이 있습니다. 우리는이 플러그인이 Grunt와 같은 다른 스타일 린트 플러그인을 만들도록 영감을주기를 바랍니다. (오픈 소스 프로젝트에서 검색 할 수 있습니다!)
플러그인에 포함 된 내용을 포함하여 PostCSS 플러그인을 사용하여 스타일 린트를 실행할 수도 있습니다. 즉, PostCSS (거의 모든 컴파일 도구를 다루는)를 사용할 수있는 모든 곳에서 스타일 링트를 사용할 수 있습니다!
또한 Atom, Sublime Text, vs 코드를위한 스타일 린트 텍스트 컴파일 플러그인도 있습니다. 자세한 내용은 Stylelint 웹 사이트의 보완 도구 목록을 참조하십시오.
아래와 같이, 명령 줄에서, 당신이 볼 것으로 예상되는 결과는 다음과 같습니다.
Atom에서 다음과 같이 표시합니다.
스타일린트가 내 오류를 고칠 수 있습니까?
아니요, 그러나 StyleFMT라는 또 다른 하나는이를 수행하도록 설계되었습니다. 라인팅에 사용하는 것과 매우 유사한 스타일 린트 구성이 필요하며 오류를 수정할 수 있습니다. 커뮤니티 직원이 기여함에 따라 스타일 린트가 스타일 린트 규칙을 위반하는 오류를 자동으로 패치하기 위해 진화 할 수 있기를 바랍니다. 그들이이 목표를 달성하도록 도와주세요!
또한 스타일 린트와 함께 사용되는 CSSComb 또는 PerfectList와 같은 다른 도구를 사용하여 자동으로 휴식을 강화하고 자동으로 강제로 강제로 사용할 수 있습니다.
제약 조건 보충제를 사용하십시오
좋은 CSS에는 엄청난 양의 제약이 있습니다. 그렇기 때문에 우리는 SMACSS, ACSS, BEM, Sitcs, ITCS 등과 같은 방법에 대해 논의하는 데 많은 시간을 소비하는 이유입니다. 우리는 나쁜 CSS를 쓰는 것이 매우 쉽다는 것을 알고 있습니다. 따라서 더 이상 CSS 스타일의 글쓰기를 두려워하지 않으면 직장에서 지능적인 전략을 세우고 용감하게 고수해야합니다.
스타일 린트의 목표는 실행을 자동화하는 것입니다. CSS 저자가 자신의 전략을 실행하는 데 사용할 수있는 일련의 핵심 규칙과 플러그 가능한 프레임 워크를 제공하는 것입니다.
시도해보고 당신에게 봉사하는 방법을 알려 드리겠습니다. 기여 규칙, 향상, 테스트, 수정 버그, 파일, 새로운 아이디어 또는 피드백과 같은 더 나은 개선 아이디어가있는 경우 메시지를 전하십시오! 이런 식으로 모든 수준의 모든 개발자는해야 할 일이 있습니다.