IKEA 가구 디자인의 모듈성에 대해 이야기하다

IKEA 에 대해 오랫동안 알고 있었는데, 광저우에 있을 때 한 번 가본 적이 있어요. 크고, 비싸고, 똑똑하다는 인상을 받았어요. 장소는 크고 물건은 비싸며 디자인은 영리합니다. 저는 지금 IKEA에서 멀지 않은 곳에 살고 있어요. 이번 달에는 쇼핑하러 갈 시간이 생겼어요. 장소는 여전히 너무 크고, 물건도 여전히 너무 비싸고, 디자인도 여전히 너무 영리해요. 아무것도 사지 않았지만 그래도 얻은 게 있어요. IKEA의 가구 디자인 방식을 통해 우리는 모듈성에 대해 이야기할 수 있어요.

IKEA에 가본 학생들은 IKEA 가구가 기본적으로 모듈식이며 분리 가능하다는 점을 알아차렸을 것입니다. 모듈성의 특성도 마찬가지다. 결합이 가능하고, 상대적으로 독립적이며, 필요할 때 쉽게 추가할 수 있다. 그렇다면 이 방법을 기본적으로 어떻게 구현할 수 있을까요? 간단한 예를 들어보세요:

해당 CSS는 다음과 같이 작성할 수 있습니다.

.모드-a{...}
.mode-a h3{...}
.mode-a p{...}

그 중 "mode-a"는 이 모듈의 이름으로 "a"라는 이름의 모듈임을 나타냅니다. 이제 이 모듈을 필요한 곳에 배치할 수 있습니다. 모듈을 만들고 있으므로 하나만 있는 것이 아니라 "mode-b"를 하나 더 추가합니다.

해당 CSS는 다음과 같이 작성할 수 있습니다.

.모드-b{...}
.mode-b h3{...}
.mode-b div{...}
.mode-b h4{...}
.mode-bul li{...}

실제 응용 프로그램에서는 클래스 정의의 복잡성을 줄이기 위해 일부 클래스 이름을 추가해야 하는 경우가 많습니다. 이 예는 비교적 간단하지만 모듈화의 특성을 설명하는 데 충분합니다. 위의 두 모듈은 하나 이상의 페이지에서 동시에 사용할 수 있습니다.

IKEA 매장에서는 제품 영역이 기본적으로 디자이너별로 구분되어 있으며, 특히 작은 품목의 경우 더욱 그렇습니다. 효율성을 높이기 위해 모듈화된 코드를 다른 사람들에게 할당하여 작성할 수도 있습니다. 물론, 이 방법을 구현하려면 모듈의 명명 규칙, 인터페이스가 모듈에 남아 있어야 하는 등 몇 가지 작업도 수행해야 합니다. 위의 예에서와 같이 이름이 "mode"로 시작하고 모듈 제목이 h3 태그를 사용하는 것에 동의할 수 있습니다. 이렇게 하면 누가 모듈을 작성하든 프로젝트의 페이지와 호환됩니다.

이것을 보면, 모듈의 고정된 구조는 위에서 합의하였으므로, 각 모듈의 스타일 정의에서 이 부분이 중복되지 않는지 알 수 있습니다. 예. 관련 규칙이 형성되면 스타일 정의의 이 부분을 제안하고 프로젝트의 공개 정의에 넣어 코드 중복을 줄일 수 있습니다. 위의 예는 다음과 같습니다.

/* =S 전역 */
h3{
/* 첫 번째 작성 방법 */
...
}
.mode-a h3,
.mode-b h3{
/* 두 번째 작성 방법*/
...
}
/* =E 전역 */
/* =S 모드-a */
.모드-a{...}
.mode-a p{...}
/* =E 모드-a */
/* =S 모드-b */
.모드-b{...}
.mode-b div{...}
.mode-b h4{...}
.mode-bul li{...}
/* ==E 모드-b */

IKEA에 있는 작은 아이템들이 종종 다른 아이템들과 결합될 수 있다는 사실을 알고 계셨나요? 이는 또한 모듈성이라는 또 다른 주제, 즉 모듈 내의 모듈을 불러옵니다. 즉, 모듈 안에 다른 모듈이 존재할 수 있다는 것 역시 이해하기 쉽습니다. 마치 우리가 웹사이트를 만들 때와 마찬가지로 전체 페이지의 구조는 하나의 큰 모듈과 같고, 위에서 언급한 예는 하나의 모듈 내의 모듈입니다. 모듈이지만 이 정의를 한 수준 아래로 좁혀 보겠습니다. 위 예에서 h3의 정의는 모듈 "mode-a"와 "mode-b" 모두에 나타나며 구조적 성능은 상대적으로 고정되어 있습니다.

좋아요, 이것은 단지 라벨의 정의일 뿐입니다. 라벨이 두 개 이상 있으면 어떻게 될까요? 예를 다시 바꿔보겠습니다.

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

위에서 볼 수 있듯이 "mode-a"는 "mode-b"와 "mode-c"의 일부일 때 모듈 내의 모듈이 됩니다. 더 관련성 있는 토론이 촉발되기를 바라면서 벽돌을 떨어뜨립니다.