Directory of RSS feeds

RSS feeds in the directory: 2799

Added today: 0

Added yesterday: 0

Hi-Tech / Internet

Components and separation of concerns

Css-live - Severstal your world! 10.07.2018 at 18:48

Community that speaks the languages of HTML, CSS and JavaScript

Translation of the article Components and concerns from published on with permission of the author by Jeremy Keith

Sometimes we are too addicted to the false opposition in the world of web design and web development. Recently, I noticed one pop up regularly in the design of systems and components.

This is about shared responsibility. The web has a long history of separation of structure, presentation and behavior using HTML, CSS and JavaScript. It regularly serves us. If you write code in this order to ensure that something worked (in some way) before adding the next layer, the result will be reliable and resilient to failures.

But in the present era of a component indicate that it makes sense to divide things according to their function. Here is what Diane Mounter in his great article about the design system in Github:

Instead of having to share the responsibility for languages (like HTML, CSS and JavaScript), we are committed to the model of division of responsibility at the component level.

This is very consonant with the thesis stated earlier in the presentation, Cristiano Rastelli.

the Division of responsibility in accordance with the objective of each component is more than logical... but that doesn't mean that we should cease to separate structure, presentation and behavior! Why not do both?

In the "traditional" division of responsibility in the web (HTML/CSS/JavaScript) there is nothing that restricts it's just simple pages. I would say that it just works best if you apply it at something small scale.

In his article "the First library patterns: an approach to the control of CSS" Rachel advises to start each component with a good markup:

You should always start with well-structured markup.

This ensures that your content is available on the most basic level, but it also means that you can take advantage of the normal flow (i.e. the most basic CSS layouts, blocks and lines of text — approx. transl.).

basically this approach, the rule language with the least capacity (the more powerful the language data is processed, the harder it is to use these data in the future, so if the problem can be solved in simple, purely descriptive language, it is not necessary to select a complex procedural; sometimes considered a special case of the principle of least privilege with regard to the choice of language — approx. transl.). In Chapter 6 of the book "Sustainable web design" I have outlined a three-step process that I follow when designing for the web:

to Determine the basic functionality to Make this functionality available using the most simple technology, which only you can Add to improve!

the Chapter is full of examples of how to apply these steps to the whole site or product, but it is not necessary to stop on it:

This three-step process can be applied at the scale of individual components on the page. "What is the main functionality of this component? How can I make this functionality available using the simplest technology? But now how can I improve it?"

the division of responsibility when creating pages when creating components, there is another common benefit. In the case of pages, the question "what's the main functionality?" will help you to find a good URL. With respect to the components this will help to come up with a good name... and this is what constitutes the core of good design system. In his brilliant book "Design system" Ala recommends that you ask the question "what is the purpose?", to achieve a good common language for everyone who works with the components.

My thesis is:

to Separate structure, presentation and behaviour is good. To divide the interface components is good.

These ideas not contradict each other. To present them as a mutually exclusive choice — it's like saying "I used to eat Italian food, but now I drink Italian wine." They work best in combination with each other.