Js-beautify: CSS 한 줄 서식

#330의 복제품입니다. 그러나 그 요청의 나이를 감안할 때 나는 이것을 열어두고 있습니다.

Visual Studio에는 @Alex360hd가 원하는 대로 *.css 파일에 대한 컴팩트 기능이 있습니다.

js-beauty의 확장 플러그인이 있는 Visual Studio 코드에는 아직 이 기능이 없습니다.

압축 기능은 코드를 1000행(컴팩트) 대 5000행(이전 형식)으로 만들고 God Perspective로 *.css 파일을 제어할 수 있습니다.

sass/덜 긴 코드를 싫어합니다.

네, +1입니다. 나는 CSS 한 줄 형식을 정말 좋아합니다. 각 선택기는 서로 옆에 있고 아주 좋은 원근감 보기를 제공합니다.

축소자를 사용하여 여러 줄 스타일을 한 줄로 바꾸고 미화 도구를 사용하여 한 줄을 여러 줄로 바꿀 것으로 예상합니다.

@evocateur 의 #330 의견 ("미화의 역할은 코드를 축소하는 것이 아니라 일관성과 가독성을 위해 다시 포맷하는 것")에 대한 후속 조치: 거기에 언급된 cssmin 는 다음을 위해 더 이상 사용되지 않습니다. clean-css (또한 빌드 도구와 함께 clean-css를 사용하는 방법 참조). "한 줄 서식"은 clean-css 로 쉽게 얻을 수 있습니다. 가장 간단한 설정은 다음과 같습니다.

level: 0, // no optimizations
format: {
    breaks: {
        afterRuleEnds: true // put a line break after every rule
    }
}

그건 턴

.btn-primary {
  background:#fff;
  color:#000;
  border:1px solid #000;
}
.btn-primary:hover {
  background:#000;
  color:#fff;
  border:1px solid #fff;
}

~ 안으로

