Pull to refresh

Как я использую PostCSS

Reading time 4 min
Views 73K
Website development *CSS *HTML *
Sandbox
CSS-препроцессоры в своё время значительно облегчали работу по написанию CSS кода. Однако в некотором роде все они были несовершенны и имели значительные изъяны в работе. А потому на смену препроцессорам пришёл постпрепроцессор PostCSS.

Это довольно таки мощный инструмент, облегчающий работу с CSS. Постпрепроцессор уже сегодня используется в таких крупных компаниях как Twitter и Google. Кроме того, по сообщениям разработчиков Bootstap, пятая версия CSS-фреймворка вероятнее всего также будет написана на PostCSS.
Читать дальше →
Total votes 23: ↑20 and ↓3 +17
Comments 29

Используем возможности CSS4 уже сегодня с cssnext

Reading time 3 min
Views 37K
Website development *CSS *
cssnextВот уже на протяжении четырёх лет, с сентября 2011 г. W3C занимается разработкой CSS4. Модули четвёртой версии каскадных таблиц стилей проектируются на базе CSS3 и дополняют их новыми свойствами и значениями. В этой статье я хотел бы рассказать о том, как использовать возможности CSS4 уже сегодня, о cssnext.

Итак, cssnext — это CSS компилятор, позволяющий использовать последний синтаксис CSS уже сегодня. Он преобразует новые CSS спецификации в более современный код так, что вам не придётся ждать поддержки новых возможностей в вашем браузере.
Читать дальше →
Total votes 22: ↑19 and ↓3 +16
Comments 48

Продолжаем бороться с frontend-рутиной

Reading time 7 min
Views 37K
2ГИС corporate blog Website development *CSS *JavaScript *HTML *
image

Прошло полгода с последней новости о TARS на хабре.

Напомню, что TARS — это сборщик html-верстки, основанный на gulp, в помощь любому frontend-разработчику (или даже целой команде), для создания проектов любой сложности. За последние шесть месяцев было закрыто 88 issue, выпущено 7 версий, появился CLI, так вышло, что с yeoman’ом отношения не сложились, поэтому появилась своя версия. TARS переехал в свой новый дом на github, обзавелся командой из 4 разработчиков + небольшой армией фанатов. Кстати, огромное вам спасибо за мгновенные фидбеки после релизов и не только. TARS был внедрен в нескольких вебстудиях России и за рубежом. Сборщик научил компонентному подходу не один десяток разработчиков, привлек в ряды frontend’еров тех, кто боялся всей рутины верстки. В общем, появилось много всего нового, и об этом хотелось бы рассказать.
Подробности
Total votes 28: ↑26 and ↓2 +24
Comments 10

PostCSS быстрый старт

Reading time 3 min
Views 27K
CSS *JavaScript *Node.JS *
Sandbox
В этом руководстве вы узнаете, как можно использовать PostCSS вместе с GULP, позволяя вам самим определять, какие плагины вы хотите использовать и, следовательно, включать в вашу экосистему.

Требования


Мы будем работать как уже было сказано выше с GULP, предполагается что у вас уже установлены:

  • Node.js
  • NPM
  • Git
Читать дальше →
Total votes 13: ↑9 and ↓4 +5
Comments 3

4 мифа о PostCSS

Reading time 5 min
Views 41K
Website development *CSS *
Sandbox
Вы читаете перевод статьи PostCSS Mythbusting: Four PostCSS Myths Busted.

Когда появляется новый фронтенд-инструмент, мы всегда спрашиваем – а нужен ли он нам, что нового он может предложить? Стоит ли тратить время и усилия на его изучение?

С самого начала PostCSS столкнулся с интересной проблемой. Люди не понимали что это и как его использовать. Чтобы завоевать внимание, PostCSS приходилось соперничать с уже привычными подходами Sass и Less. Это соперничество породило некоторые заблуждения.

Давайте развеем некоторые из самых частых мифов о PostCSS и посмотрим, как с его помощью можно усовершенствовать ваш рабочий процесс.
Читать дальше →
Total votes 28: ↑26 and ↓2 +24
Comments 64

Настройка PhpStorm для вёрстки на ОС Windows

Reading time 16 min
Views 173K
Website development *
Sandbox

Добрый день


Так сложилось, что возникла необходимость подготовить единую рабочую среду (workflow) для всех верстальщиков в группе на ОС Windows. Основная цель — это в минимальные сроки передать минимум необходимых знаний всем участникам группы. Основная проблема была в том, что многие не знакомы с unix-системами и понятия не имеют, как завести тот же SASS на ОС Windows. Поэтому было принято решение составить ознакомительную статью (пошаговую инструкцию) по настройке рабочей среды.

