A brief introduction to some CSS design principles

I believe most people have the painful experience of CSS, from my joining the company to now, in less than two years, I heard the most CSS-related discussions is ' difficult to tune '. So I have been exploring how this problem, why many people feel that CSS is difficult to write, how to let other people more elegant writing CSS. In the 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 class. Finally, in the need to change the style of the elements on a random name to do class and then put all the attributes to write into this class, if the priority is not enough, then add the previous selector. The result is that CSS code keeps piling up, duplication and redundancy increasing, and maintenance becomes difficult.

Problem found, but how to solve it, although I have done several times in the project team to share, but also often in the code review to ask some questions, but still ineffective. Sometimes it's easy to know what's right, but it's hard to know how to do it right. Until recently, after reading a few books, I found a good way to guide the design of CSS, which is five why or five questions. The five questions came from Toyota's lean production, which was later naturally derived into lean entrepreneurship, and was seen in DDD and UX-related books, with the main thrust of discovering the real reasons behind the massive phenomenon. At first glance it is a management method, in fact I think it is a way of thinking, that is to find out the root cause of the problem and solve. So it's applied to all fields, and naturally the problems facing CSS are just as appropriate.

Scenario Example

First, for example, one day code review found a CSS code that wrote:

CSS code copy content to clipboard

. max-width {

max-width:300px;

}

This resulted in the following dialogues (fictitious):

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 a part of the element on the left side of the page, or would it be possible to add a margin outside margin?"

UI Dev: "This ... I am not sure, I have never encountered such a problem, there must be something wrong. ”

Dev: "It is really not good to write, after a period of time do not know what this line of code meaning, and dare not modify it." But how exactly should it be written? "

UI Dev: "Well, let's try five why, look for the root cause of the problem." ”

Dev: "Good, CSS problem also bothered me for a long time, can solve the best." ”

UI Dev: "First ask, why do you want to add the maximum width to the element?"

Dev: "Because without adding, there will be a part of it." ”

UI Dev: "So why is this element more than a part?"

Dev: "Because no maximum width, a joke, don't be angry, in fact, I am not sure, but with Devtools looked, as if it's the width of the parent element is also wrong." ”

UI Dev: "Is approaching, why is the parent element not the same width?"

Dev: "Because the inner edge of the parent element is different from either side." ”

UI Dev: "Why is the internal margin of the parent element inconsistent?"

Dev: "Ah, I know, originally for the parent element of the parent element wrote a last pseudo selector, it is used to set the Padding-right to 0, because the parent element is now exactly the last one, so it was affected." ”

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

Dev: "Because the original last element inside is a control that cannot modify the style, you need to set the Padding-right to 0." ”

UI Dev: "So that's the problem, and our intention is to give the space container a padding-right of 0, right?" instead of adding to the last element, you should write a class, perhaps called ' Widget-container ' and so on, put on that container, and then delete the last pseudo selector, so everything is normal. There is no problem in the original place. ”

Dev: "The original is so, too good, I learned that the style of the problem is not necessarily the code of the place, five why too useful." ”

So repeatedly asking "why" can let us find the root of the problem, if only from the surface phenomenon to solve the problem is likely to lead to the opposite effect. And in the example of the last pseudo selector is simply rude to write a line of code without finding the root cause. This example is also a good illustration of five reasons for the benefits of CSS, not only to find the root cause of the problem, but also to make our intention to write CSS more clearly. In this way, the problem of class naming is also solved, padding-right should be 0 of the element is the container of that control, so it is easy to come up with the name "Widget-container", because through the five why the way to find the real intention, at this time, What class is called and where it should be is ripe.

Proportional input

But sometimes the project we face is not so good, "why" the more the hierarchy, the more complicated the relationship between CSS, so now we talk about five why one of the important principles, proportional input. The main theme is small, small investment, big problem, big investment, the higher the problem level, the greater the investment should be. In CSS, when you find a style exception, the more times you use the five reasons why the root cause is in depth, the more serious the problem, the more you should put into the solution.

Again, in the example above, with an element position exception, find the root cause from a control that requires a container element with an inner margin of 0, and because of the first discovery, select a smaller solution and add a class for the control to remove the inner margin. Right now it seems to be true, but if you dig deeper into the control from a different problem, it means that the problem level is elevated and you should not just add that class to each container that invokes the control. At this point we can consider other ways, such as setting all containers within the margin of 0, and targeted to the internal element to add the outer margin, if the problem level continues to improve, you can modify or even replace the control, or refactoring other parts to adapt to the control. In short, the problem is to choose the way to solve the problem, such benefits are not only the original in the lean can automatically adjust the efficiency, but also the need for more specific style needs to make the corresponding reconstruction.

Because of the descriptive nature of CSS, which makes it very free, so the same requirements, often 100 developers have 100 implementations. In the first encounter a demand, it is difficult to write the best implementation, can only be targeted to write an exclusive class to throw in the required attributes. The problem is not here, but whether you can refactor the original code when the same problem arises, and write a more general class based on all the relevant questions. Experienced UI Dev can sometimes be judged by experience, and it's the kind of framework that writes the Class,bootstrap directly, but there's no or less experienced developers who have doubts. Five why the proportional input principle can well drive the development of CSS, connecting different elements and even problems on different pages with deep root causes allows us to safely organize the code at the current problem level and then refactor again to solve the problem by waiting for the problem and finding it again.