Windows 10 Pro Key Windows 10 Home Key Canada Goose jas canada goose outlet https://www.airbrushhenk.nl airbrushhenk.nl canada goose jas canada goose outlet

Топ 10 лайфхаків для верстки!

Author: Олександр Герасимюк 19.12.2015

Основною метою цієї статті є полегшення роботи верстальника сайтів завдяки автоматизації, або спрощення роботи. І так вмощуйтесь зручніше надалі вас чекають 10 порад для спрощення вашої роботи! (Ця стаття для початкових фронт-енд розробників, але і люди з досвідом можуть з неї щось почерпнути.)

10. Не підтримувати старі браузери.

Надіюсь більшість верстальників вже відмовились від підтримки старих браузерів, особливо це стосується іе7-8 (про іе6 вже навіть мова не йде). Світ не стоїть на місті, все розвивається і рухається вперед, тоді чому ж ми маємо відставати і підтримувати ці браузери. Скажіть НІ ПІТРИМЦІ СТАРИХ БРАУЗЕРІВ!

9. Не використовувати вендорні префікси.

На даний момент браузери добре розуміють CSS3, тому використовувати вендорні префікси вже немає необхідності, вони перетворюють ваш css код в “ковбасу” 😉

8. Різні css генератори.

Для пришвидшення роботи використовуйте css або html генератори. Це можуть бути генератори кнопок, градієнтів, border-radius-ів, чи border-image, все що душа забажає.

Ось декілька з них:

 

7. Використовуйте таблиці.

(! але тільки коли це необхідно) Часто бачу сайти де таблиці створені за допомогою div, і на це верстальник потратив багато вільного часу, не заздрю йому. Отже якщо ви бачите в макеті таблицю – робіть її за допомогою table.

6. Створіть або в когось вкрадіть шаблон для верстки.

Створіть свій шаблон для ефективного початку верстання, це економить до 10% часу на всю верстку. Або використовуйте мій: template .

5. Користуйтесь github.

Ви можете спокійно створювати проекти в гітхабі, і потім з будь-якого пристрою їх завантажувати щоб переглянути.

4. Користуйтесь gist.

Ви думаєте що  4 і 5 лайфхак однаковий? – ви помиляєтесь 🙂 .  Чи бувало у вас таке що ви знаходили крутий код (js, css, html) і ви його  використали один раз в проекті і забули, а потім через деякий час знову його потрібно знайти?  Для цього є gist, цей кусочок коду ви зможете просто помістити в gist і ви завжди будете пам’ятати про те що він там є.

4. Emmet.

Не знаю як жили верстальники до нього, просто мега корисна штука яка перетворює такий код:

pos-r
ovh
p
m
bg

в такий:

position: relative;
overflow: hidden;
padding: ;
margin: ;
background: #000;

Якщо ви ще не використовуєте emmet – то бігом сюди.

3. Плагіни для фотошопу.

Є два чудових плагіна для фотошопу це css3ps(безкоштовний) і css hat(платний), вони виконують одну і ту ж функцію – перетворюють ваші photoshop layers в css код.

2. Користуйтесь препроцессорами (less, sass).

Це змінить ваше поняття про написання css коду, спершу буде важко, але потім ви вже без них не будете уявляти своє життя.

1. Писати зрозумілий і семантичний код.

Потрібно писати такий код який буде зрозумілим навіть для новачка, тобто великі блоки (можна і всі блоки) потрібно коментувати типу “<!–start block–>” i “<!–end-block–>”. Скажете це не економить час? Так, при початковій стадії роботи це забирає досить багато часу, але коли ви через деякий час повернетесь до цього проекту і за той час забудете про те що ви писали, то ви будете вдячні самому собі за чистий, семантичний код з коментарями.

P.S. Якщо не розкрив якусь тему, не соромтеся пишіть в коментарях. Також підписуйтеся на мої акаунти в соц. мережах: twitter , facebook  i також додавайтесь в github

  • sania_net_ua

    Запитання, побажання?

Оптимізація сайту – валідація, швидкість завантаження, SEO Prev. article
Як знайти ще кілька годин в добі Next article