По совету коллег решил выложить ее в открытый доступ. Думаю, начинающим верстальщикам это пригодится, т.к. когда-то я потратил немало времени, чтобы прийти к простым истинам.

Сразу оговорюсь, что выбор инструментов — дело сугубо личное, и все, что ниже описано ниже, делалось осознанно для определенной группы. Использовать данную инструкцию или нет — решать только вам.

Итак начнём!
Читать дальше →
Total votes 17: ↑13 and ↓4 +9
Comments 35

Линтинг CSS с помощью stylelint

Reading time 8 min
Views 51K
Website development *CSS *
Translation
Перевод гостевого поста Дэвида Кларка на CSS-Tricks.

Дэвид — один из создателей Stylelint — инструмента, позволяющего навести порядок в CSS. Он написал превосходное вступление о том, зачем нужно линтить CSS.

Stylelint hero
Читать дальше →
Total votes 24: ↑24 and ↓0 +24
Comments 10

Meteor + CSS-Modules + SugarSS

Reading time 2 min
Views 6K
Website development *CSS *Perfect code *HTML *Meteor.JS *
Tutorial

Котаны!


Вы знаете про Meteor? Ну да — странный вопрос.


Вы знаете про CSS-Modules? Прощай БЭМ.


Вы знаете про SugarSS? Прощай SASS.


Перец из Техаса сегодня принял мой pull-request. И всем этим счастьем теперь можно пользоваться. CoffeeScript, Jade, SugarSS — полный комплект для кошерного кода.

Читать дальше →
Total votes 13: ↑4 and ↓9 -5
Comments 37

Ещё больше комфорта в разработке фронтенда с TARS

Reading time 6 min
Views 17K
2ГИС corporate blog Website development *CSS *JavaScript *HTML *
TARS

Прошли очередные полгода с последних новостей о TARS (раз и два), а значит настало время поделиться новинками. Как всегда напомню, что TARS — это основанный на Gulp сборщик фронтенда, который помогает фронтенд-разработчику или даже целой команде создавать проекты любой сложности. Мы продолжаем уверенное шествие по России и не только. TARS уже используют в Нидерландах, Японии, Китае, Украине, Польше и других странах. Это можно заметить и по количеству звёзд на github, и по числу участников чата в gitter, и по количеству установок TARS-CLI за последний месяц (больше тысячи, а в пике больше 3 тысяч). Мы закрыли почти две сотни issue, выпустили два крупных обновления. Пользователи сборщика активно репортят, участвуют в разработке. Можно сказать, что у нас родилось маленькое сообщество.
Подробности
Total votes 12: ↑12 and ↓0 +12
Comments 6

PostCSS. Будущее после Sass и Less

Reading time 11 min
Views 46K
Конференции Олега Бунина (Онтико) corporate blog Website development *CSS *Client optimization *HTML *

Андрей Ситник (Iskin, Злые марсиане)


Андрей Ситник

