Js-beautify: CSS Einzeilige Formatierung

Duplikat von Nr. 330. Aber angesichts des Alters dieser Anfrage halte ich diese offen.

Visual Studio hat eine kompakte Funktion für *.css-Dateien, genau wie von @Alex360hd gewünscht.

Visual Studio Code mit Extension-Plugins von js-beauty hat diese Funktion noch nicht.

Die Kompaktfunktion macht Ihren Code zu 1000 Zeilen (kompakt) gegenüber 5000 Zeilen (alte Formatierung), Sie können Ihre *.css-Datei mit God Perspective steuern.

von sass/less long code hater.

Ja, +1 dafür. Ich mag die einzeilige CSS-Formatierung sehr, jeder Selektor ist nebeneinander und es gibt eine sehr gute perspektivische Ansicht.

Ich würde erwarten, einen Minifier zu verwenden, um mehrzeilige Stile in einzeilige Stile umzuwandeln, und einen Verschönerer, um einzeilige in mehrzeilige Stile umzuwandeln.

In Anlehnung an die #330- Meinung von @evocateur ("Die Aufgabe eines Verschönerers ist es nicht, Code zu verkleinern, sondern ihn für Konsistenz und Lesbarkeit neu zu formatieren"): Das dort erwähnte cssmin wurde zugunsten von verworfen clean-css (siehe auch Wie verwende ich clean-css mit Build-Tools? ). "Einzeilige Formatierung" ist einfach mit clean-css zu erreichen - die einfachsten Einstellungen sind

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

Das dreht sich

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

hinein

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

Passen Sie von dort aus die spaces -Optionen an

jeder junge entwickler meiner kollegen schreibt jede einzelne zeile mit long long long less/saass, und erfüllt überall.

vergib mir meinen Poolcode -_-!!.

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);

Ausgang:

.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*/

komprimieren Sie einfach den Code zwischen {}, .scss&.less-Datei ist ausgeschlossen.
Ich möchte wissen, ob es eine Option.css gibt. compact zum Formatieren der *.css . :)

@evocateur

Die Aufgabe eines Verschönerers besteht nicht darin, Code zu verkleinern, sondern ihn für Konsistenz und Lesbarkeit neu zu formatieren

Das ist keine Minimierung, die einzeilige Formatierung behält einige Leerzeichen und einige Zeilenumbrüche für Mehrfachauswahlregeln bei.

Für mich und viele Webentwickler gilt Folgendes:

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

Ist viel besser lesbar als das:

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

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

NÖ.

Am 22. März 2017 um 01:08 schrieb Alex360hd [email protected] :

@evocateur

Die Aufgabe eines Verschönerers besteht nicht darin, Code zu verkleinern, sondern ihn für Konsistenz und Lesbarkeit neu zu formatieren

Für mich und viele Webentwickler gilt Folgendes:

