Рефакторинг CSS для устранения "магических чисел"

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

Надеюсь, это поможет мне по-другому думать об их устранении в будущем.

Мой пример на CodePen: http://codepen.io/kevinsperrine/pen/LiGlb

Редактировать: строка 51 файла CSS содержит "магическое число".

top: -42px;

Редактировать 2: В попытке прояснить то, что я спрашиваю: в Руководстве по стилю WordPress магическое число CSS определяется как число, которое используется один раз для "исправления" (читай: помощь) проблемы. Я спрашиваю больше о том, как изменить как HTML, так и CSS, чтобы даже не использовать -42px. По моему опыту, проблемы такого рода часто возникают в веб-разработке, поэтому я использовал этот случай в качестве примера в надежде, что кто-то более опытный, чем я, сможет рефакторинг кода, так что "магические числа" не нужны.

Источник

4 ответа

Решение

Я переработал код в эти части ниже. По сути, я удалил два разных тега img и включил их в качестве фоновых изображений на классах. Это позволяет мне установить высоту иконки поиска одинаковой в модальном поиске. При нажатии добавляется активный класс, который меняет как фоновое изображение, так и позицию z-индекса, так что оба изображения всегда находятся в одном и том же месте. Нет необходимости в хаке -42px, чтобы переместить "активное" изображение обратно туда, где оно находится. Полный код доступен на развилке моего оригинального кода.

<! --- HTML -- >
<div class="search-modal-container">
    <a id="search" class="search" href="#search" data-target=".search-modal"><i class="icon icon-20 icon-search"></i></a>
    <div class="search-modal is-hidden">
      <div class="search-modal-input">
        <form action="" method="post">
          <input type="text" value="" placeholder="Search">
          <input type="submit" value="GO" class="btn btn-primary btn-full">
        </form>
      </div>
    </div>
</div>

CSS (Less) теперь выглядит так:

/* CSS */
.search-modal-container {
  float: right;
  position: relative;

  &:after {
    content: "";
    display: table;
    clear: both;
  }
}

.search-modal {
    background-color: @menu-background-color;
    height: 100px;
    min-width: 325px;
    position: absolute;
    right: 0;
    z-index: @zindexModal;
    box-shadow: 1px 5px 4px @background-color;
    border-radius: 2px;
}

.is-hidden {
    display: none; 
}

.search {
  float: right;
}

.icon-search {
  width: 20px;
  height: 100px;
  display: block;
  background: url("http://c3.goconstrukt.com/img/search.png") no-repeat center center;
}

.icon-search.is-active {
  position: relative;
  z-index: @zindexModal + 1;
    background: @background-color url("http://c3.goconstrukt.com/img/search-active.png") no-repeat center center;

      &:after {
        content: '';
            width: 0;
            height: 0;
            border-width: 50px 15px 50px 0;
            border-style: solid;
            border-color: transparent @background-color;
        position: absolute;
        right: 100%;
    }
}

.search-modal-input {
    padding: 0.75em;
    float: left;
}
Источник

Посмотрите на LESS: он делает именно это и многое другое. Очень хороший препроцессор для CSS.

Источник

Вы можете использовать язык программирования, такой как php, чтобы избавиться от magic numbers:

-----------------mystyle.php

<?php const magic=-42; ?>
      .search-modal{
        top: <?php echo magic; ?>
      }

----------------index.php

<head>
 <style>
   <?php include 'mystyle.php'; ?>
 </style>
</head>
<body></body>

Или вы можете использовать веточку. ----------------mystyle.twig.hrml

{% set magic=-42 %}
   .search-model{
       top: {{ magic }};
   }
Источник

Крис Койер в этом посте http://css-tricks.com/magic-numbers-in-css/ объясняет, что в CSS магические числа:

"Они обычно всегда так или иначе связаны со шрифтами"

и это

"Магические числа в CSS относятся к значениям, которые" работают "при некоторых обстоятельствах, но являются хрупкими и склонны ломаться при изменении этих обстоятельств"

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

@Kevin Perrine версия может быть лучше для макета imgs, но посмотрите, что модальный контейнер выше, чем оригинальная версия. Если вы хотите поместить его в более низкую позицию, вы можете установить свойство top какого-либо контейнера на любое число, соответствующее вашим потребностям, даже не округленное число, равное 42.

Но, конечно, если есть способ предотвратить использование случайного числа, это путь

Источник
Другие вопросы по тегам