8 tips to help you write a good CSS code

1QJNMMN GBHJNHBGFSJKGFF Writing basic CSS and HTML is one of the first things we learn as Web developers. However, many of the applications I encountered apparently did not take the time to really consider the long-term and maintainable nature of front-end development.

I think this is mainly because many developers lack a deep understanding of the organization of css/html and JavaScript strategies.

In the concept of me and our team, it is important to write maintainable front-end code. Although we have some clients that have been using it for many years, remember that you will never be the only one working on the application. Just because your one-time elements and configurations make sense to you doesn't mean they make sense to the next person who might inherit the application.

To prevent this article from being too long, I'll focus on CSS code today. JavaScript code is another very different and tricky issue.

The purpose of this article is not in the Rules manual, but in the guide you are writing CSS. Hope to help you find your own process, and the goal of this article is to make your CSS consistent, simple and easy to use.

Here are 8 tips to keep CSS organized and easy to maintain over the long term.

1. Do not write style definitions that you do not want

For example: display:block; be careful when writing, because many elements have this style by default.

Another example is defining the font size on the element, which inherits the body font size you are defining.

The goal is twofold:

• Reduce the length of the CSS file for browsing.

• Define what your CSS class needs to do instead of defining a heap of garbage that has been generated.

Here is a common problem is that the CSS is not cleaned up, at this point, for the sake of brevity, can be completely deleted.

2. Consider CSS as a reusable component

Instead of taking CSS elements as specific forms or elements on each individual page, you can reduce a lot of complexity if you can define reusable CSS utilities and components for your own use.

The role of writing classes designed to be reused:

• Make sure your design is consistent across different pages. When you share CSS classes on many pages, you know that when you change the class, it changes on every page that appears.

• This makes it really fast to write CSS. First, if most of the styles are defined as utilities and classes that you know, then you don't have to spend a lot of time refreshing and recreating the styles that already exist in your application.

3. Define a utility in CSS to do your CSS

We define ' utilities ' as a CSS class, which is actually used only to do a specific thing, not to encapsulate the entire element.

You will see that this strategy is often used in popular CSS frameworks such as Bootstrap and foundation.

Some of the examples you see in these popular frameworks are:

Display:none; }text-align:center;}

For example, with. Hide, you don't have to write a new class every time you want to hide an element on a page-you just need to add the. Hide class to your element, which will make the element display:none;

We have written some utility files that are shared between applications, and use some common utilities to reduce the need to write specific styles for each element.

A good example is how we use the margin and padding utilities. Here is a simple example of the padding utility:

0; }. pa5px;} 10px;} 20px;} 30px;} 40px;} 50px;} 60px;}       

By using these tools together, we can match the number of pixels we have spaced, and we can quickly tag pages without having to write very much CSS.

The idea behind the utility is that you think you might be using them more than once. If it's a one-time style, or if you think the combo style will be used often, it might work better as a CSS class.

4. Avoid nesting unless absolutely necessary

Suppose there are some check boxes for the form. In this particular case, you need to check the box inline (side-by).

So you're trying to write a style like this:

color:red; }

And then in the process, you realize that you need a link in the list element that is actually black. So you're trying to write a tool class for the Black Link:

Color:black; }

here. The Link–black link will be overwritten by CSS specificity and will not overwhelm. My-form Li a style.

Now you might want to make sure that all anchor tags in the list element are red, but you don't know what the future elements will be and what changes you might make to the design.

You might ask, "Yes, well, how do you solve the problem?" ”

From the above example, you should understand that the anchor label color should be a variant away from the default link color.

So, in this case, I will 100% identify an additional tool class to handle the red link. The following are examples of possible processing in practice:

A {   color:blue;  &: hover {    color:black;  color:red;}   

It is then added to each LI element in the HTML.

The assumption I made here is that one day, this red link will be used elsewhere in the application. I don't want to embed it in the user's form, because then I have to write another style in the future to illustrate the need for a red link.

Also, because I have my hover defined on my own anchor point, the red link will turn black and hover without having to define any other styles.

5. Prevent nesting with Bem

One strategy that can really prevent over-nesting is a naming strategy named BEM (Block Element Modifier).

A good example of using BEM is when you have a really specific style of component, if using the utility will be too cumbersome and complex to say.

This example looks like this:

class= "Profile" >  class= "Profile__photo"/></div>//BEM css.profile {  Background-color: White;  #000;}  

As you can see from this example, I can see from my stylesheet that the. Profile__photo are nested in. Profile, but you don't actually need to nest this class. This is really the best place for BEM, and why I recommend it.

6. Use only!inportant as the last resort

Putting the!important definition on a class makes overwriting the code a headache, especially when you're trying to handle media queries.

This is a headache for me in dealing with a version of foundation because they decided to!important the visible class.

This is also a source of pain for mobile devices. For example, if you want your phone screen to display something, you must use another!important class to override the. Hide class to display it.

I have been unable to find a valid excuse to use!important, except in cases where someone else mistakenly uses!important definitions.

7. It takes time and effort to reinvent the wheel, so consider it carefully.

For example, creating your own grid CSS framework in a client project could be an example of reinventing the wheel.

According to my experience, unless you want to know how it works, it doesn't really do you any good to write these things yourself. There are so many fringe situations where you can write your own code, so why not use the free and well-working code that someone else has already written?

In other words, doing it yourself can be a good learning experience-but it's probably not part of the production application process.

Okay, so what about the JavaScript plugin?

When talking about JavaScript or jquery plugins, I would say that this is true for any really common component that you use with good integration options. Some examples are the photo carousel, or the date selector.

The Edge case here is a plugin (react,ember,angular, etc.) that uses some JavaScript frameworks with encapsulated component logic. If what you want to do is relatively simple, it can sometimes be more cumbersome to put these plugins into your component.

For example, I'll use an immediately available foundation or bootstrap module if I'm working on a project that relies on jquery, but I'll build my own module in react (just because it's easier to write components to insert into a react component by introducing jquery).

8. Focus on front-end code!

Finally, the most important thing I want to suggest to you is that you have to focus on the code you write for the front end, master it, and constantly improve it (statistics improve yourself!). ）。

I believe this is one of the biggest differentiating factors between long-term maintainable applications and hard-to-handle applications.

By following the eight tips for writing CSS, you'll save time and effort for developers who inherit your code for themselves and in the future.

What criteria do you follow to organize and streamline your CSS? Welcome message, Common progress.

English Original: 8 CSS Strategies for Writing maintainable, streamlined front-end Code

Web front end learning charging getting started employment: http://www.zhihaijiangku.com

8 tips to help you write a good CSS code