Web front-end: 11 principles to keep your code clean

Source: Internet
Author: User
Tags naming convention css validator

Write Web pages as we build houses, the foundations are firm and the House does not fall. Similarly, we make the Web page also, a good HTML structure is to make a beautiful site of the beginning, the same, good CSS only exists in the same good HTML, so a clean, semantic html is a lot of advantages, so in peacetime production, we do this? Let's look at a picture:

Showing two pieces of code, I think everyone will just like the first one, we do not say its semantics, at least his structure let us look refreshing, and the second kind? A look at the code is bad code, annoying code. So how do you write a good code, neat code? Below we will learn from the following 11 aspects together, as long as everyone in the future when writing code can adhere to the following 12 principles, categorization malleability Your code quality can go up, and you write code will people see people love.

I. Statement of the DOCTYPE

If we want to do a good job, first of all we have to know what rights we have to do, like the "DOCTYPE" statement, We do not need to discuss whether the use of HTML4.01 or XHTML1.0 or the present HTML5 are available in a strict version or a transition version, which can be well supported by our code:

Since we do not need a table layout to make a good layout now, we can consider using the strict "DOCTYPE" without using the transition type, and for backwards compatibility, I recommend using HTML5 's declarative mode:

<!DOCTYPE HTML><html lang="en-US"> 

If you want to know more about this, you can click:

    1. w3c:recommended DTDs to use in your Web document
    2. Fix Your Site with the right doctype!
    3. No more transitional doctypes, please

      Second, character sets and encoded characters

      In the beginning of each page, we set the character set in, we use "UTF-8" here

      And when we usually write the page, often encounter "&" Such symbols, then we should not directly on the page to write "&":


We should use character encoding in our code, for example, "&" We should use "&" in our code instead.

If you want to know more about this, you can click:

    1. Wikipedia:utf-8
    2. A tutorial on character code issues
    3. The Extended ASCII table

      Third, the correct code indentation
      In page editing, the indentation of the code is not correct, he will not affect any features of your site, but if you do not have a standard indentation principle, so that people who read your code is very angry, so that the correct code indentation can enhance your code readability. The indentation of the standard program should be a tab (or a few spaces), the image of a little bit we look at the beginning of the article, or together to see the picture shown below, you can see after you know how to write your own code to let people see the cool:

Needless to say, everyone likes the code below. This is only a person's habit problem, but the proposal from the beginning to do well, the benefit of the people. There is an introduction to this, you can also refer to: Clean up your Web pages with HTML TIDY

Four, the chain of your CSS style and JavaScript script

There are a number of ways to write CSS styles on a page, and some directly put styles in the "" section of the page, which is a bad habit, because it will not only mess up our markup, but these styles are only suitable for this HTML page. So we need to put the CSS separately, save in the external, so that the subsequent page can also link to these styles, if you need to modify the page, we only need to modify the style file. As shown in:

What we're talking about is just a style, but JavaScript scripts are the same as CSS styles. I finally want to say, "in the production of Web pages, try to put your CSS style and JavaScript script in a single file, and then link to refer to these files, the greatest benefit is to facilitate your style and script management and modification." ”

Five, the correct label nesting

When we write HTML, we always need the level nesting of tags to help us complete the HTML writing, but these HTML nesting is a certain rule, if you want to elaborate, we may have to use a few chapters to describe, then I would like to say here today, we write HTML should not make the following such a super error:

Structure We are common, such as the title of the home page, then we should pay attention to, can not put "

In the label, in other words, you cannot put the block element in the inline element. Above is just an example, just hope that everyone in the normal production should not make such a super error. (Web front-end Learning Exchange Group: 328058344 prohibit small talk, non-happy do not enter!) )

Vi. Remove unnecessary labels

First, let's look at an example:

Obviously is a navigation menu production, in the instance: there is a "div#topnav" in the list "Ul#bigbarnavigation", and "div" and "ul" List are block elements, plus "div" here to package "UL" does not play any role at all. Although the "div" appeared to us to create a Web page to bring great benefits, but we do not need to everywhere such a disorderly use, do not know whether people usually pay attention to such details? I made such a mistake, and if you have had such a experience, then from today onwards, from now on, we are working together to correct such a mistake.

