2009-12-03 2 views
0

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

body { 
    font-size: 16px 
} 

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

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

body{ 
    font-size: 16px 
} 

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

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

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

ответ

10

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

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

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

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

+0

Спасибо за ответ. Фактически, я уже использую компрессор YUI непосредственно в этом проекте и заметил, что он удаляет это конкретное пробельное пространство. –

1

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

+0

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

+1

Вопрос: безопасно ли это?Да, это и одно пространство между вещами не будет иметь никакого отношения к читаемости. Если вы собираетесь пометить людей, сделайте это тем людям, которые делают это всего одну линию! – AutomatedTester

1

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

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

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

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

Или это?

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

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

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

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

EDIT: Изменено большинство людей для некоторых людей.

+0

Вы не можете рассчитывать на кеширование, но я согласен с тем, что дополнительный размер, вероятно, ничтожно мал. – Joel

+1

Не уверен насчет «большинства людей» .. от того, что я могу сказать, его довольно разделить. –

+0

Я согласен, что «большинство людей» довольно загружено. – Deeksy

0

Да, вы можете удалить пробелы, на самом деле, если вы действительно хотите сохранить байты, вы также можете удалить пробел в «font-size: 16px».

Сказав это, большинство серверов и браузеров gzip веб-контента по проводам в любом случае, поэтому фактическая экономия места будет минимальной, возможно, не стоит затрат на удобочитаемость.

0
body { 

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

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

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

4

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

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

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

2

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

class 
{ 
    ... 
} 

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

classA, 
classB, 
classC 
{ 
    ... 
} 

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

0

моего любимый формат примерно так:

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

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

1

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

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

0

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