CSS зачем добавлять пробелы перед правилами? - PullRequest
Новая
       38

CSS зачем добавлять пробелы перед правилами?

0 голосов
/ 04 декабря 2009

Вопрос о форматировании кода CSS: у меня есть старая привычка добавлять один пробел перед тем, как { запускает новое правило CSS, например: 

body {
  font-size: 16px
}

пробелы, подобные этому, между body и { складываются по всему css.

В идеале, я бы предпочел написать свои правила примерно так (и, следовательно, сэкономить пробелы): 

body{
  font-size: 16px
}

На самом деле, я забыл, зачем я это делаю?

Обратите внимание, что я намеренно упростил приведенный здесь пример, чтобы показать пробелы. Конечно, нет необходимости удалять здесь место из файла. Но в реальных проектах с 2-3 000 правил это может сложиться. Кроме того, я предполагаю, что один пробел в этой позиции будет сильно сжиматься по сравнению с ситуацией, когда он удаляется.

Я давно забыл, почему я добавляю этот странный пробел. Это безопасно удалить? Какому браузеру нужны пробелы?

Ответы [ 11 ]

10 голосов
/ 04 декабря 2009

Вы, вероятно, добавляете пробел, потому что он читается / выглядит лучше.

Безопасно удалить, браузер не заботится о пробелах. Любой компрессор / оптимизатор CSS удалит все эти пробелы, разрывы строк и т. Д.

В настоящее время люди редко могут вручную оптимизировать свои CSS, я предлагаю сделать ваш CSS читабельным и понятным, а затем использовать компрессор / оптимизатор, такой как YUI.

http://developer.yahoo.com/yui/compressor/

4 голосов
/ 04 декабря 2009

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

Учитывая, что приличная настройка сервера также отправит файл css gzipped, я действительно не думаю, что это будет иметь большое значение в большей схеме, учитывая все другие накладные расходы. Я бы придерживался того, что выглядит лучше всего.

Если файл CSS дойдет до того момента, когда вы думаете, что это будет иметь значение - как сказал другой автор - минификация - это путь вперед. И не забывайте, что разрыв строки или табуляция занимают столько же места, сколько и пробел.

2 голосов
/ 04 декабря 2009

Я бы предпочел третий вариант: 

class
{
    ...
}

Я считаю его более читабельным в случае, когда у вас есть стиль, который применяется к нескольким классам, например: 

classA,
classB,
classC
{
    ...
}

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

1 голос
/ 04 декабря 2009

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

лично я всегда стремлюсь к читабельности из-за беспокойства об этих вещах. я сам люблю пробелы

1 голос
/ 04 декабря 2009

Некоторые люди, чтобы сэкономить место с помощью CSS, поместят правила в одну строку. Это экономит еще больше места, так как у вас нет символов новой строки, и это все еще вполне читабельно. 

body { font-size: 16px; font-weight: bold; }

Учитывая, что css кэшируется на большинстве веб-сайтов, даже 2-3000 строк не сэкономят вам много места, и повышение производительности, вероятно, будет в любом случае незначительным.

РЕДАКТИРОВАТЬ: большинство людей изменилось на некоторых людей.

1 голос
/ 04 декабря 2009

CSS пропускает любые пробелы, как и большинство языков программирования. Дополнительное пространство между правилом и открывающей скобкой облегчает чтение. Лично body{ выглядит безобразно.

Где вы размещаете пробелы, зависит от вас в CSS, но это помогает сделать его читабельным.

Вы бы предпочли это: 

body{
text-align:center;
font-size:10pt;
}

Или это? 

body {
  text-align: center;
  font-size: 10pt;
}
1 голос
/ 04 декабря 2009

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

0 голосов
/ 04 декабря 2009

Лично я вообще не использую пробелы в CSS, и мне не трудно читать, это просто вопрос привыкания!

0 голосов
/ 04 декабря 2009

мой любимый формат выглядит так: 

body{ margin:0;
      font-family:Verdana, Tahoma, Arial, sans-serif;
      padding:0;}

мне просто кажется глупым создавать новую строку только для последнего символа '}'. Это все еще кажется достаточно читабельным для меня, но недостатком является то, что не многие редакторы CSS, которые пытаются автоматически отформатировать ваш CSS, делают это так. Я обычно должен отключить автоматическое форматирование CSS или разметить его вручную.

0 голосов
/ 04 декабря 2009 
body {

выглядит лучше (по крайней мере, я так думаю).

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

Вы также должны настроить свой http-сервер на использование сжатия gzip для css (что сэкономит намного больше, чем пробел между body и {).

Страница:
...