Использование констант less-css, чтобы избежать ручных магических констант - всегда или только в простых случаях? - PullRequest
Новая
       21

Использование констант less-css, чтобы избежать ручных магических констант - всегда или только в простых случаях?

2 голосов
/ 21 февраля 2012

Я работаю над страницей с существующим макетом, которая была написана на CSS давно.Поскольку у нас меньше возможностей, я переименовал его в .less и добавляю в него возможности LESS, когда это уместно.

Одна из моих неприятностей в оригинальном CSS - это магические константы, которые зависят друг от друга.Всякий раз, когда я хочу изменить отступ на внутреннем элементе div, мне нужно также изменить его ширину, чтобы соответствовать оставшемуся пространству.Итак, думая, что я такой крутой, я обошел вокруг и преобразовал эти знания в язык МЕНЬШИХ констант: 

@mainContentPageWidth: 945px;
@widgetAreaWidth:220px;
@contentpagecontent-padding-right: 20px;
@contentpagecontent-padding-left: 10px;
@contentpagecontent-width:@mainContentPageWidth - @widgetAreaWidth - @
  contentpagecontent-padding-right @contentpagecontent-padding-left;

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

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

Итак ... по вашему опыту, какой хороший баланс можно достичь здесь между СУХОЙ / без взаимозависимой магиипостоянные нарушения и написание простого лаконичного кода?

1 Ответ

1 голос
/ 22 февраля 2012

РЕДАКТИРОВАТЬ: я просто хочу перефразировать / повторить то, что я сказал ниже.Думайте об этом как о написании класса / метода для подключения к базе данных, которая принимает аргументы с учетными данными db - лучше хранить эти учетные данные где-то еще, а не жестко кодировать их в классе / методе, верно?:)

Но, конечно, вы можете относиться к этому более свободно - например, если вы на 100% обеспокоены тем, что ваш макет никогда не изменится, а ширина / отступы / поля не изменятся, перейдитевперед и написать их в обычном стиле CSS.Но если вы захотите изменить один и тот же макет на одной из страниц (или повторно использовать его в другом проекте), то имеет смысл определить переменные.

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

Вы писали, что вам нужно прыгать вверх и вниз, чтобы понять, что происходит - ну, я не совсемпонимаю тебя здесь.Вы определяете @variables, используете их в определении класса, и ... вы перестаете беспокоиться об этом!ТЕПЕРЬ - Если вы хотите изменить его, вам не нужно прыгать вверх и вниз, чтобы найти объявление этого элемента, просмотреть другие свойства, которые вам не интересны, вы просто найдете раздел «Переменные макета» в ваших переменных.меньше, и поменяй его там!Скомпилируйте с CSS и пр. Voila!

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

Посмотрите на этот пример:)

Вполне нормально написать столько переменных, сколько вы хотите, но имеет смысл поддерживатьэто в отдельном файле.

Не беспокойтесь о написании слишком большого количества переменных, потому что все это скомпилировано в CSS, и @placeholder будут заменены фактическими значениями.

Hopeэто помогает!

...