Сергей delphinpro

table 
  tr.hover
  tr
  tr

table:not(:hover) .hover,
table tr:hover {
  background: green;
  color: white;
}

Это же таблица..

<div class="row">
    <div class="col-lg-10 offset-lg-1">
        <div class="table-resposive">
            <table class="my-custom-table">
                <tr>
                    <td class="table__header">Плюсы</td>
                    <td class="table__header">Минусы</td>
                </tr>
                <tr>
                    <td class="table__content">печать неощутима на ткани</td>
                    <td class="table__content">самый сложный и поэтому дорогой способ шелкографии</td>
                </tr>
                <tr>
                    <td class="table__content">футболку можно гладить по рисунку</td>
                    <td class="table__content">технологически сложно достичь точной цветопередачи,
                        некоторые
                        цвета не выглядят так ярко, как задумывалось в макете
                    </td>
                </tr>
                <tr>
                    <td class="table__content">высокая стойкость рисунка при стирке</td>
                </tr>
                <td class="table__content">возможный процент брака больше, чем при других видах
                    шелкографии, так как результат можно увидеть только после сушки
                </td>
            </table>
        </div>
    </div>
</div>

Один из слоев, самый нижний, не делайте абсолютом

Без оглядки на конкретную структуру верстки связь между инпутом и меткой осуществляется через атрибуты for=id. Вот по ним и ищите.

input.addEventListener('change', e => {
  let label = document.querySelector(`[for="${e.target.id}"]`);
  console.log(label); // Нашли!
})

https://codepen.io/delphinpro/pen/GveGEY?editors=1100
адаптивно

Fixed элемент в любом случае будет вне потока и без привязок к родителям, только к вьюпорту.

Тут либо полагаться на фиксированную ширину сайдбаров, либо делать навбар абсолютом, позиционировать от родителя, а фиксацию осуществлять скриптами.

С другой стороны, если скрипты прикручивать, то ими же можно и fixed блок скорректировать.

Это невозможно.

Scss файлы компилируются до выполнения в браузере. А значение css-переменной присваивается именно во время выполнения.

Попробуйте наоборот:

$font-size: 16px;

@function rem($px) {
  @return ($px / $font-size) + rem;
}

:root {
  --font-size: #{$font-size};
}

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

Оба варианта

opechatka
.soc {
}

opechatka .soc {
}

идентичны синтаксически.

А здесь у вас ошибка, потому что отсутствует двоеточие, значение и точка-с-запятой

{
  opechatka
  display: flex;
}

Не проверял, но думаю, что такой варик тоже не вызовет ошибку, по причине, описанной выше:

{
  opechatka: 10px;
  display: flex;
}

Александр, Последнее условие вставляет палки в колеса.
265 *3 = 795 < 850; плюс медиа привязаны к вьюпорту.

В общем вот вариант, он работает, когда .parent ограничивается только вьюпортом.
Сделайте padding для body, медленно изменяйте размер панели, поймете, о чем я.
Можно внести поправки в значения медиазапросов на реальном сайте.

Старый скринкаст. Уже не помню где скачивал. Кажется у Кантора.
https://yadi.sk/d/KcvIExiP3JehyN

https://developer.mozilla.org/en-US/docs/Web/CSS/m...

Нет значения auto, есть значение none.

UPD
А по-хорошему, вообще применяйте подход в верстке такой, чтобы не нужно было отменять свойства.

Если на мобильных значение свойства должно быть дефолтным, а на десктопе другим, то и меняйте его только на десктопе!

@media screen and (min-width : 861px) {
  .block { max-height:400px; overflow-y:scroll; }
}

Тогда и переопределять ничего не нужно будет.

Зачем бутстрап? Можно и так быстро сделать:

Допилил фиддл от RAX7


PS
Для большей плавности можно убрать transition и менять scrollTop через $.animate()

<div class="block1">
    <div class="block1__title title">Title</div>
</div>
<div class="block2">
    <div class="block2__title title">Title</div>
</div>
<div class="block3">
    <div class="block3__title title title_size_large">Title</div>
</div>
<div class="block3 block3_theme_dark">
    <div class="block3__title block3__title_inverse title">Title</div>
</div>

Формально там БЭМ в классической нотации block__elem_mod-name_mod-value

class="text text_size_s24 text_align_left"

Мы видим здесь блок text с модификаторами.
Модификатор size со значением s24
и модификатор align со значением left

Тот факт, что модификаторы вырождены до одного css-свойства, не превращает БЭМ в AtomicCSS.