Serj-One

border: 1px solid #000;
margin:-1px 0 0 -1px;

Или вот такой хак нашла) https://codepen.io/anon/pen/ZqaXNy

.item{
  width: 200px;
  height: 200px;
  box-shadow: 
    1px 0 0 0 #000, 
    0 1px 0 0 #000, 
    1px 1px 0 0 #000,
    1px 0 0 0 #000 inset, 
    0 1px 0 0 #000 inset;
}

На выходе получите обычный CSS.

С компиляцией потом разберетесь, когда самостоятельно начнете пользоваться.

Один знакомый подсказал что вроде бы нельзя подключать несколько CSS, это правда?

Кроме официальной документации никого не слушайте и ни у кого не спрашивайте ни советов ни подсказок!
Спрашивать - нужно только после того, как оф. документация не помогла.
Подключать - можно, включая иерархическую вложенность.

Хоть двадцать два. Правила CSS разбираются и применяются в порядке приоритета, внутри одного приоритета - в порядке следования.

Идеального решения, чтобы все было в 1 месте, да ещё и с таким же функционалом я не нашёл

Мой вариант:
Электронная почта - GMail (ежемесячный полный бекап)
Распределённый и быстрый доступ к личным файлам - Google Drive (постоянная синхронизация)
Хранение кода - GitLab (постоянная синхронизация)
Сервис личных быстрых заметок - Google Keep (ежемесячный полный бекап)
Сервис личных долгосрочных заметок - Google Docs (ежемесячный полный бекап)
Список дел - Todoist (ежемесячный полный бекап)
MindMap - XMind (Файлы на Google Drive. Постоянная синхронизация)

P.S.
Больших личных проектов нет, но, скорее всего, использовал бы Trello (пока хватает todoist)
Evernote заменил на Google Keep + Google Docs, т.к. удобнее когда все в 1 месте, ну и меньше ограничений.
Todolist показался субъективно удобнее аналогов (использую всего несколько видов проектов DAY, LATER, ROUTINE, CONTROL, MAYBE, PROJECTS)

С недавнего времени (с момента появления на свет лет 8 назад) БЭМ принят ещё некоторыми менее известными командами-энтузиастами типа Google (включая Material Design Lite, android.com), BBC, The Guardian и т. д., пропагандируется крупнейшими международными изданиями по веб-разработке:

1. site:css-tricks.com bem
   
2. site:csswizardry.com bem
   
3. site:smashingmagazine.com bem
   

Аналогов как к методологии пока не встречал, есть «пограничные» решения, частично решающие какую-то из проблем, учтённых в БЭМ: css-in-js, CSS Modules, WebComponents. А сама формулировка вопроса даёт ощущение, что вы не знакомы с темой вопроса: bem.info — там есть ответы на распространённые заблуждения, включая мнение, что «БЭМ — это про CSS и классы через чёрточку».

есть микрофризы и фреймрейт скачет где-то. Стоит ли в таких случаях полностью переходить на js-движок типа GSAP ?

Важно понимать, что GSAP, Anime.js или еще что-то похожее - это инструменты, которые не приносят ничего принципиально нового в плане технологий. Они просто дают удобный интерфейс, через который мы можем менять значения свойств CSS или каких-то атрибутов SVG. Не более того. Соответственно если у вас есть нормально написанная анимация на чистом CSS/JS и она тормозит, то GSAP ее особо не ускорит.

есть микрофризы и фреймрейт скачет

Если есть проблемы с текущими анимациями, то стоит проверить, что:
- Везде используется transform, а не изменения width, height, top, bottom, margin, background-position и.т.д.
- По возможности не запускается более одной CSS-анимации в единицу времени.
- Все js-анимации собраны в один requestAnimationFrame.
- Все CSS/SVG фильтры по возможности заменены на шейдеры. Советую почитать введение в эту тему и еще примеры.
- Изменение теней в анимациях по возможности заменено на появление псевдоэлементов с такими фонами.
- CSS-свойство will-change используется по назначению.

используйте https://developer.mozilla.org/ru/docs/Web/HTML/Ele...
пример 1, пример 2

.input__kids:checked + span{
  background-image: url(/images/svg/cheked.svg);
}

<label class="label__kids" for="1.1">
<input name="kids" class="input__kids" type="checkbox" name="1" id="1.1">
<span></span>
</label>

и размеры, понятное дело. Сам инпут скрыть.
Либо
инпут не внутри лейбл, а лейбл после инпут, тогда будетinput:checked + label

К каждому индивиду нужен свой подход. Чаще всего помогает: матом объясняешь, что ты занят и все. Желательно с оскорблениями, что бы второй раз желание слушать не было.
Как вариант замок на дверь и график рабочий и не отвечать на провокации.
Ну и если ты человек спокойный и хамить не научен (а я бы освоил обязательно этот скил) можно просто на любой "вынеси мусор", вызывать "мужа на час" или аналоги. Только так доступно можно объяснить, что ты дорого стоишь в рабочее время.
Когда жил с тещей - поступал так. Просто сидел и рубился в игры, на каждое помоги, помогал. Но не работал. Где-то на 2-й день спросили, что не так, почему не работаю. Сказал, что не смогу тогда по дому помогать А это явно приоритетная задача. Поэтому решил больше не работать, никогда. Вопрос закрылся. При появлениях рецессии достаточно "увольняться?".
Все родственники считают меня психом, но привыкли. Я же называю это "радикальная психологий". Работа кипит, хозяйство не отвлекает.
ПС: самое главное в жизни вообще - научиться говорить "нет".