Чому конструктори сайтів видають поганий код?


Пишу цю статтю, тому що верстальникам і програмістам доводиться все частіше і частіше стикатися з результатом роботи подібних сервісів. Також доводиться відчувати конкуренцію з їхнього боку – як мінімум в сегменті недорогих сайтів. І немає більш-менш фундаментальною статті, в якій конструктори сайтів розглядаються під цим ракурсом. Буде корисно знати, що є причиною поганого коду і чи є перспективи у конструкторів замінити масову ручну верстку, або все це іграшки, що не мають ніяких перспектив. Хочу порекоменлувати бесплатные конструкторы сайтов

image

Для того щоб класифікувати причини, за якими код виходить погано, потрібно навести невелику класифікацію самих конструкторів по можливості кастомізації. Їх умовно можна розділити на 2 групи: шаблонні і з вільним редагуванням. У цій статті я буду розглядати тільки сервіси з вільним редагуванням, так як в шаблонних конструкторах сайти розробляються вручну з певною специфікою, яка дозволяє ці сайти потім редагувати в конструкторі. Але незважаючи на це, практика показує, що в більшості випадків він теж зіпсований.

Ми будемо розглядати причини поганого коду в HTML, так і CSS. Але фундаментом поганого коду є CSS, тому почнемо з нього.

Причини, що роблять CSS поганим:

1) Position:absolute. Це коли всі елементи на сторінці мають властивість position у значенні absolute. Ця причина є фундаментом, на якому ґрунтуються всі інші. При значенні absolute немає можливості отримати якісний код, що б не робили розробники такого сервісу. До недавнього часу (до необхідності створення responsive-дизайну), незважаючи на брудний код, такий підхід був трохи виправданий, тому що він дозволяв користувачеві сервісу вільно переміщувати об’єкти по сторінці. Зараз же, коли необхідно, щоб сайт створювався з responsive-дизайном, використання position:absolute не виправдано ні з якої сторони, тому що при absolute немає можливості створити сайт з responsive-дизайном.

В останні 3 роки з’являються сервіси, які, з одного боку, дозволяють кастомизировать сайт без обмеження, але при цьому на сторінці елементи знаходяться в position:static, що дозволяє одержувати чистий код і хороший responsive-дизайн; але зворотною стороною є складність роботи в таких сервісах, тому що не можна вільно пересувати елементи на сторінці. Виходить у нас вибір: або absolute – користувачеві легко працювати, але брудний код, або responsive – важко працювати, але при цьому чистий код. Зараз використання absolute не виправдане, тому потрібно у елементів використовувати static.

2) id замість class. Якщо у елементів використовуються id замість class, то код теж не буде чистим. Причиною цього є те, що він буде дублюватися в CSS, і з таким кодом буде працювати складно. Ця ситуація характерна, коли у елементів position:absolute, але при position:static теж іноді зустрічається. Коли у absolute не використовуються class, то це необхідність, коли у static – це помилка розробників, тому що static дозволяє замінити id класами, що в свою чергу дає більш чистий код, з яким можна працювати вручну.

image

Це 2 основні причини, за яких конструктори сайтів видають брудний CSS. Але є і інші.

3) Не очищаються зайві стилі. Наприклад, у всіх селекторах одні і ті ж стилі, які не мають сенсу: border:none, posiiton:static і т. д. Якщо ці стилі і потрібні, то вони повинні бути прописані для всіх, а не для кожного елемента.

image

4) Дублювання стилів на різних екранах. Наприклад, на комп’ютері стоїть margin: 45px auto 0 auto, а на мобільному – margin: 25px auto 0 auto. Можна на мобільному просто написати margin-top: 25px.

5) Запис стилів в скороченому форматі. Такі стилі margin, padding, background, font повинні записуватися в скороченому вигляді. Наприклад, замість margin-top: 10px, margin-left: auto, margin-right: auto можна просто написати margin: 10px auto 0 auto.

image