Shulou(Shulou.com)06/03 Report--

Today, I will talk to you about the example analysis of CSS design principles, which may not be well understood by many people. In order to let you know more, Xiaobian summarized the following contents for you. I hope you can gain something according to this article.

I believe most people have had painful experiences with CSS. In less than two years since I joined the company, the most common CSS related discussion I have heard is 'It's hard to tune.' So I've been exploring what's going on here, why many people find CSS so hard to write, and how to get others to write CSS more elegantly. In Code Review, I gradually discovered the problem, in fact, many people have mastered a wealth of CSS knowledge, but do not know how to group attributes written in class. Finally, we have to randomly name the elements that need to change the style as class and then throw all the attributes to be written into this class. If the priority is not enough, we will add the previous selectors. As a result, CSS code piles up, duplication and redundancy increase, and maintenance becomes difficult.

The problem was found, but how to solve it, although I shared it several times in the project team, and often raised some questions in Code Review, it still had little effect. Sometimes it's easy to know what's right, but it's hard to know how to do it. Until recently, after reading a few books, I found a very suitable way to guide CSS design, and that is the five whys or five questions. The Five Questions method came from Toyota Lean Production and naturally evolved into Lean Entrepreneurship. It can be seen in DDD and UX related books. Its main purpose is to deeply discover the real reasons behind a large number of phenomena. At first glance, it seems like a management method, but in fact, I think it is a way of thinking, that is, to find the root cause of the problem and solve it. So applied to all areas, nature is also appropriate for the problems faced by CSS.

exemplary scenario

One day Code Review found a CSS code that looked like this:

CSS

.max-width {

max-width: 300px;

}

This led to the following dialogue (pure fiction):

UI Dev: "It shouldn't be written like this, what's the difference between writing inline styles directly? "

Dev: "If I don't add the maximum width, there will be an extra part to the left of that element on the page. Otherwise, can I add a margin?" "

UI Dev: "This... I'm not sure. I've never had a problem like this before. There must be something wrong. "

Dev: "It's really bad to write this way. After a while, I don't know what this line of code means, and I dare not modify it. But how exactly should it be written? "

UI Dev: "Well, let's try five whys to find the root cause of the problem. "

Dev: "Well, CSS has been bothering me for a long time, and it would be best if it could be solved. "

UI Dev: "First ask, why do you want to give maximum width to elements? "

Dev: "Because if you don't add it, you'll have more. "

UI Dev: "So why is there an extra part of this element? "

Dev: "Because it didn't add the maximum width, just kidding, don't get mad, actually I'm not sure, but looking at it with DevTools, it seems that the parent element's width is not right either. "

UI Dev: "It's close, why is the parent element not the right width? "

Dev: "Because the padding of the parent element is different on both sides. "

UI Dev: "Why are parent element padding inconsistent? "

Dev: "Ah, I see, it turns out that the parent element of the parent element wrote a last pseudo-selector, which is used to set padding-right to 0, because the parent element now happens to be the last one, so it is affected. "

UI Dev: "Don't worry, why set padding-right of the last element to 0? "

Dev: "Because the original last element is a control that cannot be styled, you need to set padding-right to 0 to put it down. "

UI Dev: "So that's the problem, our intention was to add padding-right 0 to the container of the space, right? Instead of adding to the last element, you should write a class, maybe something called 'widget-container', put it on that container, and then delete the last pseudo-selector, and everything will be fine. What went wrong was actually fine. "

Dev: "So that's it. Great. I learned that what's wrong with style isn't necessarily what's wrong with code. Five reasons are so useful. "

Repeatedly asking "why" allows us to find the root of the problem. If we only solve the problem from the surface phenomenon, it is likely to lead to the opposite consequences. And the last pseudo-selector in the example is simply written rudely without finding the root cause. This example also nicely illustrates five why CSS benefits, not only to find the root cause of the problem, but also to make our intent clearer when writing CSS. The element with padding-right 0 is the container for that control, so it's easy to come up with a name like "widget-container" because the five whys find the real intent, and then what class to call and where it should be placed is natural.

proportional input

But sometimes the projects we're working on aren't so kind, and the more layers of why, the more complex the CSS relationships, so let's talk about one of the five important principles of why, proportional investment. The main idea is that small problems have small investment, big problems have large investment, and the higher the problem level, the larger the investment should be. In CSS, when a style anomaly is found, the five whys are used. The more repetitions of the root cause, the more serious the problem is and the more investment should be made in the solution to the problem.

Going back to the example above, through an element-position anomaly, the root cause was found to be a container element that required zero padding for a control, and since it was first discovered, the solution was chosen to invest less, adding a class to remove padding for the control. So far it seems to be correct, but if you dig deeper into this control from different problems one after another, it means that the problem level has increased, and you should not just add this class to each container that calls the control. At this point we can consider other ways, such as setting all container margins to 0, adding targeted margins to inner elements, modifying or even replacing the control if the problem level continues to increase, or refactoring other parts to accommodate the control. In short, it is necessary to choose the means to solve the problem according to the problem level. This benefit is not only that the efficiency can be automatically adjusted as in Lean, but also that the corresponding restructuring can be made when the style requirements are more clear.

Because CSS is descriptive, it is free, so there are often 100 implementations for the same requirement by 100 developers. The first time a requirement is encountered, it is even more difficult to write the best implementation, only to write a dedicated class specifically to throw in the required attributes. The question isn't really that, but whether you can refactor the original code later when the same problem arises, writing a more universal class based on all relevant problems. Experienced UI Dev will sometimes judge by experience and write this class directly, as is the case with frameworks such as Bootstrap, but developers with no or less experience will have doubts. The five whys principle of proportionality is a great way to drive CSS development, connecting problems that occur on different elements and even different pages with deep root causes, so that we can safely organize our code at the current problem level, and wait until we encounter the problem again and find it, then refactor it again to solve it.

After reading the above, do you have any further understanding of the sample analysis of CSS design principles? If you still want to know more knowledge or related content, please pay attention to the industry information channel, thank you for your support.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.