CSS development in the 10 not

Self-entry into the industry, I found that developers have been trying to conquer CSS.

The reason is also very good, developers are logical thinking of living organisms. Adding a DIV element causes all code to move down one line, while the other div "floats" to the left, feeling meaningless.

You must have heard the developers complain:

"We just need to move five pixels to the left, but ... Oh, my God! Why did the whole thing move down one line. What the hell is wrong?!?!?! ”

So, let's talk about the top ten mistakes in CSS today.

Based on my experience of using CSS as a developer, here are my 10 "no".

1. Do not misuse the class
Use an ID in a meaningful place instead of using a class. This is a method that allows the browser to access DOM elements more quickly.

2. Don't throw everything into a CSS file
Partitioned CSS makes it easier to manage. Each CSS file can be decomposed into logical components such as HEADER.CSS, Footer.css, and so on.

3. Do not name selectors as ". Red-with-green-dashed-lines" (red and green dashed lines)
Name your selector based on the components on the page. For example: "Header-left", "Content-title" or "content-date" are more descriptive.

4. Don't forget to comment
Annotations are important in CSS and can be used to understand how each style is associated with other styles and what color schemes apply to which components.

5. Don't be afraid to develop tools
Each browser now has its own set of development tools, usually press F12. These tools are critical when debugging CSS.

6. Don't be afraid to cover
Of course, CSS frameworks, such as Bootstrap and foundation, are huge, but each one needs to be adjusted to your needs. When you get an updated frame, it will overwrite your changes. Rather than digging into a huge CSS file, you might as well create a bootstrap-overrides.css file that adjusts the frame as you wish, just ...

7. Don't abuse! It's important.
The overall idea of CSS is to "cascade" styles from one to the other. The point is to remember that the demining is going through all the previous styles as well.

8. Do not use a large number of network fonts
This is also obvious, but some people just like their own typesetting. Use only one or two (up to three) network fonts on the site, and then return to the browser default settings to keep the site optimized.

9. Do not manually encode all the CSS
To keep the CSS dry, you can use a CSS preprocessor such as less or sass. The biggest benefit of using these preprocessor is that you can define variables, such as defining a color scheme above, and then reusing all the CSS, without having to track each color when you need to modify it.

10. Don't make CSS too "bloated"
Spaces occupy the space of the CSS file. Since we all want our CSS to load quickly, it's best to use CSS compression tools to slim down before deploying to a website.

These are just a few things I think I should not do as a developer when I write CSS. We welcome different views.

Xiao Feng Source: code Rural Network
Link: http://www.codeceo.com/article/css-10-bad-practices.html
English original: Top CSS bad practices

CSS development in the 10 not