Спрайты в stylus - миф или реальность

Ты амбициозный веб-разработчик. Почитываешь на досуге phptime.ru, чтобы быть в курсе всех трендов. С особым интересом наблюдаешь за блогом про frontend. Прочитал там пост про css-препроцессор stylus и решил его использовать на своих проектах. Быстро разобрался что к чему, написал парочку миксинов. Экономишь свое время, все супер. Но тут вдруг возникла необходимость использовать спрайты. «Неплохо бы генерировать их на лету», — думаешь ты. Лезешь в документацию стилуса, судорожно листаешь страницу за страницей и ничего не находишь… Да, можно воспользоваться конвертацией в data-uri, stylus это умеет, но хочется всё же теплых и ламповых спрайтов. Еще и хипстеры-рубисты набежали из соседнего отдела, хвастаются своим Sass, издеваются. Хватит это терпеть!


Читать дальше →

Grunt.js: волшебная палочка для фронтенд-разработчика

На сегодняшний день почти любой сайт, если он хоть немного сложнее домашней странички любимого кота, хранит под своим капотом кучу файлов с тоннами кода на css и javascript. Недобросовестные разработчики, ссылаясь на быстрый интернет пользователей, не стесняются выкатывать на продакшн свои творения в формате «as is», совсем не думая о том, что доля мобильного траффика растет как на дрожжах, а высокой скоростью мобильный интернет нас порадует еще очень нескоро. И это лишь один из поводов всерьез задуматься о грамотной сборке и оптимизации фронтенда. Нет, серьезно, берите свои многочисленные jquery-плагины, js-модули, виджеты, библиотеки, овощи там, рожь, пшеницу, вот это все, и минифицируйте, конкатенируйте, тестируйте, компилируйте, а такая магическая штука, как grunt.js, поможет в этом с помощью всего одной команды в консоли.

Читать дальше →

CSS-препроцессор Stylus: плюсы, минусы, подводные камни

Начиная разговор о Stylus, прежде всего стоит ответить на резонный вопрос «зачем вообще использовать препроцессор?». Все очень просто — это сэкономит твое время, а дополнительными бонусами будут:
  • удобная поддержка и расширение проектов
  • автоматизация рутинных задач
  • «объектно-ориентированный» css
  • возможность быстро создавать «темы» для интерфейсов

stylus
На сегодняшний день самыми популярными препроцессорами являются SASS, LESS и Stylus. О первых двух написано довольно много, а вот Stylus незаслуженно обделен вниманием, несмотря на то, что имеет ряд преимуществ
Читать дальше →

Инструкции по созданию имен для CSS

Оригинал: CSS Naming Conventions

В этой статье мы представляем набор правил по созданию CSS-имен. Они уже были испытаны в нескольких крупных проектах. Это помогло нам достигнуть определенных успехов. Цель инструкции — исключить возможность конфликтов имен, упрощения отладки, обслуживания и процесса присвоения названий.

Правила присвоения имен, приведенные, ниже сложно назвать оптимальными для браузеров. Тем не менее, правила дают огромное преимущество, а их влияние на производительность незначительно.

CSS-класс и имя файла

Используйте строчные буквы в названиях всех CSS-классов и файлов. Для разделения слов в имени используйте символ «-». Например, мы можем назвать классы как-то вроде widget-latest-comments, а файлы — post.css.

Читать дальше →