Why site designers give out bad code?
I am writing this article because the designers and programmers have to more and more often encounter the result of the work of such services. You also have to experience competition from them - at least in the segment of low-cost sites. And there is no more or less fundamental article in which site designers are viewed from this perspective. It will be useful to know what is causing a bad code and whether designers have prospects to replace a massive manual layout, or all of these are toys that have no prospects.
In order to classify the reasons for which the code turns out bad, you need to give a small classification of the designers themselves for the possibility of customization. They can be divided into 2 groups: template and with free editing. In this article, I will consider only services with free editing, as in template constructors, sites are developed manually with a certain specificity, which allows these sites to be edited later in the designer. But despite this practice shows that in most cases it is also flawed.
We will consider the causes of bad code in both HTML and CSS. But the foundation of bad code is CSS, so let's start with it.
')
Reasons to make CSS bad:
1) Position: absolute. This is when all elements on the page have the position property set to absolute. This reason is the foundation on which all others are based. If the value is absolute, there is no possibility to get a quality code that the developers of such a service would not do. Until recently (before the need to create responsive-design), despite the dirty code, this approach was a little justified, because it allowed the service user to freely move elements around the page. Now, when it is necessary that the site is created with responsive design, the use of position: absolute is not justified from any side, because with absolute it is not possible to create a site with responsive design.
In the last 3 years, services have appeared that, on the one hand, allow customizing the site without restriction, but the elements on the page are in position: static, which allows to get clean code and good responsive-design; but the downside is the difficulty of working in such services, because you cannot freely move elements around the page. It turns out that we have a choice: either absolute - easy for the user to work, but a dirty code, or responsive - hard to work, but a clean code. Now the use of absolute is not justified, therefore it is necessary to use static for elements.
2) id instead of class. If elements are used instead of class id, then the code will not be clean either. The reason for this is that it will be duplicated in CSS, and it will be difficult to work with such code. This situation is typical when the position: absolute elements, but when position: static is also sometimes found. When absolute does not use a class, this is a necessity, when static is a developer's mistake, because static allows you to replace id with classes, which in turn gives a cleaner code with which you can work manually.
These are the 2 main reasons why site designers give out dirty CSS. But there are others.
3) Do not clear extra styles. For example, in all selectors the same styles that do not make sense: border: none, posiiton: static, etc. If these styles are needed, they should be written for everyone, not for each element.
4) Duplication of styles on different screens. For example, on a computer there is a margin: 45px auto 0 auto, and on the mobile it is a margin: 25px auto 0 auto. You can simply write on the mobile margin-top: 25px.
5) Record styles in non-abbreviated format. Such styles margin, padding, background, font should be written in abbreviated form. For example, instead of margin-top: 10px, margin-left: auto, margin-right: auto, you can simply write margin: 10px auto 0 auto.
These are reasons that make CSS dirty. Now we analyze the reasons that make HTML bad:
1) Styles in the style attribute. For tags, styles are written in the style attribute, and not rendered into a CSS file. If constructor developers prescribe styles in the style attribute, then in addition to the dirty code there are other consequences:
- it will be impossible to use classes - only id;
- normal responsive-design just will not work: it is possible only with the use of a crutch in the form of JS.
2) Class or id is generated automatically and cannot be changed. They have no semantic load, having the following form class = "s9387893484". Only this one point is enough to spoil the whole code.
3) Large nesting. Extra tag wrappers, which should not be hand-crafted, because they have no meaning.
4) No code formatting.
5) Superfluous attributes and classes. There are many classes and attributes in the code that are not needed for CSS styles or JS work.
6) Some tags can be removed class. For example, you can remove a class from the “p” tag and set the selector .parent> p in the CSS.
Summarize
We have listed the reasons in HTML and CSS that make the exported site design code bad. Theoretically, if you avoid all the errors that were described above, you can get a fairly clean code on a solid four, with which you can then work without any problems to the coder or programmer. Of course, this code will be a little worse than the imposed “guru” of the layout, but it will be at least as good, and sometimes even better, than sites created in a low price category (especially if they are with a responsive design application).
In order to classify the reasons for which the code turns out bad, you need to give a small classification of the designers themselves for the possibility of customization. They can be divided into 2 groups: template and with free editing. In this article, I will consider only services with free editing, as in template constructors, sites are developed manually with a certain specificity, which allows these sites to be edited later in the designer. But despite this practice shows that in most cases it is also flawed.
We will consider the causes of bad code in both HTML and CSS. But the foundation of bad code is CSS, so let's start with it.
')
Reasons to make CSS bad:
1) Position: absolute. This is when all elements on the page have the position property set to absolute. This reason is the foundation on which all others are based. If the value is absolute, there is no possibility to get a quality code that the developers of such a service would not do. Until recently (before the need to create responsive-design), despite the dirty code, this approach was a little justified, because it allowed the service user to freely move elements around the page. Now, when it is necessary that the site is created with responsive design, the use of position: absolute is not justified from any side, because with absolute it is not possible to create a site with responsive design.
In the last 3 years, services have appeared that, on the one hand, allow customizing the site without restriction, but the elements on the page are in position: static, which allows to get clean code and good responsive-design; but the downside is the difficulty of working in such services, because you cannot freely move elements around the page. It turns out that we have a choice: either absolute - easy for the user to work, but a dirty code, or responsive - hard to work, but a clean code. Now the use of absolute is not justified, therefore it is necessary to use static for elements.
2) id instead of class. If elements are used instead of class id, then the code will not be clean either. The reason for this is that it will be duplicated in CSS, and it will be difficult to work with such code. This situation is typical when the position: absolute elements, but when position: static is also sometimes found. When absolute does not use a class, this is a necessity, when static is a developer's mistake, because static allows you to replace id with classes, which in turn gives a cleaner code with which you can work manually.
These are the 2 main reasons why site designers give out dirty CSS. But there are others.
3) Do not clear extra styles. For example, in all selectors the same styles that do not make sense: border: none, posiiton: static, etc. If these styles are needed, they should be written for everyone, not for each element.
4) Duplication of styles on different screens. For example, on a computer there is a margin: 45px auto 0 auto, and on the mobile it is a margin: 25px auto 0 auto. You can simply write on the mobile margin-top: 25px.
5) Record styles in non-abbreviated format. Such styles margin, padding, background, font should be written in abbreviated form. For example, instead of margin-top: 10px, margin-left: auto, margin-right: auto, you can simply write margin: 10px auto 0 auto.
These are reasons that make CSS dirty. Now we analyze the reasons that make HTML bad:
1) Styles in the style attribute. For tags, styles are written in the style attribute, and not rendered into a CSS file. If constructor developers prescribe styles in the style attribute, then in addition to the dirty code there are other consequences:
- it will be impossible to use classes - only id;
- normal responsive-design just will not work: it is possible only with the use of a crutch in the form of JS.
2) Class or id is generated automatically and cannot be changed. They have no semantic load, having the following form class = "s9387893484". Only this one point is enough to spoil the whole code.
3) Large nesting. Extra tag wrappers, which should not be hand-crafted, because they have no meaning.
4) No code formatting.
5) Superfluous attributes and classes. There are many classes and attributes in the code that are not needed for CSS styles or JS work.
6) Some tags can be removed class. For example, you can remove a class from the “p” tag and set the selector .parent> p in the CSS.
Summarize
We have listed the reasons in HTML and CSS that make the exported site design code bad. Theoretically, if you avoid all the errors that were described above, you can get a fairly clean code on a solid four, with which you can then work without any problems to the coder or programmer. Of course, this code will be a little worse than the imposed “guru” of the layout, but it will be at least as good, and sometimes even better, than sites created in a low price category (especially if they are with a responsive design application).
Source: https://habr.com/ru/post/326664/
All Articles