Since it is easy to write CSS, why do we still write the CSS so bad?

I saw a good CSS article in the translation, so I turned it over.

Before you start reading this article, be sure to be prepared. Because I write 90% are complaining, only the last about 10% to introduce CSS skills best practice. Give you a good shot in advance.

Front-end engineers may encounter the following dilemmas in their career development:

• At some stage, it's not difficult to feel like you're doing your job.

• The value that the team creates is getting lower.

• Do what you do, and everyone can do it.

Please raise your hand if you agree. If you do, (congratulations) you are a majority.

And to be honest, CSS is really simple. In addition, I can guarantee that even a fool can write the following code:

p {color: red;}

So what do you have to complain about? Heap Pure CSS Code, no need for any tricks. It is also very simple to add a global style to a single element, regardless of the other CSS.

So how hard is CSS?

Back-end development engineer: "Although I have completed the development of new features, but I messed up the front end, but you can rest assured that I have fixed most, so your front-end only need to fine-tune the details, time should not exceed 30 minutes"

So I opened the HTML file and (surprisingly) found all the deprecated HTML tags, without even thinking about responsive design. Take a deep breath, (hinting at yourself), and their CSS will certainly be a little bit better. After I opened the CSS file, however, I found that (again) there was a code that looked like fixed positioning, cleared left float, right float, and!important, so I slowly wrapped my mouse around my neck. (Don't Stop me, let me die)

(Comforting yourself), maybe the code they write won't always be so bad, but (in reality) I hardly see a backend engineer writing a front-end code that can be used. Also good, writing front-end code is not the responsibility of the backend engineer. But ask the backend engineer not to write a bunch of front-end code, and expect front-end engineers to wipe your butt.

So what's the good CSS look like?

The organizational structure of the (project). Especially if you have done a large project, you will find that the organization structure of the project is really important. For a positive example,--steven Bradley writes a directory structure that facilitates the maintenance of the Code, which is written for the SCSS project, but also applies to common CSS projects. It focuses on how to modularize CSS files to form easy-to-maintain files.

Specification. This is probably the biggest problem I've encountered every day. Unfortunately, most engineers ' understanding of the CSS specification is smattering, and it is precisely because of this that it leads to bad CSS code (such as!important) Bad Street. So how do we avoid it? There are a number of naming conventions that are worth referencing, which are designed to reduce the write-dead (very dependent on document structure) CSS selectors. Assuming you don't have a cold, I'd still advise you to avoid using more than 3 layers of CSS class/element selectors, if not necessary.

Naming conventions. With all due respect, naming conventions are standard for any large CSS project. Without naming conventions, CSS becomes both difficult to maintain and unreliable. Naming conventions allow us to easily reuse CSS in our projects and, if necessary, to remove the extra CSS from the project. Here are just a few of the more popular naming conventions, such as: Bem,oocss,smacss and the Hiccup I wrote myself.

Test. At this point, the vast majority of other engineers may not have found out how cool it is to be a back-end engineer. Because the backend engineer's development work requires only one environment (the server on which the site resides) to be normal. Do you know what is the most painful thing about being a front-end engineer? More than 5 browsers and thousands of mobile devices ... Good front-end testing is actually a chore and takes a long time. I've seen a lot of projects that have been postponed because the front-end tests are not taken into account, and usually the front-end tests take longer than expected.

So how to reverse this naïve view of CSS?

In the future work, can no longer let the back-end engineers have the luck mentality. As a front-end engineer, we don't throw a bunch of unresponsive CSS code to the back-end engineers and then walk away. So what makes it possible for them to write useless code and then let us patch it when their CSS code fails? I'm not saying to let back-end engineers write CSS code, but we should tell back-end engineers, if it is difficult to write CSS, do not write. Don't let other engineers think the front end is simple, the front end is not simple, our front-end engineers work as hard as everyone else, don't let them be mistaken.

This article is reproduced from: Zhongcheng translation
Translator: Liuliangsir
Links: http://www.zcfy.cc/article/1683
Original: Https://hackernoon.com/if-css-is-so-easy-why-does-everyone-suck-e4442cc9428a#.bq9c1sev1

For more information, please visit my blog https://www.aaz5.com/index.php/archives/13/

Since it is easy to write CSS, why do we still write the CSS so bad?