• Шлифуем CSS-анимацию

    • Перевод
    Создание CSS-анимации может выглядеть как простое изучение синтаксиса, но для создания красивой и интуитивной анимации нужны определенные тонкости. Так как анимация привлекает достаточно много внимания, крайне важно привести код в порядок, чтобы хронометраж действовал правильно, и отладить все, что работает неправильно. После того, как я сама разобралась с этой проблемой, я решила собрать несколько инструментов, которые могут помочь в этом процессе.

    Использование значений отрицательной задержки


    Скажем, у вас есть несколько анимаций, которые запускаются одновременно, и вам нужно выстроить их в шахматном порядке. Можно использовать animation-delay, но вы не хотите, чтобы пользователь при посещении страницы ждал, пока запустятся некоторые недвижимые части.
    Читать дальше →
    • +10
    • 25,1k
    • 3
  • GitHub's CSS

    [Прим. перев.]: предлагаю вашему вниманию перевод статьи Марка Отто, разработчика GitHub, бывшего разработчика Twitter, создателя самого известного CSS фреймворка Bootstrap. В этой статье он рассказывает о внутреннем устройстве CSS проектов GitHub.


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

    Несколько фактов


    Обзор нашего текущего состояния CSS:

    • В качестве препроцессора мы используем SCSS.
    • У нас есть более 100 отдельных исходных файлов стилей, которые мы компилируем перед выкаткой в продашн.
    • Исходники компилируются в 2 отдельных CSS файла (чтобы избежать проблемы с максимальным количеством селекторов для IE<10).
    • Эти 2 файла весят в сумме около 90 kb.
    • Мы не используюм какую-нибудь особенную «CSS архитектуру».
    • Для определения размера мы выбрали пиксели, но все же у нас есть немного «em-ов».
    • Мы используем Normalize.css, смешанный с несколькими нашими собственными стилями для сброса свойств.

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