.btn-primary{background:#fff;color:#000;border:1px solid #000}
.btn-primary:hover{background:#000;color:#fff;border:1px solid #fff}

거기에서 spaces 옵션을 미세 조정합니다.

내 동료의 모든 젊은 개발자는 long long long less/sass로 모든 라인을 작성하고 모든 곳에서 준수합니다.

내 풀 코드를 용서하십시오 -_-!!.

let CSSIOStream=`.model-a {
  background:#fff;
  color:  #aaa;
  border:  1px solid #aaa;
  border-radius  : 5px;
}
.model-a:hover {
  background:#000;
  color:#fff;
  border:1px solid #fff;
}

/*seperate page section style, normally, i will left one blank rows or a note*/

.model-b{margin-right:10px;}
.model-b-list{margin-right:10px;}

/*seperate page section style, normally, i will left one blank rows or a note*/



`;


let CSSIOStreamOutput=CSSIOStream
.replace(/\ +/g, ' ')
.replace(/;\n/g,';')
.replace(/{\n/g,'{')

console.log(CSSIOStreamOutput);

산출:

.model-a { background:#fff; color: #aaa; border: 1px solid #aaa; border-radius : 5px;}
.model-a:hover { background:#000; color:#fff; border:1px solid #fff;}

/*seperate page section style, normally, i will left one blank rows or a note*/

.model-b{margin-right:10px;}
.model-b-list{margin-right:10px;}

/*seperate page section style, normally, i will left one blank rows or a note*/

{} 사이의 코드를 압축하면 .scss&.less 파일은 제외됩니다.
option.css가 있는지 알고 싶습니다. *.css 형식으로 압축 합니다. :)

@evocateur

미화의 역할은 코드를 축소하는 것이 아니라 일관성과 가독성을 위해 다시 포맷하는 것입니다.

축소가 아니라 한 줄 형식은 여러 선택기 규칙에 대해 일부 공백과 일부 줄 반환을 유지합니다.

저와 많은 웹 개발자에게 이것은 다음과 같습니다.

.btn { border:1px solid black; background:#fff; border-radius:5px color:#000; }
.btn:hover,
.btn:focus { background:#000; color:#fff; }

이보다 훨씬 읽기 쉽습니다.

.btn {
  border:1px solid black;
  background:#fff;
  border-radius:5px;
  color:#000;
}

.btn:hover,
.btn:focus {
  background:#000;
  color:#fff;
}

아니요.

2017년 3월 22일 01:08에 Alex360hd [email protected] 에서 다음과 같이 썼습니다.

@evocateur

미화의 역할은 코드를 축소하는 것이 아니라 일관성과 가독성을 위해 다시 포맷하는 것입니다.

저와 많은 웹 개발자에게 이것은 다음과 같습니다.

.btn { 테두리:1px 단색 검정; 배경:#fff; 테두리-반경:5px 색상:#000; }
. btn:hover { 배경:#000; 색상:#fff; }
이보다 훨씬 읽기 쉽습니다.

.btn {
테두리:1px 단색 검정;
배경:#fff;
테두리-반경:5px;
색상:#000;
}

. btn:호버 {
배경:#000;
색상:#fff;
}
—
당신이 언급되었기 때문에 이것을 받는 것입니다.
이 이메일에 직접 답장하거나 GitHub에서 보거나 스레드를 음소거하세요.

아름다운 변론...

개인적으로 나는 내 CSS 선택기에 대한 훌륭한 개요를 갖고 "일반" 구문을 사용하는 것을 좋아합니다. 내 뷰포트에 3개 또는 4개 이상의 선택기가 거의 보이지 않습니다.

한 줄 형식을 사용하여 20 또는 30개의 선택기를 볼 수 있고(최소한) 요소 그룹에 대한 개요를 쉽게 볼 수 있습니다.

CSS를 잘 알고, 유산과 선택기를 지능적으로 사용하면 선택기에 대해 5~6개 이상의 규칙이 있는 경우가 거의 없으며 오늘날 우리가 가진 화면(매우 큼)에서는 수평 스크롤바 없이 모든 규칙을 볼 수 있습니다. (이 경우 내 IDE에는 자동 줄 반환에 대한 많은 옵션이 있습니다).

온라인 CSS 포맷터를 검색하면 대부분이 단일 라인 옵션이 있음을 알 수 있습니다. 아마도 일부 사람들에게 관심이 있기 때문일 것입니다...

@evocateur - 🌟 당신의 심술쟁이 고양이 인상에 금색 별표. 🌟 😃

@Alex360hd @jsonchou - 귀하의 포인트가 잘 활용되었습니다. 이것은 축소와 미화 사이 어딘가에 속하며 이것이 문제가 계속 열려 있고 개선 사항으로 나열되는 이유입니다.

이것은 합리적인 요청이지만 저와 이 프로젝트의 다른 주요 기여자(예: @evocateur)에게는 우선 순위가 낮습니다. 누군가가 자바스크립트와 파이썬 구현과 충분한 범위의 테스트가 포함된 PR을 제출하기로 선택한 경우 수락될 것입니다. 그러나 우리는 프로젝트 전체에서 더 높은 우선 순위를 차지하는 다른 작업이 있습니다.

@olets
해결 방법 및 대체 CSS 도구를 지적해 주셔서 감사합니다!

@jsonchou -
죄송합니다. 대부분의 입력 또는 최소한 귀하 또는 제가 시도할 모든 입력에 대해 작동하는 정규식이 항상 있습니다. 그러나 그들은 모든 입력에 대해 실제로 작동하지 않으며 궁극적으로 유지 관리가 불가능하고 오류가 발생하기 쉽습니다. 이것이 css-beautifier 코드가 오늘날처럼 유지 관리하기 어려운 이유입니다. 사람들이 위험을 감수하기로 선택한 경우 해킹할 수 있는 해결 방법을 제공해주셔서 감사합니다. 하지만 대신 @olets 솔루션을 사용하기를 바랍니다. 😄

@jsonchou LESS 및 Sass에서 //inline comments 조심

@Alex360hd @Zmove

VSCode용 CSS 컴팩트 플러그인을 작성했습니다.

https://marketplace.visualstudio.com/items?itemName=jsonchou.css-compact

훌륭합니다. 시도해 보겠습니다.

Hey @jsonchou - 플러그인을 sass/scss 세계로 가져갔다면 많은 사람들이 사용할 것 같아요. 3000픽셀 너비의 모니터가 있는 이 시대에 사람들이 CSS에서 화면 공간의 5%를 사용하는 데 끌린 이유를 생각하면 가슴이 뭉클합니다!

사람들이 속성이 필요한 ORDER를 지정할 수 있도록 플러그인을 사용할 수도 있습니다. 위치 및 표시와 같은 항목은 목록의 초기에 있어야 하고 그 다음 여백, 패딩 등, 그 다음에는 색상, 글꼴 등이 있어야 합니다.

저에게는 SCSS를 작성하는 많은 사람들이 있는 팀에서 매우 강력하다는 것이 입증되었습니다.

죄송합니다. 누군가 속성 키 값이 별도의 줄에 있어야 하는 한 가지 좋은 이유를 알려주시겠습니까? 모바일 장치에서 CSS를 작성하시겠습니까?

스티븐

@tateman74 아마도 .scss 파일을 한 줄로 만들려고 하겠지만 ORDER 속성은 csscomb와 같은 세 번째 솔루션으로 수행해야 한다고 생각합니다.

아 흥미롭군. CSSComb은 확실히 내가 주문할 때 찾고 있던 것입니다. VSCode 확장을 만들어야 할 것 같습니다.

개행이 실제로 의미하는 바가 있기 때문에 SCSS는 약간 어려울 수 있습니다. 최고의 가독성을 위해 항상 다음과 같이 형식을 지정합니다.

• 중첩 여부에 관계없이 항상 규칙 앞에 줄 바꿈
• 항상 자신의 라인에 곱슬

얼마 전(MySpace 근무 시절 :)) 몇 명의 CSS 친구와 저는 공급업체 접두사가 기본적으로 (무시되는) 속성 종류이기 때문에 개행에서 시작해야 한다고 추론했습니다. 즉, 의미가 있지만 호환성을 위해서만 존재합니다. 이 시대에 우리는 어쨌든 PostCSS를 사용해야 하므로 해당 공급업체 접두사가 존재하지 않아야 합니다.

다시 한 번 감사드리며 도움이 필요하면 알려주세요. 다음은 내가 선호하는 꽤 일반적인 SCSS 파일입니다.
누가 읽을 수 없다고 말해! :)

스티븐

이 기능이 유용하다고 생각하는 사람이 CSS 미화 기능을 기꺼이 구현하시겠습니까? 아마 그렇게 어렵지 않을 것입니다.

작동하려면 최소한 CSS 토큰화가 필요합니다(#545). 그것이 완료되면 그것을 실현하기 위해 약간의 작업이 필요할 것입니다.