Игорь Стубарев

В общем, поигравшись немного с предоставленным кодом, стало понятно следующее:

Это явно проблема браузера, так что имеет смысл сообщить о ней разработчикам, написав bug report в их трекер.

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



Здесь видно, что картинка с точки зрения браузера находится в одном месте, а по факту нарисована в другом.

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

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

.chat-item__content.force-repaint .content-chat-content__message {
    opacity: 0.99;
}

Остаётся только "дёрнуть" CSS класс force-repaint на элементе контейнера - и всё сразу встаёт на место, поскольку осуществляется перерисовка. Например вот так:

function forceRepaintToFixChrome89Issue() {
    if (!navigator.appVersion.match(/\sChrome\/(89|9\d)\./)) {
        // Apply only for Chrome 89 and 90+
        return;
    }
    window.requestAnimationFrame(function () {
        const e = document.querySelector('.chat-item__content');
        if (!e) {
            return;
        }
        const fr = 'force-repaint';
        e.classList.add(fr);
        window.requestAnimationFrame(function () {
            e.classList.remove(fr);
        });
    });
}

В примере я добавил для этого кнопку, но в реальном приложении логично делать это, например, при изменении содержимого контейнера.

В Vue приложении используем препроцессор (scss). Кроме того используем внешние пакеты для вертикального ритма и сетки.

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

Вариант импортировать scss-файл с определениями в каждом компоненте сразу откинули, ибо люди мы ленивые.

Что делаем:
Подключаем в точке входа (main.js) основной стилевой файл:

import '@/styles/main.scss';
import Vue from 'vue';
//...

В нем подключаем всякое-разное-глобальное-базовое:

@import "base/normalize";
@import "base/init";
@import "base/typography";
@import "base/code";
@import "base/links";
@import "base/tables";
@import "base/buttons";
@import "base/control-group";
@import "base/general-form";
@import "parts/transitions";
...

Далаем два файла: env-development.scss и env-production.scss

$NODE_ENV: development;
@import "cfg-vars";

$NODE_ENV: production;
@import "cfg-vars";

Переменная $NODE_ENV нам нужно. чтобы управлять стилями в зависимости от окружения.
Дальше в cfg-vars.scss подключаем/пишем все необходимые глобальные конфиги

$DEV_MODE: $NODE_ENV == development;
$MAX_INT32: 2147483647;

@import "cfg-vrhythm";
@import "cfg-grid";
@import "../../../node_modules/vrhythm/source/vrhythm";
@import "../../../node_modules/bs-grid-system/source/scss/bs-grid";
@import "../mixins";
@import "cfg-z-indexes";

$wt-family-base: "Open Sans", sans-serif;
$wt-family-head: "Roboto Slab", serif;
$font-family-monospace:  "Fira Code", Menlo, Monaco, Consolas, "Courier New", monospace;

//==
//== Color palette
//== ======================================= ==//

$palette-light-blue: #3c8dbc; // Primary
$palette-red       : #dd4b39; // Danger
$palette-green     : #00a65a; // Success
$palette-aqua      : #00c0ef; // Info
$palette-yellow    : #f39c12; // Warning

...

Почти всё готово. Осталось только автоматически подключить эти конфиги к сборке.
Идём в vue.config.js и добавляем секцию css:

const NODE_ENV = process.env.NODE_ENV === 'development'
    ? 'development'
    : 'production';
//...
module.exports = {
    //...
    css: {
        extract: NODE_ENV === 'production',
        loaderOptions: {
            sass: {
                data: `@import "@/styles/config/env-${NODE_ENV}.scss";`,
            },
        },
    },
};

Теперь мы спокойно пишем стили компонентов на scss прямо vue-файлах, и оставляем возможность какие-то стили писать в отдельных файлах.

Enjoy!

Вы хорошую тему подняли.

Дизайн в 2010 был гораздо более востребован по нескольким причинам:
1. Не были развиты маркеты готовых шкурок типа Themeforest
2. Не было вменяемых конструкторов типа Тильды
3. Люди еще не успели наиграться в дизайн, поэтому с радостью пилили свои фантазии

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

Я давно заметил, что сам по себе дизайн уже не особо актуален. Нет, безусловно, есть еще куча клиентов на рынке, но и конкуренция стала в разы больше.

Могу дать три совета — как работать дальше:

1. Посмотрел ваши работы. Вполне себе проработанные и крепкие, но нет в них ничего свежего. Можете попробовать порисовать концепты — можно придумывать фейковые проекты, можно делать непрошенные редизайны существующих проектов. Главное, чтобы графически они рвали устоявшиеся шаблоны. Так делают многие ребята. Подобные концепты в принципе всегда неплохо заходят. Дрибл и Беханс. Соответственно, если сделаете что-то интересное — получите много трафика и потенциальных клиентов, которые придут именно к вам за вашим стилем и идеями.

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

3. Можете поискать работу в Москве/Киеве. Сначала переехать самому, потом перевезти семью. Это будет в любом случае лучше, чем остаться без работы в небольшом провинциальном городке.

Повторюсь — вы правильно рассуждаете. Просто дизайн уже никому не нужен.
Удачи.

Вложенных массивов же Sass не знает? В доке не нашёл.

Массивов вообще нет. Никаких.
Есть списки и есть карты.
И те, и другие могут быть вложенными.

$text_sizes: (
    s:   ( s:20px, m:48px, l:100px ),
    m:   ( s:24px, m:56px, l:114px ),
    l:   ( s:28px, m:68px, l:138px ),
    xl:  ( s:32px, m:74px, l:154px ),
    xxl: ( s:36px, m:88px, l:184px ),
);

@each $size, $def in $text_sizes {
    .text_size_#{$size} {
        @each $word_size, $word_width in $def {
            .text__word_width_#{$word_size} {
                width: $word_width;
            }
        }
    }
}

для window вот
(офигенное решение кстати)
https://stackoverflow.com/questions/17246309/get-a...

// make sure it doesn't count my own properties
(function () {
    var results, currentWindow,
    // create an iframe and append to body to load a clean window object
    iframe = document.createElement('iframe');
    iframe.style.display = 'none';
    document.body.appendChild(iframe);
    // get the current list of properties on window
    currentWindow = Object.getOwnPropertyNames(window);
    // filter the list against the properties that exist in the clean window
    results = currentWindow.filter(function(prop) {
        return !iframe.contentWindow.hasOwnProperty(prop);
    });
    // log an array of properties that are different
    console.log(results);
    document.body.removeChild(iframe);
}());

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

data: () => ({
  componentNames: [ 'comp1', 'comp2', 'comp3', 'comp4' ],
  ...
}),
computed: {
  componentName() {
    return [ 1, 2 ].includes(this.Q) && this.componentNames[this.B - 1];
  },
},

<component :is="componentName"></component>

UPD. Если дополнительно нужно передавать параметры, то в массиве можно хранить вместо имён компонентов объекты, которые будут содержать имя и набор параметров:

data: () => ({
  components: [
    { name: '...', props: { ... } },
    { name: '...', props: { ... } },
    ...
  ],
  ...
}),

Вычисляемое свойство не изменится (за исключением имени, конечно), а шаблон станет выглядеть так:

<component
  v-if="component"
  :is="component.name"
  v-bind="component.props"
></component>

https://jsfiddle.net/69xv0b47/