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

Question

Я работаю над страницей с существующей компоновкой, которая была написана в 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 понять, что происходит на самом деле (я определил все константы в верхней части файла).

Итак ... из вашего опыта, что хорошего баланса для забастовки здесь между нарушениями DRY/no-inter-dependent-magic-constant и написанием простого краткого кода?

Answer 1

EDIT: Я просто хочу перефразировать/повторить то, что я сказал ниже. Подумайте об этом, написав класс/метод для подключения к базе данных, которая принимает аргументы с учетными данными db - лучше хранить эти учетные данные где-то в другом месте, а не жестко кодировать их в классе/методе, правильно? :)

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

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

Вы писали, что вы должны прыгать вверх и, чтобы понять, что происходит, я не совсем понимаю вас здесь. Вы определяете @variables, используете их в определении класса и ... перестаете беспокоиться об этом! СЕЙЧАС. Если вы хотите изменить его, вам не нужно вскакивать вверх и вниз, чтобы найти это объявление элемента, пройти другие свойства, которые вас не интересуют, вы просто найдете раздел «Переменные макета» в ваших переменных. меньше, и измените его там! Компиляция с CSS и et voila!

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

---

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

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

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

Надеюсь, это поможет!