.btn { Rand: 1px durchgehend schwarz; Hintergrund:#fff; Randradius :5px Farbe:#000; }
. btn:hover {Hintergrund:#000; Farbe:#fff; }
Ist viel besser lesbar als das:

.btn {
Rand: 1px durchgehend schwarz;
Hintergrund:#fff;
Randradius : 5px;
Farbe:#000;
}

. btn:hover {
Hintergrund:#000;
Farbe:#fff;
}
—
Sie erhalten dies, weil Sie erwähnt wurden.
Antworten Sie direkt auf diese E-Mail, zeigen Sie sie auf GitHub an oder schalten Sie den Thread stumm.

Schöne Argumentation...

Ich persönlich mag es, einen guten Überblick über meinen CSS-Selektor zu haben, und mit der "normalen" Syntax sehe ich kaum mehr als 3 oder 4 Selektoren in meinem Ansichtsfenster.

Wenn ich die einzeilige Formatierung verwende, kann ich (mindestens) 20 oder 30 Selektoren sehen und ich kann leicht einen Überblick über eine Gruppe von Elementen haben.

Und wenn Sie CSS gut kennen, Erbe und Selektor intelligent verwenden, haben Sie selten mehr als 5 oder 6 Regeln für einen Selektor, und mit dem Bildschirm, den wir heute haben (sehr groß), kann ich alle meine Regeln ohne horizontale Bildlaufleiste sehen. (und wenn dies der Fall ist, hat meine IDE viele Optionen für die automatische Zeilenrückgabe).

Wenn Sie nach Online-CSS-Formatierern suchen, können Sie sehen, dass viele von ihnen einzeilige Optionen haben, wahrscheinlich weil es einige Leute interessiert ...

@evocateur – 🌟 Goldener Stern auf deinem Grumpy-Cat-Abdruck. 🌟 😃

@Alex360hd @jsonchou - deine Punkte sind gut getroffen. Dies liegt irgendwo zwischen Verkleinerung und Verschönerung und deshalb bleibt dieses Problem offen und wird als Verbesserung aufgeführt.

Dies ist eine vernünftige Anfrage, aber sie hat für mich und die anderen wichtigen Mitwirkenden an diesem Projekt (wie @evocateur) eine geringere Priorität. Wenn sich jemand dafür entscheidet, eine PR mit sowohl der Javascript- als auch der Python-Implementierung und einer ausreichenden Auswahl an Tests einzureichen, wird diese akzeptiert. Aber wir haben andere Aufgaben, die wir für das Gesamtprojekt als wichtiger erachten.

@olets
Vielen Dank für den Hinweis auf die Problemumgehung und das alternative CSS-Tool!

@jsonchou -
Entschuldigung, es gibt immer einen regulären Ausdruck, der für die meisten Eingaben funktioniert, oder zumindest für alle Eingaben, die Sie oder ich ausprobieren würden. Sie funktionieren jedoch nie wirklich für alle Eingaben und sind letztendlich nicht wartbar und fehleranfällig - daher wurde der CSS-Beautifier-Code so schwer zu warten wie heute. Vielen Dank für die Bereitstellung einer Problemumgehung, in die sich die Leute einhacken können, wenn sie es riskieren möchten, aber ich würde hoffen, dass sie stattdessen die @olets- Lösung verwenden. 😄

@jsonchou achte auf //inline comments in LESS und Sass

@Alex360hd @Zmove

Ich habe ein CSS-Kompakt-Plugin für VSCode geschrieben.

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

Super, das werde ich probieren.

Hey @jsonchou – Ich denke, wenn du dein Plugin in die Sass/Scss-Welt bringen würdest, würden es eine Menge Leute benutzen. Es haut mich um, wenn ich darüber nachdenke, warum in der heutigen Zeit mit 3000 Pixel breiten Monitoren die Leute dazu tendieren, 5 % der Bildschirmfläche in CSS zu verwenden!

Ich würde Ihr Plugin sogar so weit bringen, die Leute die REIHENFOLGE angeben zu lassen, in die die Eigenschaften gehen müssen. Dinge wie Position und Anzeige sollten früh in der Liste stehen und dann Rand, Polsterung usw. und dann Farben, Schriftarten usw.

Für mich hat sich das als enorm leistungsfähig erwiesen, wenn ich in einem Team mit vielen Leuten bin, die SCSS schreiben.

Tut mir leid, Leute, hat mir jemand einen guten Grund dafür gegeben, dass Eigenschaftsschlüsselwerte in separaten Zeilen stehen? CSS auf einem mobilen Gerät schreiben?

Stefan

@ tateman74 Vielleicht werde ich versuchen, die .scss-Datei einzeilig zu machen, aber ich denke, ORDER-Eigenschaften sollten von einer dritten Lösung wie csscomb ausgeführt werden.

Ah interessant. CSSComb ist sicherlich das, wonach ich zum Bestellen suchen würde. Ich muss eine VSCode-Erweiterung dafür machen, denke ich.

SCSS könnte eine kleine Herausforderung sein, da Zeilenumbrüche tatsächlich etwas bedeuten. Für die beste Lesbarkeit formatiere ich Sachen immer so:

• immer ein Zeilenumbruch vor einer Regel, ob verschachtelt oder nicht
• kräuselt sich immer auf ihren eigenen Linien

Vor langer Zeit (in meiner MySpace-Arbeitszeit :)) argumentierten ein paar CSS-Freunde und ich, dass Hersteller-Präfixe in einer neuen Zeile beginnen sollten, da sie im Grunde genommen (ignorierte) Eigenschaften sind. Das heißt, sie bedeuten etwas, dienen aber nur der Kompatibilität. Ich denke, in der heutigen Zeit sollten wir sowieso PostCSS verwenden, damit diese Anbieterpräfixe niemals existieren sollten.

Nochmals vielen Dank und lassen Sie mich wissen, ob ich helfen kann. Hier ist eine ziemlich typische SCSS-Datei, die ich bevorzuge.
Jemand sagt mir, das ist nicht lesbar! :)

Stefan

Wäre jemand von Ihnen, der diese Funktion nützlich findet, bereit, die Funktion für den CSS-Verschönerer zu implementieren? Wäre wahrscheinlich nicht so schwer.

Dies erfordert mindestens CSS-Tokenisierung, damit es funktioniert (#545). Selbst wenn das erledigt ist, wird es einige Arbeit brauchen, um es zu verwirklichen.