Ответы пользователя по тегу CSS
  • CSS-in-JS. Используется ли в продакшене?

    Hecc
    @Hecc
    Frontend. Дизайн. Шрифт.
    Как по мне, CCS-in-JS очень специфичная штука, хотя в продакшене можно встретить довольно часто.

    Местами, его использование оправдано, например:
    - При работе с динамически выделяемыми css свойствами, например когда обычный calc уже не справляется
    - При очень сложном динамическом лейауте
    - При темизации компонентов и вообще существовании такой концепции как "Тема" внутри вашего проекта.

    Тем не менее, минусов как по мне не меньше:
    - Проблема кеширования, такие стили не могут быть закешированы, т.к генерируются на лету и требуют того чтобы браузер распарсил ваш компонент и добавил стили в DOM. + Как результат намного больший размер финального бандла проекта.
    - Хаос в файлах, когда приходится держать вместе компоненты и их стили. Опять же решаемо, но те проекты которые я видел, которые используют концепцию CSS-in-JS по большей части фигачат обычные статические стили, просто используя js нотацию, а изначально задумка была не в этом. Для такого, давно придумали более эффективные решения.
    - Отвратительный DX при дебаггинге.

    Если подрезюмировать, то в целом есть некоторые задачи который этот подход хорошо решает.
    Если не можете с уверенностью сказать, что да CSS-in-JS решает мою задачу - использовать его не стоит.
    Использование технологии ради технологии, не привидет ни к чему хорошему. Во всех остальных случаях использование более классического стека в виде или чистого CSS или любого из препроцессоров более оправдано.
    Ответ написан
    4 комментария
  • Как на CSS3 сделать затухание?

    Hecc
    @Hecc
    Frontend. Дизайн. Шрифт.
    На последнем проекте, я делал через псевдокласс :before и градиент.
    https://jsfiddle.net/ahd3mp54/1/

    Работает отлично.
    Ответ написан
  • Постепенная загрузка изображения?

    Hecc
    @Hecc
    Frontend. Дизайн. Шрифт.
    Это называется progressive jpg - погуглите.
    https://habrahabr.ru/post/165645/
    Ответ написан
    Комментировать
  • Ширина блока магически теряет треть на маленьком экране!?

    Hecc
    @Hecc
    Frontend. Дизайн. Шрифт.
    У вас блок .container имеет фиксированый размер width:1070рх, при том что его родитель header (который почему-то футер) имеет 100% ширину, которая берется от элемента body т.к у вас отсутствует какая либо общая отвертка.
    Таким образом родитель растягивается на 100% от размера вашего экрана (подозреваю что 320рх), а дочерний элемент выходит за его пределы потому что его размеры 1070рх.
    Это все видно в dev-tools и очень быстро отлавливается.

    Попробуйте добавить мета-тег:
    <meta name="viewport" content="width=XXX">
    где вместо ХХХ ширина вашего контента (подозреваю что 1070рх)

    По сути тоже самое что добавить для body min-width: 1070px

    /* line 99, ../sass/screen.scss */
    .container {
      width: 1070px;
      height: auto;
      margin: 0 auto;
      padding: 0 10px;
    }
    Ответ написан
    4 комментария
  • Почему не работает media?

    Hecc
    @Hecc
    Frontend. Дизайн. Шрифт.
    2) Это ошибки которые вылазят в хроме при наличии на странице youtube видео.
    Возникают из-за бага в chromecast.js — нативном скрипте который работает в хроме. Ничего критичного, можете отрыть любой сайт на котором есть встроенное ютуб видео и вы найдете там же эти ошибки.
    Разработчики о них знают, но почему-то давненько уже не фиксят.
    Ответ написан
    Комментировать
  • Как править стили LESS не открывая сами файлы в Brackets?

    Hecc
    @Hecc
    Frontend. Дизайн. Шрифт.
    Brackets спокойно работает с Less и через ctrl+e его можно редактировать.

    Я в проектах работаю с сборщиком Gulp, который это все дело собирает. У него есть прекрасный таск gulp watch который следит за изменениями в .less файлах и на лету компилирует из них css.
    Соответственно, если у вас включен сборщик\компилятор, который - то проблем не будет.
    9ac382cec0d84660906f557b749e02b4.JPG
    Ответ написан
    Комментировать
  • SASS: мгновенное обновление, как в brackets. Возможно ли?

    Hecc
    @Hecc
    Frontend. Дизайн. Шрифт.
    Так можно на Brackets поставить SASS. Есть специальный плагин для этого:
    Откройте плагины в программе и поставьте через неё, просто вбейте в поиск SASS.
    8292ad99292449d5af673161980dec4e.jpg
    Ответ написан
    Комментировать
  • Какие инструменты для вёрстки лучше использовать?

    Hecc
    @Hecc
    Frontend. Дизайн. Шрифт.
    Я использую Brackets.
    Все что вам надо, там есть прямо из коробки - поддержка препроцессоров(less,sass etc.), моментальное превью в браузере, локально.
    Плюс на будущее, там есть огромное кол-во полезных плагинов, которые можно по желанию подключить - Git, Jade, Emmet и много чего другого.
    Ответ написан
    1 комментарий