Falando sobre modularidade no design de móveis da IKEA

Conheço a IKEA há muito tempo e fui lá uma vez quando estava em Guangzhou. Tive a impressão de que é grande, caro e inteligente. O lugar é grande, as coisas são caras e o design é inteligente. Agora moro não muito longe da IKEA. Encontrei tempo para fazer compras este mês. O lugar ainda é tão grande, as coisas ainda são tão caras e o design ainda é muito inteligente. Embora não tenha comprado nada, ainda ganhei algo. Através dos métodos de design de mobiliário da IKEA, podemos falar de modularidade.

Os alunos que visitaram a IKEA devem ter notado que os móveis da IKEA são basicamente modulares e removíveis. O mesmo se aplica às características de modularidade. Pode ser combinado, relativamente independente e facilmente adicionado quando necessário. Então, como podemos basicamente implementar esse método? Dê um exemplo simples:

O CSS correspondente pode ser escrito assim:

.modo-a{...}
.modo-a h3{...}
.mode-a p{...}

Entre eles, "mode-a" é o nome deste módulo, indicando que este é um módulo denominado "a". Agora este módulo pode ser colocado onde você precisar. Como estamos fazendo um módulo, não haverá apenas um, adicionamos outro “mode-b”:

O CSS correspondente pode ser escrito assim:

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

Em aplicações práticas, muitas vezes é necessário adicionar alguns nomes de classes para reduzir a complexidade das definições de classes. Este exemplo é relativamente simples, mas é suficiente para ilustrar as características da modularidade. Os dois módulos acima podem ser usados ​​em uma ou mais páginas ao mesmo tempo.

Nas lojas IKEA, você deve ter notado que as áreas de produtos são basicamente divididas por designers, principalmente os itens pequenos. O código modularizado também pode ser atribuído a diferentes pessoas para escrita, a fim de melhorar a eficiência. Claro, para implementar este método, também precisamos fazer alguns trabalhos, como a convenção de nomenclatura do módulo, onde as interfaces precisam ser deixadas no módulo, etc. Como no exemplo acima, pode-se concordar que o nome começa com “mode” e o título do módulo usa a tag h3. Desta forma, não importa quem escreva o módulo, ele será compatível com as páginas do projeto.

Vendo isso, você pode descobrir que, uma vez que a estrutura fixa do módulo foi acordada acima, esta parte não é redundante na definição de estilo de cada módulo? Sim. Se convenções relevantes tiverem sido formadas, esta parte da definição de estilo pode ser proposta e colocada na definição pública do projeto para reduzir a redundância de código. O exemplo acima pode se tornar:

/* =S global */
h3{
/* A primeira maneira de escrever */
...
}
.mode-a h3,
.modo-b h3{
/* A segunda maneira de escrever*/
...
}
/* =E global */
/* =S modo-a */
.modo-a{...}
.mode-a p{...}
/* =E modo-a */
/* =S modo-b */
.modo-b{...}
.mode-b div{...}
.modo-b h4{...}
.mode-b ul li{...}
/* ==E modo-b */

Gostaria de saber se você notou que esses pequenos itens da IKEA muitas vezes podem ser combinados com outros itens diferentes. Isto também traz à tona outro tópico de modularidade: módulos dentro de módulos. Ou seja, podem existir outros módulos no módulo, o que também é fácil de entender. Assim como quando fazemos um site, a estrutura de toda a página é como um módulo grande, e o exemplo mencionado acima é um módulo dentro de um. módulo, mas vamos restringir esta definição a um nível. A definição de h3 no exemplo acima pode ser considerada como um módulo. Ele aparece nos módulos "modo-a" e "modo-b", e seu desempenho estrutural é relativamente fixo.

OK, esta é apenas uma definição de rótulo. E se houver mais de um rótulo? Vamos mudar o exemplo novamente:

/* =S modo-a */
.modo-a{...}
.modo-a h3{...}
.mode-a p{...}
/* =E modo-a */
/* =S modo-b */
.modo-b{...}
.modo-b h4{...}
.mode-b .cont{...}
.mode-b .cont ul li{...}
/* =E modo-b */
/* =S modo-c */
.modo-c{...}
.modo-c h4{...}
.mode-c .cont{...}
.mode-c .cont p{...}
/* =E modo-c */

Como você pode ver acima, "mode-a" é um módulo independente. Quando faz parte do "mode-b" e do "mode-c", ele se torna um módulo dentro do módulo. Deixando cair os tijolos, na esperança de provocar discussões mais relevantes.