Плохо ли переписывать стили в CSS? - PullRequest
4 голосов
/ 19 декабря 2011

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

Давайте посмотрим на этот пример:

Примечание: Ранее borders, где все width:1px, border-style:solid и border-color:#000


Сценарий: Мы хотим изменить:

  • width из: R, L и B до 0px
  • border-color из: Т до #ddd

Используемый код:

border:0 solid #ddd;
border-top-width:1px;

Что сделал приведенный выше код без необходимости?:

  • изменение border-color из: R, L и B (3 действия)
  • изменение width из: T (1 действие)

Вот код с 0 ненужными действиями:

border-right-width:0;
border-bottom-width:0;
border-left-width:0;
border-top-color:#ddd;

Вопрос в следующем: стоит ли жертвовать эффективностью ради меньшего количества кода / читабельности?

Ответы [ 5 ]

6 голосов
/ 19 декабря 2011

Потеря эффективности не будет измеримой, если таковая имеется.

Всегда лучше написать хорошо читаемый код.

И, в конце концов, размер вашего первого примера меньше, поэтому загрузкаCSS быстрее.

1 голос
/ 19 декабря 2011

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

Я бы сделал это:

border-width: 1px 0 0 0;
border-style: solid; /* may not be necessary as many browsers use this as default */
border-top-color: #DDD;

Это коротко и не очень загадочно, как выглядит дисплей, и ничего лишнего не делает.

1 голос
/ 19 декабря 2011

По моему мнению, переписывание CSS является частью CSS .

Что касается эффективности, я не думаю, что вы заметите ощутимую разницу (за исключением времени загрузки) вмежду ними.

Важно, чтобы был согласованным, и делал ваш код читабельным.

Что касается вашего примера, я бысделано:

border:none;
border-top:1px solid #ddd;

Просто потому, что я чувствую, что это делает его более читабельным

1 голос
/ 19 декабря 2011

стоит ли жертвовать эффективностью ради меньшего количества кода / читабельности?

Да!Если вам нужна эффективность, сжимайте ваш код , но всегда имейте полностью читаемую, простую в модификации, понятную и точную исходную версию.иметь ноль встроенных стилей.Если это всего лишь один элемент, присвойте ему id и поместите стиль для него в свой файл CSS.

0 голосов
/ 14 сентября 2016

Что касается сжатия: не уверен, что авторы имели в виду под этим, но если вы минимизируете код, браузер на другом конце не "унифицирует" его, чтобы прочитать его, как мы хотели бы.В любом случае пустое пространство игнорируется, и если его там нет, это, вероятно, даже ускоряет анализ ...

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...