0

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

То есть вот такой html: <p>blablabla</p> и стили p {color:green;} - это неправильно.

А правильно на каждый абзац писать <p class='green'>blablabla</p>, а потом в CSS файле .green {color:green;}.

Всё то же самое про ссылки, списки и тд.

Мне это кажется немного нелогичным. Как же правильно?

5
  • Если у вас весь текст одним цветом, вполне нормальный способ p{color: value;}
    – soledar10
    25 мая 2019 в 20:27
  • @soledar10 Я также и сказал, на что получил ответ: "А вдруг ты этот же CSS файл подключишь к другому HTML документу?"
    – Shved
    25 мая 2019 в 20:29
  • 2
    Ну правильно было сказано про "а вдруг". Но если есть железобетонная уверенность, что стили будут работать только на текущей странице (и на других, где всё равно нужен тот же стиль) - спокойно можно писать p {color...}. 25 мая 2019 в 20:36
  • Странный препод... А что, если названия стилей будут пересекаться? Все зависит от задач. Посмотрите как устроен bootstrap. 25 мая 2019 в 20:39
  • Ну «а вдруг» завтра приспичит переделать <p> в <div>? Придётся все стили переписывать :)
    – andreymal
    28 мая 2019 в 14:24

2 ответа 2

1

Совет: слушайте вашего преподавателя внимательно и внимайте!!!

Я уверена, что преподаватель свои утверждения обосновал, возможно Вы что-то упустили.

Все зависти от задачи.

Вариант 1. Нужно задать всем параграфам одинаковые стили, зеленый цвет текста:

p {
  color: green;
}
<main>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates nulla eos molestiae aspernatur quas dolor, eum officiis culpa cupiditate ab.
  </p>
</main>

<footer>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus, est.
  </p>
</footer>

Вариант 2. Нужно задать зеленый цвет текста только параграфу внутри второй секции основного контента в третьем div .... (для случая со сложной разметкой).

Сможете ли Вы задать стили только через один лишь тег?! Возможно, и сможете, но это будет выглядеть примерно так: main>div+div>p { color: green; }.

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

Вот именно из-за возможных изменений и манипуляций с разметкой (html) лучше задавать блокам классы.

.green {
  color: green;
}
<main>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates nulla eos molestiae aspernatur quas dolor, eum officiis culpa cupiditate ab.
  </p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero, fuga.
  </p>


  <section>
    <div>
      <p>
        Lorem ipsum.
      </p>
    </div>
    <div>
      <p class="green">
        Lorem ipsum dolor sit amet.
      </p>
    </div>
  </section>
</main>

<footer>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus, est.
  </p>
</footer>


Подробнее о приоритетах.

Статья о верстке с помощью БЭМ.

P.S: Параграф p приводится исключительно в качестве примера. Все это касается любого другого html элемента и задание для него стилей.

Если проще:

  • Используем для всех элементов на странице одни и те же стили везде и всегда - можно задавать стили через тег!

    Пример:

      p {
          margin: 0 0 1rem;
        }
    
      ul {
          padding: 0;
        }
    
      ul>li {
        color: #333;
      }
    
  • Элемент имеет свои собственные стили (не все параграфы,а только определенные), элемент может использоваться в любом месте разметки (не теряя стили), к элементу должен быть доступ для других разработчиков - используем class или id.

    Пример:

.green {
  color: red;
  font-weight: bold;
}
<main>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates nulla eos molestiae aspernatur quas dolor, eum officiis culpa cupiditate ab.
  </p>

  <section>
    <div>
      <p>
        Lorem ipsum.
      </p>
    </div>
    <div>
      <article>
        <p class="green">
          Lorem ipsum dolor sit amet.
        </p>
      </article>
      <article>
        <p>
          Lorem ipsum dolor sit amet.
        </p>
      </article>
    </div>
  </section>
</main>

0

Писать стиль для тэга плохая практика потому что ты никогда не знаешь что потом может быть с твоей версткой, после тебя придет другой верстальщик добавить там кнопочки или что-то нибудь и столкнется с тем что ты тэгам определил стили а не классам, и он матерясь будет переписывать весь css, это кстати одна из причин почему придумали классы и почему придумали фреймворки по типу Bootstrap, Polymer и тд. потому что нужно что бы другой разработчик сходу понимал что у тебя написано и не тратил время на понимание всей твоей верстки.

1
  • На весь ответ всего две точки — да вы издеваетесь, это ж тяжело читать
    – andreymal
    28 мая 2019 в 14:23

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.