15 bugs or html and css tips
Errors and tips I wrote in my own experience. If there are errors like “bad advice”, I will be glad to hear constructive criticism. The post is intended for beginners to learn HTML and CSS, but perhaps the experts will also be interested to get acquainted with this material.
It is recommended to check the HTML and CSS of the site through the service validator.w3.org. This service will scan the code and display errors, for example:
When page layout, you need to make sure that the file encoding is set to UTF-8 (without BOM) . Each text editor sets the encoding in its own way.
')
A UTF-8 file allows non-standard characters to be used (for example, characters from different languages, currency signs, and others).
Also it is necessary to inform browsers that the page opens in UTF-8 encoding. This is done via the tag below:
The value of the id attribute in the HTML code should not be repeated.
It is recommended to combine several small pictures into one file (such a file is called a sprite). This will reduce the number of requests to the site and improve page loading speed.
Sprite example
JSFiddle example
Now it’s also popular to use icon fonts instead of sprites. Those. instead of letters, icons of gear, emoticon and other icons are displayed. An example is the glyphicons icons that are used in Twitter Bootstrap.
The advantages of fonts to sprites are the preservation of quality when icons are resized and smaller. But a drawback, you can not use more than one color in the icon.
It is not recommended to use more than three selectors, since This affects the performance of the site.
Browsers read CSS from right to left. Those. in the code above, first all the links that are on the page will be selected, and then those links that are inside the .item element will be selected.
If possible, the sample is recommended to be reduced to one selector:
HTML is designed to display information (text, images). Content design (resize, color, font) occurs in CSS.
Many designers, when you need to make the text in green, attach to it a class .green.
This is wrong, because When changing the design, many colors may change, for example, the message text may be displayed in blue instead of green. Then you have to look for all the tags that have the class .green and replace it with .blue.
To avoid such situations, it is not recommended to use classes for changing colors, aligning text, and changing case. It is necessary to name the elements themselves (cap, basement, message), and apply their own styles to it.
Some browsers allow you to specify pixels in fractional values, for example “1.5px”. But this is wrong, because A pixel is an indivisible unit. Instead of “1.5px” it is better to use “1.5em”.
It is recommended to do a sample by class instead of id, since selectors with id have more weight than the classes, and they will be difficult to override.
It is also not recommended to use! Important, because its weight is higher than the id attribute, and it will also be difficult to override it.
The menu should be designed as a list.
In tags it is necessary to specify the alt attribute (can be empty).
On the page there should be only one title in the <h1> tag. Basically, this tag is the name of the page.
The names of all elements must be written in the English translation. Even if it is not known how the word is spelled in English, there are many free services that can translate. When transcription element names are encountered, it looks unprofessional.
It’s hard to write clearfix in a nutshell, but I’ll point out a moment that many layout designers, in my opinion, make a mistake.
The .clearfix class must be specified in the parent tag, and not placed side by side.
Some HTML beginners think that HTML is a programming language. In fact, HTML is not a programming language, it can be compared to Microsoft Word. For example, to make the text bold, in Word, you must click on the button, and in HTML you need to write the code. Those. HTML is simply a tool that adds text, images, tables, and other elements.
1. W3C Validator
It is recommended to check the HTML and CSS of the site through the service validator.w3.org. This service will scan the code and display errors, for example:
- tag is not closed;
- not recommended characters in the links;
- not recommended tag is used;
- The required attribute is not specified.
- and other.
2. Layout in UTF-8 format
When page layout, you need to make sure that the file encoding is set to UTF-8 (without BOM) . Each text editor sets the encoding in its own way.
')
A UTF-8 file allows non-standard characters to be used (for example, characters from different languages, currency signs, and others).
Also it is necessary to inform browsers that the page opens in UTF-8 encoding. This is done via the tag below:
<meta charset="utf-8"> 3. Identical id for several elements
The value of the id attribute in the HTML code should not be repeated.
<!-- --> <div id="block"></div> <div id="block"></div> <!-- --> <div id="block-1"></div> <div id="block-2"></div>
4. Sprites
It is recommended to combine several small pictures into one file (such a file is called a sprite). This will reduce the number of requests to the site and improve page loading speed.
Sprite example
JSFiddle example
Now it’s also popular to use icon fonts instead of sprites. Those. instead of letters, icons of gear, emoticon and other icons are displayed. An example is the glyphicons icons that are used in Twitter Bootstrap.
The advantages of fonts to sprites are the preservation of quality when icons are resized and smaller. But a drawback, you can not use more than one color in the icon.
5. Many selectors
It is not recommended to use more than three selectors, since This affects the performance of the site.
/* , */ .page .item .title a {} /* */ .page .item a {}
Browsers read CSS from right to left. Those. in the code above, first all the links that are on the page will be selected, and then those links that are inside the .item element will be selected.
If possible, the sample is recommended to be reduced to one selector:
/* */ .form-submit a {} /* , */ .form-submit-link {}
6. HTML styles
HTML is designed to display information (text, images). Content design (resize, color, font) occurs in CSS.
<!-- --> <p style="color: red"> </p> <!-- --> <p class="error"> </p>
7. Incorrect class names
Many designers, when you need to make the text in green, attach to it a class .green.
<p class="message green"> </p>
This is wrong, because When changing the design, many colors may change, for example, the message text may be displayed in blue instead of green. Then you have to look for all the tags that have the class .green and replace it with .blue.
To avoid such situations, it is not recommended to use classes for changing colors, aligning text, and changing case. It is necessary to name the elements themselves (cap, basement, message), and apply their own styles to it.
<!-- --> <p class="message green"> </p> <!-- --> <p class="message message-success"> </p>
8. Pixels in fractional values
Some browsers allow you to specify pixels in fractional values, for example “1.5px”. But this is wrong, because A pixel is an indivisible unit. Instead of “1.5px” it is better to use “1.5em”.
p { /* */ letter-spacing: 1.5px; /* */ letter-spacing: .005em; }
9. Using classes instead of id
It is recommended to do a sample by class instead of id, since selectors with id have more weight than the classes, and they will be difficult to override.
#modal a { color: blue; } /* , .. #modal , */ .modal-header a { color: #333; } /* #modal */ #modal .modal-header a { color: #333; }
It is also not recommended to use! Important, because its weight is higher than the id attribute, and it will also be difficult to override it.
10. Menu
The menu should be designed as a list.
<!-- --> <p><a href="#"></a> <a href="#"></a> <a href="#"> </a></p> <!-- --> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"> </a></li> </ul>
11. Missed alt in pictures
In tags it is necessary to specify the alt attribute (can be empty).
<!-- --> <img src="pic.jpg"> <!-- --> <img src="pic.jpg" alt=""> <img src="pic.jpg" alt="">
12. Tags <h1>
On the page there should be only one title in the <h1> tag. Basically, this tag is the name of the page.
13. Transcription
The names of all elements must be written in the English translation. Even if it is not known how the word is spelled in English, there are many free services that can translate. When transcription element names are encountered, it looks unprofessional.
/* */ .tovar {} .stranica {} .zapros {} /* */ .product {} .page {} .query {}
14. Clearfix
It’s hard to write clearfix in a nutshell, but I’ll point out a moment that many layout designers, in my opinion, make a mistake.
The .clearfix class must be specified in the parent tag, and not placed side by side.
<!-- --> <div> <div class="float-left"></div> <div class="float-right"></div> <div class="clearfix"></div> </div> <!-- --> <div class="clearfix"> <div class="float-left"></div> <div class="float-right"></div> </div>
15. HTML - programming language
Some HTML beginners think that HTML is a programming language. In fact, HTML is not a programming language, it can be compared to Microsoft Word. For example, to make the text bold, in Word, you must click on the button, and in HTML you need to write the code. Those. HTML is simply a tool that adds text, images, tables, and other elements.
Source: https://habr.com/ru/post/308680/
All Articles