В 2013 году Holowaychuk анонсировал свой проект Rework в статье «Модульный CSS-препроцессинг с Реворком» (http://tjholowaychuk.tumblr.com/post/44267035203/modular-css-preprocessing-with-rework ).

Как раз тогда я искал какой-то инструмент для того, чтобы сделать автопрефиксер. Когда я прочитал эту статью, я был поражен, потому что это был действительно революционный подход, он менял все. И поэтому первые версии автопрефиксера базировались на Rework’е. Но, к сожалению, Rework – это был Proof Of Concept, это было первое поколение, чтобы доказать, что это вообще работает. Поэтому мы его жестко форкнули, переманили всех разработчиков, устроили маленькую революцию и сделали PostCSS.

PostCSS – это второе поколение модульного процессора.
Total votes 41: ↑40 and ↓1 +39
Comments 65

$mol: reactive micromodular ui-framework

Reading time 28 min
Views 20K
Website development *CSS *JavaScript *Development of mobile applications *Node.JS *

Сколько нужно времени, чтобы просто вывести на экран большой список, используя современные фреймворки?


Список на 2000 строк ReactJS AngularJS Raw HTML SAPUI5 $mol
Появление списка 170 ms 420 ms 260 ms 1200 ms 50 ms
Обновление всех его данных 75 ms 75 ms 260 ms 1200 ms 10 ms

Напишем нехитрое приложение — личный список задач. Какие у него будут характеристики?


ToDoMVC ReactJS AngularJS PolymerJS VanillaJS $mol
Размер ( html + js + css + templates ) * gzip 322 KB 326 KB 56 KB 20 KB 23 KB
Время загрузки 1.4 s 1.5 s 1.0 s 1.7 s 0.7 s
Время создания и удаления 100 задач 1.3 s 1.7 s 1.4 s 1.6 s 0.5s

Небольшая головоломка: перед вами синхронный код, загружающий и обрабатывающий содержимое 4 файлов, но с сервера они грузятся параллельно. Как такое может быть?


Синхронная параллельная загрузка ресурсов


А теперь прошу за мной в кроличью нору, настало время удивительных историй...


Читать дальше →
Total votes 54: ↑46 and ↓8 +38
Comments 150

Модульный CSS: — Инструментарий, который мы имеем сейчас в арсенале — это просто сказка

Reading time 6 min
Views 23K
JUG Ru Group corporate blog CSS *JavaScript *

Инструментарий, который мы имеем сейчас в арсенале — это просто сказка!

Андрей Оконечников, разработчик с 15-летним стажем, из которых пользовательским интерфейсам было отдано более десяти, Андрей расскажет на HolyJS об использовании PostCSS и Webpack для решения проблем фронтенд-разработки. Доклад Андрея называется «Модульный CSS» и посвящен тому, как при помощи JavaScript и AST работать с CSS на масштабных проектах. Отталкиваясь от тематики доклада, мы задали Андрею несколько вопросов, которые позволят вам понять глубину связи UI/UX с работой frontend-разработчика, а также о проблемах и будущем CSS на больших проектах.
Читать дальше →
Total votes 36: ↑22 and ↓14 +8
Comments 4

Как мы собрали 1500 звезд на Гитхабе, соединив проверенную временем технологию и новый интерфейс

Reading time 4 min
Views 12K
Open source *CSS *API *Data visualization *GitHub *
Translation


Недавно мы выпустили инструмент с открытым исходным кодом GraphQL Voyager. Удивительно, но он попал на первую страницу новостей Hacker News и GitHub, и в первые несколько дней получил 1000+ звезд. Сейчас у него уже более 1600 звезд.*


Людям понравился гладкий интерфейс, интерактивные функции и анимация. Мы использовали TypeScript, React, Redux, webpack и даже PostCSS, но это НЕ еще одна статья об этом. Давайте заглянем под капот...

Читать дальше →
Total votes 28: ↑22 and ↓6 +16
Comments 4

Практическое руководство по использованию CSS Modules в React приложениях

Reading time 9 min
Views 127K
CSS *JavaScript *ReactJS *
Sandbox
Привет Хабр! Предлагаю вашему вниманию свободный перевод статьи «Practical Guide to React and CSS Modules» от Tatu Tamminen.

В прошлом веб-разработчики тратили много времени и сил на создание повторно используемых компонентов. Оcобую проблему представлял собой CSS и природа его каскадов. Например, если разработчик создаёт компонент для отображения древовидной структуры, то как он может гарантировать, что CSS класс (например, .leaf), используемый в этом компоненте, не приведёт к побочным эффектам в других частях приложения? Были созданы различные методологии и соглашения, чтобы справиться с проблемами селекторов. БЭМ и SMACSS — широко используемые методологии, которые хорошо выполняют свои задачи, но в то же время далеко не идеальны. В этой статье рассказывается о недостатках таких методологий, основанных на соглашении об именах, о том, что представляют собой CSS Modules, и о том, как эти модули можно использовать в React приложении.
Читать дальше →
Total votes 8: ↑8 and ↓0 +8
Comments 17

Автоматизированная корректировка отступов в верстке на основании типографических стилей и текстовых метрик

Reading time 19 min
Views 7.6K
CSS *JavaScript *HTML *
Sandbox
Организация отступов при верстке и композиции элементов на странице требует определенной сноровки, чтобы обеспечить правильные комбинации и желаемый результат.

А если в дизайн-макете запрашиваемые отступы указаны без учета высоты линии и пустых областей отрисовки шрифтов (заплечики, диакритики, нисходящая высота)? Как сделать верстку максимально приближенной к макету эффективно и без долгих ручных пересчетов? Интерлиньяж и вертикальный ритм позволяют унифицировать расстояния между элементами, но не решают вопрос компенсации расстояний с учетом текстовых метрик используемых шрифтов.

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

В данной статье мы рассмотрим подход, призванный оптимизировать рутинную работу вокруг отступов — автоматизированная корректировка отступов с учётом высоты линии целевых элементов и текстовых метрик используемых шрифтов на этапе пре- или пост-компиляции стилей.
Читать дальше →
Total votes 11: ↑10 and ↓1 +9
Comments 3

Современный CSS для динозавров

Reading time 20 min
Views 68K
Web design *Website development *CSS *HTML *Browsers
Translation

— Двигать пиксели в CSS и так было трудно! А теперь мне говорят, насколько круто использовать несемантические названия классов, встроенные стили в HTML и даже писать стили CSS на JavaScript!
[Вставь тут гифку из «Гриффинов»] — Ха!
Иллюстрации из Dinosaur Comics Райана Норта


Как ни странно, CSS считается одновременно одним из самых простых и одним из самых сложных языков для веб-разработчика. Определённо он достаточно прост в начале — вы определяете свойства стиля, значения для конкретных элементов и… это практически всё, что нужно знать! Однако в больших проектах ситуация становится довольно запутанной и сложной, чтобы организовать CSS каким-то осмысленным образом. Изменение любой строчки CSS для стилизации элемента на одной странице часто ведёт к непредвиденным последствиям для элементов на других страницах.

Чтобы разобраться в присущей сложности CSS, созданы самые разные виды передовых практик. Проблема в том, что до сих пор нет единого мнения, какие из них являются лучшими, а многие из них полностью противоречат друг другу. Если вы впервые пытаетесь выучить CSS, то такая ситуация дезориентирует, мягко говоря.

Цель этой статьи — показать исторический контекст, как развивались техники и инструменты CSS до их нынешнего состояния в 2018 году. Поняв эту историю будет легче понять каждый подход и как с выгодой его использовать. Итак, начнём!
Читать дальше →
Total votes 43: ↑39 and ↓4 +35
Comments 41

«Реактивный» интерфейс. Лекция Артёма Белова на FrontTalks 2018

Reading time 12 min
Views 7.9K
Яндекс corporate blog JavaScript *Client optimization *Interfaces *ReactJS *
В браузерном JavaScript интерфейсы стали предсказуемы. «Однопоточные», с транзакционным сценарием отрисовки: пустой экран — загрузка — интерфейс. Разработчик Артём Белов из компании Cxense с упором на закон Парето рассказал, как, потратив 20% времени, отрисовать приложение на 80% быстрее за счет приемов «реактивного дизайна» — еще не сформулированных, но уже используемых в продуктах с приоритетом на UX.


Но что касается более матерых парней, которые не вылезают из Webpack и заставляют страдать Webpack, а не наоборот? Они подключают плагины. Но поскольку мы в начале развития этой техники, экосистема нам предлагает плагин, который берет ваш HTML, генерирует на его основе HTML со встроенным CSS, дает QR-код для рекламы… Серьезно? После этого ты можешь взять и через “!important” перебить стили… Пожалуй, стоит задать вопрос, почему я все еще во фронтенде.

Total votes 18: ↑18 and ↓0 +18
Comments 1

10 PostCSS плагинов, которые сэкономят время вашему верстальщику

Reading time 10 min
Views 28K
Website development *CSS *


У нас, у фронтендеров, есть такая категория инструментов, которые никак не решают стоящие перед нами задачи, а скорее влияют на сам процесс их решения. Изменяют его. Отношение к таким инструментам самое разное – начиная от мании в духе “давайте эту штуку пихать везде, это же так круто” и заканчивая отговорками вроде “раз не решает задачи бизнеса, значит оно нам не нужно”. Но, так или иначе, сегодня мы поговорим про PostCSS — один из таких инструментов.


Волна хайпа уже давно прошла, в последнее время про PostCSS говорят очень мало. Многие новички даже не знают, что это такое. Думаю самое время посмотреть на этот инструмент с точки зрения практического использования в самых обычных проектах, где люди решают задачи, а не играются с модными технологиями.

Читать дальше →
Total votes 27: ↑25 and ↓2 +23
Comments 14

Настройка webpack 5 [bonus] React Hot Reloading

Reading time 8 min
Views 23K
Website development *JavaScript *Programming *ReactJS *
Tutorial
Sandbox

Базовая настройка webpack 5 + настройка для разработки на React (вкл. React Hot Reloading).

Что, зачем и почему?

Что? Webpack - сборщик модулей для JavaScript. Является одним из мощнейших инструментов современной веб-разработки.

Зачем? Webpack позволяет комфортно создавать приложения по модульной структуре, он собирает все модули в один бандл и минифицирует его. Но это лишь поверхностное описание возможностей этого инструмента, на деле вебпак имеет значительно больше возможностей.

Почему? Вам теперь больше нет необходимости беспокоится о сборке проекта, один раз настроил webpack и он все будет делать за вас!
P.S. Ну, или не один раз.
P.S.S. Ладно, точно не один раз.

Читать далее
Total votes 5: ↑4 and ↓1 +3
Comments 7