Rails: CSS не отображается в инспекторе и не применяется

Question

У меня странная ошибка, и она случается со мной регулярно.

Я делаю некоторые CSS для проекта, и в середине некоторые CSS просто начинают не учитываться.

Все CSS-файлы работают нормально, это просто одна строка или один класс, который просто не работает или вообще не отображается в инспекторе (обычно, когда CSS не работает, класс появляется, но код не работает пересекается).

Я все перепробовал. - Отключение кеша в сети - Очистка моего кеша - Удаление всего в моем CSS-файле, чтобы сохранить только один класс (чтобы убедиться, что где-то нет синтаксической ошибки) - Изменение имени класса, чтобы убедиться, что он не конфликтует ни с чем,- Я также проверил источник и вижу свою строку CSS, поэтому она правильно скомпилирована!

Когда я проверяю инспектор, для этого класса применяется только нулевой код. Как будто его не существует.

Самое странное, что если я изменю название класса, он все равно не будет работать. Но если я добавлю другой класс в другую строку, это сработает. Это просто сбой для конкретной линии. Единственный способ, которым я могу заставить это работать, - это добавить CSS, прямо встроенный в мой HTML. Но я не хочу этого делать, это ужасно.

Это случалось со мной много времени, с разными проектами какое-то время. Иногда, когда я пытаюсь с тем же кодом через 2 дня, это работает. Иногда нет. Я даже снял видео, чтобы воспроизвести всю ошибку, потому что это так странно, я не могу найти решение. Я показал эту ошибку хорошим друзьям кодера, и они тоже не понимают ...

Кто-нибудь имел это раньше?

Вот код, на всякий случай

  <div class="text-step">
    <%= image_tag "pay_icon.png" , height: 40 %>
    <h3>Pay by card</h3>
    <p>Pay in less than 1 minute</p>
  </div>

  .text-step {
    width: 45vw;
  }

И вот что показывает в инспекторе:

element.style {
}
*, *::before, *::after {
    box-sizing: border-box;
}
user agent stylesheet
div {
    display: block;
}

Ничего для "text-step" ...

РЕДАКТИРОВАТЬ: CSS находится в отдельном файле CSS. С 100 строк CSS в нем. Все отлично работает, кроме строки, которую я скопировал. Вот почему я говорил, что я пытался удалить все, что находится внутри этого файла, просто чтобы сохранить тот, который я скопировал (чтобы убедиться, что нет синтаксических ошибок). Извините за путаницу, я должен был быть яснее.

РЕШЕНО: Эй. Итак, я разгадал эту загадку. Это на самом деле немного сумасшедший. Пробел между моим именем класса и моей скобкой был неразрывным пробелом. Это происходит на Mac, когда вы нажимаете пробел + Alt одновременно. Я, вероятно, иногда делаю это, даже не осознавая этого ... Нашел решение где-то в Интернете, но отладить его, не зная об этом, было практически невозможно, поскольку вы не можете заметить разницу глазом!

Большое спасибо

Answer 1

Я даю ответ, основываясь на предоставленной вами информации, отредактирую, если будет предоставлена ​​дополнительная информация.

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

<style type="text/css">
      .text-step {
        width: 45vw;
        color: red;
      }
</style>

<div class="text-step">
    <!-- commenting the below since it's not HTML -->
    <!-- <%= image_tag "pay_icon.png" , height: 40 %> -->
    <h3>Pay by card</h3>
    <p>Pay in less than 1 minute</p>
</div>

То, что каждый разработчик узнает, это то, что машина никогда не ошибается . Если вы думаете, что браузер обманывает вас, это не так. Браузеры проверены в бою, особенно для простых задач, таких как анализ HTML и CSS, проблема будет в вашем коде.

, чтобы убедиться, что где-то нет синтаксической ошибки

Если вы хотите проверить такое странное поведение, лучший способ сделать это - запустить «независимый» тест. Откройте что-то вроде jsBin или Codepen и добавьте код, который доставляет вам проблемы. Таким образом, вы можете протестировать сам код без каких-либо других проблем (ваш компилятор, сайт, который вы используете, ваша система кэширования, Бог знает, что еще).

Answer 2

Попробуйте использовать так:

  <style>
  .text-step {
    width: 45vw;
  }
</style>

<div class="text-step">
    <img src="pay_icon.png" style="height: 40%">
    <h3>Pay by card</h3>
    <p>Pay in less than 1 minute</p>
</div>

Answer 3

решено: Эй. Итак, я разгадал эту загадку. Это на самом деле немного сумасшедший. Пробел между моим именем класса и моей скобкой был неразрывным пробелом. Это происходит на Mac, когда вы нажимаете пробел + Alt одновременно. Я, вероятно, иногда делаю это, не осознавая этого ... Нашел решение где-то в Интернете, но отладить его было невозможно, не зная об этом, поскольку вы не можете заметить разницу глазом!

Answer 4

Вы можете использовать этот код

        body {
            margin: 0;
            padding: 0;
        }
        *, *::before, *::after {
            box-sizing: border-box;
        }
        div {
            display: block;
            margin: 0 auto;
        }
        .text-step {
            width: 45vw;
            background-color: #dddddd;
            padding: 15px;
        }

    <div>
        <div class="text-step">
            <%= image_tag "pay_icon.png", height: 40 %>
            <h3>Pay by card</h3>
            <p>Pay in less than 1 minute</p>
        </div>
    </div>