2015-01-27 3 views
1

Я занимаюсь погружением в html/css за последние несколько недель, и теперь я пытаюсь оптимизировать свой код с помощью принципа DRY (наряду с SMACSS/OOCSS/BEM). Я считаю, что у меня есть достойное понимание всего этого, но есть одна вещь, которая до сих пор не ясна для меня.Точность принципа DRY

Должен ли применяться принцип DRY 100% времени? Скажем, например, у вас есть «text-transform: uppercase»; применяется к двум различным классам. Согласно принципу DRY, вы должны удалить набор правил из каждого отдельного класса и поместить его в разделенный запятыми список обоих классов. Но через некоторое время это не делает вашу таблицу стилей полной беспорядком, где каждый класс объявляется несколько раз на одном листе? Или это действительно не имеет значения, как выглядит ваш лист, поскольку вы могли бы просто искать «верхний регистр» в окне поиска, если бы какие-либо будущие изменения были необходимы?

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

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

Есть ли какие-либо рекомендации, чтобы уйти? Например, возможно, только комбинирование повторяющегося кода, если количество свойств, которые вы удаляете, больше, чем X? Или только комбинирование повторяющегося кода, когда они связаны семантически?

+1

Наверное, лучше всего спросить у [programers.se]. – JJJ

+0

В 2015 году будет очень сложно найти устройство, которое будет бороться с CSS (без злоупотребления преобразованиями/переходами/тенями), независимо от того, как вы его пишете, поэтому вам не стоит беспокоиться о производительности, а также о том, как повысить надежность кода. – Shomz

+0

Препроцессор CSS, такой как LESS или SASS, поможет вам DRY, не жертвуя ремонтопригодностью. В правиле DRY я бы сказал, что это применимо, когда два класса будут ВСЕГДА меняться вместе. В примере с верхним регистром, если у вас есть тема, в которой определенные заголовки имеют верхний регистр, тогда DRY имеет смысл. Если каждый заголовок может быть прописным или строчным, тогда DRY не имеет смысла, поскольку они меняются независимо в концепции. –

ответ

2

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

Пожалуйста, не поймите неправильно. DRY важно, но вы должны умерить его (или любой другой шаблон дизайна) с вариацией простой проверки здравомыслия: «Имеет ли это смысл?». В случае СУХОЙ это будет нечто вроде «Связаны ли они?».

Если ответ «да», сильно подразумевающий, что если один из классов должен был сбросить text-transform:uppercase;, то другой также будет, а затем всем средним вытащить его.

Если ответ «нет», то на самом деле вам будет сложно поддерживать его позже, потому что вам нужно будет отменить искусственную связь между этими двумя классами.

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

0

Принцип DRY - все о «не повторяется». Если вы только собираетесь работать над одним и тем же файлом, я предлагаю сделать код таким понятным (достаточно чистым) для вас, чтобы вы могли легко редактировать его, когда вам нужно. Но если другие будут работать над этим, еще важнее, чтобы вы сохраняли его как чистый и сухим.

Вы можете утверждать, что применение принципа DRY на самом деле не является необходимым, так как вы можете повторить себя, и код все равно будет работать. Но тогда вы можете спорить, зачем использовать Sass (который является компилятором и может сделать ваш css еще короче), и вы можете спорить, зачем сжимать ваш файл css (так что сайт загружается быстрее), потому что без него он все равно будет работать!

Мой совет - ВСЕГДА подумайте о том, чтобы держать его сухим и чистым, насколько это возможно. В вашем примере вы указываете на небольшую деталь, и метод DRY не будет иметь большого значения при очистке вашего CSS, и вы поймете, что сохранили только две дополнительные строки CSS. Но что, если вы примените его, когда у вас есть 10.000 строк CSS?

Это заставляет вас определять недвижимость только ОДИН. И если вам нужен пример того, насколько важны и сколько строк кода он может вас сэкономить, проверьте это: http://www.slideshare.net/jeremyclarke/dry-css-a-dontrepeatyourself-methodology-for-creating-efficient-unified-and-scalable-stylesheets

В конечном счете, это будет держать вашу таблицу стилей намного более чистой, понятной для вас и других и намного проще редактировать! Итак, я бы сказал, что это очень важно, и если вы можете начать его с самого начала, вы будете очень благодарны позже :)

0

Должен ли применяться принцип DRY 100% времени?

Нет, это не должно быть.

DRY предназначен для управления каноническим источником информации. DRY предназначен для устранения проблемы «эта информация появляется дважды, но не то же самое - что правильно?».

Там нет никакой разницы от DRY между:

.foo { text-transform: uppercase; color: red } 
.bar { text-transform: uppercase; color: blue } 

и

.foo { color: red } 
.bar { color: blue } 
.foo, bar { text-transform: uppercase; } 

, потому что text-transform: uppercase действует одна единица информации. Суть DRY заключается не в том, чтобы заставить кодеры реплицировать алгоритм сжатия путем рефакторинга повторяющихся строк, а для определения мест, где многократно выражаются одни и те же семантические отношения.

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

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

Смежные вопросы