How to use ccs styles correctly

11.06.18 IT / CSS 3383

Once upon a time, when the first websites were born, resources looked quite simple, you could see only plain text on them. Gradually, the sites acquired a more elegant look, new software capabilities appeared. A technology was developed for the design of web pages - Cascading Style Sheets (CSS) .

During its existence, this technology has come a rather long way of development, some features were added, some were removed. Currently latest version is 3 . A large number of innovations have been added to it, which takes the site design to a completely different level.

Beginner developers use styles incorrectly. For example, instead of putting all the styles into one file and then connecting it to the page, they simply prescribe the necessary styles for each tag. This approach is wrong, because there is mixing of html code with css . If you suddenly need to change the design of an element, you will have to search for it for a long time among the tags. It will also negatively affect website promotion.

Another not entirely correct approach is to place the source code of the styles at the top of the page, in style tags . This method is used mainly on sites where fast page loading is extremely important, for example, on Google. Again, this is mixing html and css .

The most correct approach used on most sites is placing styles in a separate file and then including it on the page . For each required tag, a class attribute should be added. This attribute is also useful when accessing elements from JavaScript code. Classes should be named correctly, search engines can use them to give semantic meaning to page elements.

When developing, it is important to remember that not all css properties can be supported by all browsers, so it is worth referring to the documentation and looking at the compatibility tables of a particular property. For some properties, there are special analogues for a specific browser. This style should only be used in critical situations that cannot be avoided.

It is worth remembering that a large number of files included on the page noticeably slows down the website loading speed . Therefore, it is important to keep the number of such files to a minimum; it is best to minify all code and place it in one file. This feature is available in most modern CMS. For example, in Drupal it is done in the settings in a couple of clicks. All files are simply glued together and only one css file is connected to the page.

Thus, it is worth using cascading style sheets correctly, this is one of the factors for the successful development of any resource.