Чек-лист для начинающего front-end разработчика.

1. Посмотреть на требования по браузерам в проектной документации.

Если не опускаемся ниже IE9, значит смело можем использовать возможности CSS3. Не все, но можем. Какие именно смотрим здесь —http://caniuse.com/.

2. Работа с иконками.

Если у вас есть возможность выпросить у дизайнера иконочный шрифт — просите. Помните о кроссбраузерности. Иконочный шрифт — лучшее решение. Иконки легко ресайзить, красить, отпадает зависимость от ретины и подобных ей экранов. Если шрифт нам не дают — оптимизируйте свою работу со спрайтами. Grunt, Gulp, Compass — смотрите в этом направлении.

МегаФон ПроБизнес

Получите Кешбэк 100% за запуск рекламы с МегаФон Таргетом!

Узнать больше >>

Реклама. ПАО «МегаФон». ИНН 7812014560. ОГРН 1027809169585

Иконочные шрифты:
http://fontello.com/ 
https://icomoon.io/

Спрайтинг:
http://compass-style.org/help/tutorials/spriting/ 
https://github.com/Ensighten/grunt-spritesmith
https://github.com/aslansky/gulp-sprite

3. Используйте пре- и постпроцессоры.

Машины должны за нас страдать, все верно. SCSS, LESS, Stylus. На CSS сейчас пишут только ******. Это долго и ничем не оправдано.

Препроцессоры:
http://lesscss.org/
http://sass-lang.com/
http://learnboost.github.io/stylus/

Постпроцессоры:
https://github.com/postcss/autoprefixer

4. Используйте шаблонизаторы.

Если вы пишите на руби, то HAML или SLIM, если на ноде — JADE, php - TWIG

Шаблонизаторы:
http://slim-lang.com/
http://haml.info/
http://jade-lang.com/
http://twig.sensiolabs.org/

5. Перед началом работы вы должны иметь на руках ТЗ.

Убедитесь, что имеете достаточно понимание функционала вашего проекта. От уровня погружения в проект зависит логичность именования стилевых классов, переменных и функций в JS.