Common mistakes in CSS coding and how to fix them

 2021-07-12

Common mistakes in CSS coding and how to fix them

It's currently considered one of the easiest and most accessible ways to create modern web pages based on CSS standards. Therefore, you need to fix these bugs to make your web design more consistent, make your code cleaner, easier to read and improve performance.

It usually happens in three cases: skill error, error due to wrong principles, and error due to knowledge.

In this article, Hachinet will show you some common errors and how to fix them.

 

1. Common errors and how to fix them


CSSとは?|スタッフブログ|埼玉北本・桶川・上尾でホームページ制作はトムスファクトリー

 

1.1. Skill error

This is an unexpected error and usually a typo.

For example:

<imgalt = Brothers "> Hello </ h3>

Here, the code didn't work as expected because the developer entered "missing".

This can be easily fixed by clicking on the location of the error to identify the error code and fix it.

1.2. Error due to the wrong principle

This error is usually caused by the developer not knowing the coding principles.

For example:

<h3 class = "55"> Content story number 5 </ h3>

.55 {color: red;}

This error is related to the naming of the class that begins with the numbers that do not work.

Also, it is recommended to not include the camelcase class name as it is difficult to read, which needs to pay attention to the naming of the classes.

1.3. Knowledge errors

This error is common when using existing code. For example, copying and pasting code from another source can cause syntactic problems.

Tag confusion, such as TR, TD can clutter your table.

  • Confused citation tags, links, scripts.
  • Improper placement of CSS files leads to duplicate CSS.
  • Use the wrong ID and class for writing to CSS.
  • Excessive and missing signs, or free space.

Those above are the most basic errors, but they still often make mistakes. In addition, you need to be more careful when using CSS code, as debugging is very difficult if there are errors.

 

2. Other common errors


2.1. Error using unwanted pixels

For example,

.wrapper {

margin: 10px 0px;}

If the value is 0, you don't need to use px since it's adequate.

.wrapper {

margin: 10px 0;}

2.2. Repeated code

For example,

.wrapper {

padding: 10px 10px;

margin: 10px 10px;}-

.other-wrapper {

padding: 10px 10px;

margin: 10px 10px;}

In this case, the CSS code was repeated twice, even we can avoid redundancy and shorten it to improve the performance of the site.

.wrapper .other-wrapper {

padding: 10px 10px;

margin: 10px 10px;}

2.3.  Use color names

For example,

.class-name {

background: red;}

We do not recommend using color names. You should use the color code instead.

.class-name {

background: # FF0000;}

2.4 Use multiple properties

For example,

.property {

margin-left: 5px;

margin-top: 5px;

margin-right: 5px;

margin-bottom: 5px;}

In this example, you can also shorten the syntax to improve code and performance.

.property {

margin: 5px 5px;}

3. Conclusion


Those above are common errors when coding CSS. It may be a simple error, but it will take time to fix the error if you're not careful and knowledgeable.

Besides, a tool has been added to fix CSS syntax errors. These can be referenced, but should not be abused.

 

If you are considering offshore development, please feel free to contact us.

Here is our contact information.

Account Manager: Quan (Japanese/English available)

Phone number: (+84) 2462 900 388

Email: contact@hachinet.com

Please feel free to contact us for consultation/application by phone.

Click here for more information ▶