Именование и вызов элементов в CSS/HTML

Question

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

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

<ul id="thing_list">

    <li>
        <div>
            <header>
                <h2>Name of the thing</h2>
                <p>Some thing here</p>
            </header>
            <nav>
                <ul id="actions">
                    <li>Edit</li>
                    <li>Move</li>
                    <li>Delete</li>
                </ul>
            <nav>
        </div>
    </li>

И CSS для этого выглядит так:

#thing_list li > div > nav li {
    list-style-type: none;
    display: inline;
    vertical-align: bottom;
}

#actions li {
    position: absolute;
    bottom: 0;
}

Итак, вопрос в том, какой способ лучше для меня назвать вещи? Лучше определить ID/Class для всего или определить несколько и использовать #thing_list li > div > nav li?

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

Answer 1

Большая разница между классами CSS и идентификаторами CSS заключается в том, что имя класса CSS можно использовать несколько раз, в то время как идентификаторы CSS используются только один раз. CSS-идентификаторы используются для применения стилей CSS к элементу и только к элементу, идентифицированному с помощью CSS-идентификатора. CSS-классы следует использовать для элементов, которые вы будете использовать часто. Например, используя общее имя класса CSS, вы можете назначить одинаковые стили всем таблицам на вашей веб-странице. Использование #thing_list li > div > nav li не рекомендуется, так как для обработки требуется дополнительное время. Надеюсь, что это полезно!

Answer 2

Во-первых, используйте правильный HTML (вы лучше нас dl/dt/dd для вашего примера).

См. Css "Каскадирование", поэтому нужно переопределить стили в растущей специфике. В зависимости от вашего выбора специфики.

Примечание. Идентификаторы в документе должны быть уникальными из-за привязки URL-адреса.

Если вы говорите: каждое поле ввода должно быть синим, а приветствие должно быть красным, напишите это:

 <label>Name: <input></label>
 <label>Saluation: <input class="sal" ></label>

 <style>
 input{
     background-color:blue;
 }
 input.sal{ 
     background-color:red;
 }
 </style>

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

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