search

benfrain / ecss

Home for questions and answers relating to the implementation of the ECSS methodology
http://ecss.io
10 stars 0 forks source link

Isolation and Pattern library #11

Closed Takazudo closed 7 years ago

Takazudo commented 7 years ago

Hi Ben.

I have a question about ECSS architecture approach with pattern library.

I read a book "Atomic Design" which is written about design system. In short, "design system" is a UI pattern library shared with all team members. It says that designing & development with design system is great. It makes the development speed up and helps the design taste stable. (Althogh it is just a mental model of UI design)

I can understand Atomic Design approach very well. I have made many many websites using shared UI components. It reduced my work time and I cound made at lots of pages easily.

Anyway, ECSS respects the "isolation" about CSS code base. I can understand ECSS very well because I had the same problem about complicated CSS code. However, I also think the pattern library approach is also very useful as Atomic Design says.

I read an article which says that your company's web service is using ECSS.

http://bet365techblog.com/large-scale-web-development-using-typescript

In the article, it says that the web service was developed with Modular Design.

And, here's my question.

Let's say that there are "Module A" and "Module B". Each modules has the same style button. The same styled button is used everywhere in the website. With "isolation" strategy, it seems that even if the buttons' CSS are same, its CSS should be in each module.

In the ECSS, you also introduced that globally shared modules are also acceptable using sw-(site wide) namespace with care of isolation.

When you developed a web service, did you create "globally shared UI modules"? Or you didn't make that kind of site wide modules at all?

benfrain commented 7 years ago

Hi @Takazudo

Modularity can be achieved by sharing what is intrinsic to a design, without having to share the component or module itself.

Typically, design patterns are made up of distinct typography sizes and rhythms, uniform/established patterns of spacing and colours. All of these attributes are easily shared and consumed by modules from common variables and to a lesser degree, mixins.

In some cases, we do directly use Module A within Module B. However, it is almost always preferable, to let Module A and Module B take their own paths, even though they can be created from the same DNA (colours, spacing, typography codified in the variables/mixins/design system). This provides the isolation which is so important to creating code that is simple to remove and grow in whatever form it needs take without worrying about inter-dependency.

Does that answer your question fully?

Takazudo commented 7 years ago

@benfrain Thank you for your reply, Ben!

I think there are many approaches for design consistency. Your - variable & mixin - based approach sounds that it creates a base stuffs like a thin layer for CSS architecture.

I could notice that there are many ways to do for module oriented architecture. Thanks!