Главная страница>Учебник по веб-дизайну>ВЕБ-стандартизация

Говоря о модульности в дизайне мебели IKEA

Автор:Eve Cole Время обновления:2009-06-26 18:11:04


Соответствующий CSS можно написать так:

.mode-b{...}
.mode-b h3{...}
.mode-b div{...}
.mode-b h4{...}
.mode-b ul li{...}


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

В магазинах ИКЕА вы, возможно, заметили, что товарные зоны в основном разделены дизайнерами, особенно это касается мелких предметов. Модульный код также можно поручить написание разным людям для повышения эффективности. Конечно, чтобы реализовать этот метод, нам также нужно проделать некоторую работу, например соглашение об именовании модуля, где интерфейсы нужно оставить в модуле и т. д. Как и в приведенном выше примере, можно договориться, что имя начинается с «mode», а в заголовке модуля используется тег h3. Таким образом, независимо от того, кто напишет модуль, он будет совместим со страницами проекта.

Увидев это, вы можете обнаружить, что, поскольку фиксированная структура модуля была согласована выше, не является ли эта часть, написанная в определении стиля каждого модуля, избыточной? Да. Если соответствующие соглашения сформированы, эта часть определения стиля может быть предложена и включена в публичное определение проекта, чтобы уменьшить избыточность кода. Приведенный выше пример может стать:

/* =S глобальный */
ч3{
/* Первый способ записи */
...
}
.mode-a h3,
.mode-b h3{
/* Второй способ записи*/
...
}
/* =E глобальный */
/* =S режим-a */
.mode-a{...}
.mode-a p{...}
/* =E режим-a */
/* =S режим-b */
.mode-b{...}
.mode-b div{...}
.mode-b h4{...}
.mode-b ul li{...}
/* ==Режим E-b */


Интересно, замечали ли вы, что эти небольшие предметы в ИКЕА часто можно комбинировать с другими предметами? Это также поднимает еще одну тему модульности: модули внутри модулей. То есть в модуле могут существовать и другие модули, что тоже легко понять. Так же, как когда мы создаем веб-сайт, структура всей страницы похожа на большой модуль, а приведенный выше пример — это модуль внутри. модуль, но давайте сузим это определение на один уровень. Определение h3 в приведенном выше примере можно рассматривать как модуль. Он присутствует в обоих модулях «mode-a» и «mode-b», и его структурные характеристики относительно фиксированы.

Хорошо, это всего лишь определение метки. А что, если меток несколько? Давайте снова изменим пример:



Модульная демонстрация


Пример модульной структуры.




Модульные функции:


<ул>
  • Относительно независимы.

  • Высокая мобильность






  • Модульная демонстрация


    Это пример «модуля внутри модуля».




    Модули внутри модулей:


    Модуль «mode-a» — это модуль внутри модуля.




    /* =S режим-a */
    .mode-a{...}
    .mode-a h3{...}
    .mode-a p{...}
    /* =E режим-a */
    /* =S режим-b */
    .mode-b{...}
    .mode-b h4{...}
    .mode-b .cont{...}
    .mode-b .cont ul li{...}
    /* =E режим-b */
    /* =S режим-c */
    .mode-c{...}
    .mode-c h4{...}
    .mode-c .cont{...}
    .mode-c .cont p{...}
    /* =E режим-c */

    Как видно из вышеизложенного, «режим-a» является независимым модулем. Когда он является частью «режим-b» и «режим-c», он становится модулем внутри модуля. Отбрасываем кирпичи, надеясь вызвать более релевантные дискуссии.