Js-beautify: Форматирование одной строки CSS

Дубликат № 330. Но, учитывая возраст этой просьбы, я держу ее открытой.

Visual Studio имеет компактную функцию для файлов *.css, как и хотел @Alex360hd .

код Visual Studio с расширениями-плагинами от js-beauty еще не имеет этой функции.

компактная функция делает ваш код 1000 строк (компактный) против 5000 строк (старое форматирование), вы можете управлять своим файлом *.css с помощью God Perspective.

от 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

каждый молодой разработчик из моих коллег пишет каждую строчку с длинной, длинной, длинной, меньшей/дерзостью и везде соблюдает.

простите мой код пула -_-!!.

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

Неа.

22 марта 2017 г., в 01:08, [email protected] написал:

@evocateur

Работа бьютификатора заключается не в том, чтобы минимизировать код, а в том, чтобы переформатировать его для согласованности и удобочитаемости.

Для меня и многих веб-разработчиков это:

.btn { граница: 1px сплошной черный; фон:#fff; радиус границы: 5px цвет: # 000; }
. кнопка: наведите курсор { фон: # 000; цвет:#fff; }
Гораздо более читабельно, чем это:

.btn {
граница: 1px сплошной черный;
фон:#fff;
радиус границы: 5px;
цвет:#000;
}

. кнопка:наведите {
фон:#000;
цвет:#fff;
}
—
Вы получаете это, потому что вас упомянули.
Ответьте на это письмо напрямую, просмотрите его на GitHub или отключите ветку.

Красивая аргументация...

Лично мне нравится иметь отличный обзор моего селектора CSS, и, используя «обычный» синтаксис, я едва ли вижу более 3 или 4 селекторов в своем окне просмотра.

Используя однострочное форматирование, я вижу 20 или 30 селекторов (как минимум) и легко могу получить обзор группы элементов.

И когда вы хорошо знаете CSS, разумно используете наследие и селектор, у вас редко бывает больше 5 или 6 правил для селектора, а на сегодняшнем экране (очень большом) я могу видеть все свои правила без горизонтальной полосы прокрутки. (и если это так, в моей IDE есть множество вариантов автоматического возврата строки).

Если вы ищете онлайн-форматировщик css, вы можете увидеть, что многие из них имеют однострочные параметры, возможно, это потому, что это интересует некоторых людей...

@evocateur - 🌟 Золотая звезда за впечатление от Grumpy Cat. 🌟 😃

@ Alex360hd @jsonchou - ваши очки хорошо приняты. Это находится где-то между минификацией и украшением, и поэтому эта проблема остается открытой и указана как улучшение.

Это разумная просьба, но она имеет меньший приоритет для меня и других основных участников этого проекта (таких как @evocateur). Если кто-то решит отправить PR с реализациями javascript и python и достаточным набором тестов, он будет принят. Но у нас есть другие задачи, которые мы считаем более приоритетными для проекта в целом.

@olets
Спасибо, что указали на обходной путь и альтернативный инструмент css!

@jsonchou -
Извините, всегда есть регулярное выражение, которое будет работать для большинства входных данных или, по крайней мере, для всех входных данных, которые вы или я попробовали бы. Тем не менее, они никогда не работают для всех входных данных, и, в конечном счете, они не поддерживаются и подвержены ошибкам — именно поэтому код css-beautifier стал таким сложным в обслуживании, как сегодня. Спасибо за предоставление обходного пути, который люди могут взломать, если решат рискнуть, но я надеюсь, что вместо этого они используют решение @olets . 😄

@jsonchou следите за //inline comments в LESS и Sass

@Alex360hd @Zmove

Я написал компактный плагин css для VSCode.

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

Отлично, я попробую это.

Привет , @jsonchou. Я думаю, если бы ты вынес свой плагин в мир sass/scss, им воспользовалась бы куча людей. Меня поражает мысль о том, почему в наше время, в эпоху мониторов шириной 3000 пикселей, люди тяготеют к тому, чтобы использовать 5% площади экрана в CSS!

Я бы даже довел ваш плагин до того, чтобы позволить людям указывать ПОРЯДОК, в котором должны идти свойства. Такие вещи, как позиция и отображение, должны идти в начале списка, а затем поля, отступы и т. д., а затем цвета, шрифты и т. д.

Для меня это оказалось чрезвычайно мощным, когда в команде много людей, пишущих SCSS.

Извините, ребята, кто-нибудь подскажет мне одну вескую причину, по которой значения ключей свойств должны быть в отдельных строках? Пишите CSS на мобильном устройстве?

Стивен

@ tateman74 Возможно, я попытаюсь сделать файл .scss однострочным, но я думаю, что свойства ORDER должны быть выполнены с помощью третьего решения, такого как csscomb.

Ах интересно. CSSComb, безусловно, то, что я искал бы для заказа. Я думаю, нужно сделать для него расширение VSCode.

SCSS может быть немного сложным, поскольку новые строки действительно что-то значат. Для лучшей читабельности я всегда форматирую материал следующим образом:

• всегда новая строка перед правилом, вложенным или нет
• всегда вьется по своим линиям

Давным-давно (во времена моей работы на MySpace :)), несколько приятелей css и я пришли к выводу, что префиксы поставщиков должны начинаться с новой строки, поскольку они в основном являются (игнорируемыми) свойствами. То есть они что-то значат, но там только для совместимости. Я предполагаю, что в наши дни мы все равно должны использовать PostCSS, чтобы эти префиксы поставщиков никогда не существовали.

Еще раз спасибо и дайте мне знать, если я могу помочь. Вот довольно типичный файл SCSS, который я предпочитаю.
Кто-нибудь, скажите мне, что это не читается! :)

Стивен

Кто-нибудь из вас, кто считает эту функцию полезной, захочет реализовать ее для CSS Beautifier? Наверное, это было бы не так сложно.

Это потребует как минимум токенизации css, чтобы заставить его работать (# 545). Даже после того, как это будет сделано, потребуется некоторая работа, чтобы это произошло.