Js-beautify: Formato de línea única CSS

Duplicado del #330. Pero dada la antigüedad de esa solicitud, la mantendré abierta.

Visual Studio tiene una función compacta para archivos *.css, tal como lo deseaba @Alex360hd .

El código de Visual Studio con complementos de extensión de js-beauty aún no tiene esta función.

La función compacta hace que su código tenga 1000 filas (compacto) frente a 5000 filas (formato antiguo), puede controlar su archivo * .css con God Perspective.

de sass/hater código menos largo.

Sí, +1 por eso. Realmente me gusta el formato de una sola línea css, cada selector está uno al lado del otro y brinda una muy buena vista en perspectiva.

Esperaría usar un minificador para convertir estilos de varias líneas en una sola línea, y un embellecedor para convertir una sola línea en varias líneas.

Siguiendo con la opinión #330 de @evocateur ("El trabajo de un embellecedor no es minimizar el código, sino reformatearlo para lograr consistencia y legibilidad"): el cssmin mencionado allí ha quedado obsoleto a favor de clean-css (vea también ¿Cómo usar clean-css con herramientas de compilación? ). El "formato de una sola línea" es fácil de obtener con clean-css : las configuraciones más simples son

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

que se convierte

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

en

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

A partir de ahí, ajuste las opciones spaces

cada joven desarrollador de mis colegas escribe cada línea con long long long less/sass, y cumple en todas partes.

perdona mi codigo de pool -_-!!.

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

producción:

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

simplemente compacte el código entre{}, se excluye el archivo .scss&.less.
quiero saber si hay una opción.css. compacto para formatear el *.css . :)

@evocateur

El trabajo de un embellecedor no es minimizar el código, sino reformatearlo para lograr coherencia y legibilidad.

Eso no es minificación, el formato de una sola línea mantiene algunos espacios y algunos retornos de línea para reglas de selección múltiple.

Para mí, y para muchos desarrolladores web, esto:

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

Es mucho más legible que esto:

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

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

No.

El 22 de marzo de 2017 a las 01:08, Alex360hd [email protected] escribió:

@evocateur

El trabajo de un embellecedor no es minimizar el código, sino reformatearlo para lograr coherencia y legibilidad.

Para mí, y para muchos desarrolladores web, esto:

.btn { borde: 1px negro sólido; fondo:#fff; border- radio:5px color:#000; }
. btn: hover {fondo: # 000; color:#fff; }
Es mucho más legible que esto:

.btn {
borde: 1px negro sólido;
fondo:#fff;
borde- radio: 5px;
color:#000;
}

. btn: flotar {
fondo:#000;
color:#fff;
}
—
Estás recibiendo esto porque te mencionaron.
Responda a este correo electrónico directamente, véalo en GitHub o silencie el hilo.

Hermosa argumentación...

Personalmente, me gusta tener una excelente visión general de mi selector de CSS y, al usar la sintaxis "normal", apenas veo más de 3 o 4 selectores en mi ventana gráfica.

Usando el formato de una sola línea, puedo ver 20 o 30 selectores (al menos) y puedo tener fácilmente una visión general de un grupo de elementos.

Y cuando sabes bien CSS, usas heritage y selector inteligentemente, rara vez tienes más de 5 o 6 reglas para un selector, y con la pantalla que tenemos hoy, (muy grande), puedo ver todas mis reglas sin barra de desplazamiento horizontal. (y si es el caso, mi IDE tiene muchas opciones para el retorno automático de línea).

Si busca formateador css en línea, puede ver que muchos de ellos tienen opciones de una sola línea, probablemente sea porque le interesa a algunas personas...

@evocateur - 🌟 Estrella dorada en tu impresión de Grumpy Cat. 🌟 😃

@ Alex360hd @jsonchou : sus puntos están bien tomados. Esto se encuentra en algún lugar entre la minimización y el embellecimiento y es por eso que este problema permanece abierto y aparece como una mejora.

Esta es una solicitud razonable, pero es de menor prioridad para mí y para los demás contribuyentes principales de este proyecto (como @evocateur). Si alguien elige enviar un PR con las implementaciones de javascript y python y una gama suficiente de pruebas, sería aceptado. Pero tenemos otras tareas que creemos que son de mayor prioridad para el proyecto en su conjunto.

@olets
¡Gracias por señalar la herramienta css alternativa y alternativa!

@jsonchou -
Lo siento, siempre hay una expresión regular que funcionará para la mayoría de las entradas, o al menos para todas las entradas que usted o yo intentaríamos. Sin embargo, en realidad nunca funcionan para todas las entradas y, en última instancia, no se pueden mantener y son propensos a errores; así es como el código css-beautifier llegó a ser tan difícil de mantener como lo es hoy. Gracias por proporcionar una solución alternativa que las personas pueden piratear si deciden arriesgarse, pero espero que usen la solución @olets en su lugar. 😄

@jsonchou cuidado con //inline comments en LESS y Sass

@Alex360hd @Zmove

He escrito un complemento compacto css para VSCode.

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

Excelente, lo intentaré.

Hola @jsonchou : creo que si llevaras tu complemento al mundo sass/scss, mucha gente lo usaría. Me sorprende pensar por qué en la actualidad con monitores de 3000 píxeles de ancho, ¡la gente se ha inclinado por usar el 5% del espacio de la pantalla en CSS!

Incluso llevaría su complemento tan lejos como para permitir que las personas especifiquen el ORDEN en el que deben ir las propiedades. Cosas como la posición y la visualización deben ir al principio de la lista y luego el margen, el relleno, etc., y luego los colores, las fuentes, etc.

Para mí, eso ha demostrado ser enormemente poderoso cuando estoy en un equipo con muchas personas escribiendo SCSS.

Lo siento amigos, ¿alguien me dio una buena razón para que los valores de clave de propiedad estén en líneas separadas? ¿Escribir CSS en un dispositivo móvil?

steven

@ tateman74 Tal vez intentaré hacer que el archivo .scss sea de una sola línea, pero creo que las propiedades ORDER deben realizarse mediante una tercera solución, como csscomb.

ah interesante CSSComb es ciertamente lo que estaría buscando para ordenar. Tengo que hacer una extensión VSCode para eso, supongo.

SCSS puede ser un poco desafiante ya que las nuevas líneas en realidad significan algo. Para una mejor legibilidad, esta es siempre la forma en que formateo las cosas:

• siempre una nueva línea antes de una regla, ya sea anidada o no
• siempre se riza en sus propias líneas

Hace mucho tiempo (en mis días de empleo en MySpace :)), algunos amigos de css y yo razonamos que los prefijos de los proveedores deberían comenzar en una nueva línea, ya que básicamente son propiedades (ignoradas). Es decir, significan algo, pero solo están ahí por compatibilidad. Supongo que hoy en día, deberíamos usar PostCSS de todos modos, por lo que esos prefijos de proveedores nunca deberían existir.

Gracias de nuevo y avísame si puedo ayudarte. Aquí hay un archivo SCSS bastante típico que prefiero.
Alguien me dice que eso no es legible! :)

steven

¿Alguno de ustedes que encuentre útil esta función estaría dispuesto a implementar la función para el embellecedor css? Probablemente no sería tan difícil.

Esto requerirá al menos tokenización css para que funcione (#545). Incluso una vez hecho esto, necesitará algo de trabajo para que suceda.