There are interesting words about how to use tags correctly, and you can click: Divitis:what it is, and what to cure it.

Vii. use of better naming

The name here is to give you the relevant elements of the page definition class name or ID name, many students have this kind of habit, for example, there is an element font is red, add "red" to him, even the layout is written "Left-sidebar", etc., but have you ever thought, if this element defines the " Red "After a few days customers asked to use the" blue "it? Or, then, the "Left-sidebar" sidebar at this time does not want to put on the left, but want to put on the right side, so that our previous name can be said to be a bit meaningless, as shown in the following diagram:

Then define a good name is very much, not only can you understand your code, and others can easily read your code, such as a good class name and ID name "Mainnav", "Subnav", "footer" and so on, he can describe the things involved. It's not good, like what I said earlier.

If you want to know more about this, you can click:

    1. Standardizing CSS class and ID names
    2. CSS Tip #2: Structural naming convention in CSS
    3. CSS coding:semantic approach in naming convention
    4. CSS naming conventions and Coding Style

      Viii. leaving the version of CSS

      When we design menus, we sometimes require all the text in the menu options to be capitalized, and do people usually set them to uppercase directly in the HTML tag? If so, I feel bad, if in order to have a better extensibility in the future, we should not be in the HTML to set them to all uppercase, a better way to do this is through CSS:

Ix. defined class name or ID name

We usually make a Web page do not know if you have encountered such a problem, is the whole station down, using the same layout and structure, in other words, you use the same structure on the layout of the page, the same class name, but suddenly your supervisor said that the needs of customers, There is a page layout that requires sidebar and main content to swap. At this point you do not want to change the layout and modify the structure of the entire page, there is a good solution, that is, in your page "" To define a special class name or ID name, so that you can easily achieve the requirements you want. Such use, do not know everyone used did not:

Defining a unique class and ID name for "" is very powerful, not just to help you change the layout as above, but the main thing is that sometimes he can help you achieve a special effect on one part of the page without affecting the effect of other pages. Why is there such a function, don't I say I think everybody knows. Because the content of each page is the descendant element of "".

If you want to know more about this, you can click:
1. ID Your Body for Greater CSS Control and specificity
2. Case study:re-using styles with a body class

Ten, verify your code

People can make mistakes, we write code is the same, you sometimes always lowercase or write more, for example, forget to close your element tag, do not remember to write the attributes required by the element, although some errors will not give you any disastrous consequences, but also will bring you can not estimate the error. So it is advisable to verify your code when you have finished writing the code. The code after validation is always stronger than the code that is not validated:

For an effective verification of your code, we can use the relevant tools or browser plug-ins to help us complete. If your code does not have any errors, the tool will appear in front of you green text, so that you are extremely exciting, because the code you write again to stand up to the standard.

If you want to know more about this, you can click:

    1. The Markup Validation Service
    2. Xhtml-css Validator
    3. Free site Validator (checks entire Site, not just one page)

      Xi. logical Order

      This is a very rare error situation, because I think you can write the page does not disturb the logical order, in other words, if possible, let your site has a logical order is the best, such as first write the page header, write the page body, and finally write the footer. Of course sometimes encounter special circumstances, how the footer part of our code in the sidebar above, this may be because it is best for your site design needs, this might be understandable, but if you have another way to achieve, we should put the footer is placed in the end of a page, Then make it up to your design needs with a specific technology:

Above we discussed several ways to get you started writing a neat HTML code. From the beginning of a project, it's all very easy, but if you need to fix an existing code, it's going to be a little tricky. The main thing to say is to tell you how to learn to write a good, neat HTML code, and keep writing it. Hopefully, after reading this article, in your next project, you can start from scratch and stick to a neat HTML code. I hope you enjoy this tutorial. If you have any good experience, hope to share with us.

Web front-end: 11 principles to keep your code clean

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.