Ответ 1

Разделение проблем между HTML и CSS

Несмотря на то, что внешнее из HTML CSS следует рассматривать отдельно, оно фактически не в тех случаях, когда вы вставляете селекторов, специфичных для элемента HTML. В вашем случае, когда ваши селекторы относятся к фактическим элементам HTML, а их иерархия делает ваш CSS тесно связанным с вашим источником HTML. Это делает ваш CSS негибким и, вероятно, больше, чем он должен быть.

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

Почему .form-button лучше, чем input[type=submit], тогда?

Потому что вы можете изменить свой <input type=submit /> на <button type=submit>, который является контейнером, и дает гораздо больше свободы дизайна дизайнерам пользовательского интерфейса. Если вы использовали CSS-классы, вы, вероятно, не изменили бы слишком много о его свойствах, но если бы вы использовали имена тегов, вам придется пересмотреть свой файл CSS и внести в него изменения.

Другой пример - с другими типами входов, то есть кнопкой "Отмена". Если он был визуально идентичен кнопке отправки, дизайнеры могут сказать, что Submit является основным действием, а Cancel является вторичным, поэтому он должен отображаться как простая ссылка. Использование классов приведет к меньшему обслуживанию снова.

Почему CSS только классов не является волшебной маркой?

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

Рекомендуется разделять общие свойства стиля только с помощью селектора на основе классов и добавлять специальные стили для тега + селектор на основе класса с ограничением как (синтаксис LESS/SCSS):

/* generic */
.navigation {
    background-color: #999;
    margin: 0;

    .item {
        display: inline-block;
        padding: 10px;
    }
}

/* specific to UL */
ul.navigation {
    list-style: none;
}

Это дает вам максимальную свободу и улучшает ремонтопригодность до максимальной.

Вывод: предпочтительны селектор, основанный на классе ^{: OOCSS}

Да. Большую часть времени. Таким образом, вы сможете написать объектно-ориентированный CSS (статью о SmashingMag, Репозиторий GitHub) с меньшим дублированием кода и исключениями. Это улучшит вашу техническую поддержку CSS.

Важное примечание: Как и в случае с любым кодом, вы не должны слишком переустраивать свой CSS. Я показал вам, как вы можете предоставить гибкие определения стиля, но вы не должны всегда следовать этим правилам. Вы должны обеспечить достаточную гибкость в начале и рефакторинг по мере необходимости, пока вы идете. Но держать себя на стороне классов большую часть времени.

Ответ 2

Я вообще думаю о связи.

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

Для "сложных" сайтов с использованием классов, по моему мнению, обязательно. Используя классы, вы можете отделить CSS от HTML. Я имею в виду, что если вы добавляете классы в основные элементы "вещи" (которые затем становятся модулем), вы можете изменять разметку, если вы держите одни и те же классы (очевидно, если вы меняете много, разметки, вам может потребоваться многое изменить и CSS. Для более простых изменений, таких как перенос элемента в div или изменение h1 на h2, вам не нужно будет менять CSS).

Кроме того, вам становится легче читать CSS, потому что когда вы читаете это:

.blog-posts > .blog-post > .blog-post-title

Вы знаете, что вы говорите о стиле заголовка сообщения в блоге, который лучше, чем

div > div > h1

(или любой другой аналогичный анонимный селектор).

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

.blog-post-title {}
.blog-post-subtitle {}
.blog-post-body {}
.blog-post-tags {}

и т.д.

SMACSS, на мой взгляд, отличный способ организовать таблицы стилей, я предлагаю вам прочитать об этом. Как я писал ранее, если вы разрабатываете "простой" сайт, вам не нужна вся эта суета. Но для сложных сайтов использование многоразовых модулей - большой плюс.

Ответ 3

Ответ: зависит от того, что вы хотите.

Объяснение:

1) Возьмите этот селектор input[type="submit"], используя это, нацелитесь на все кнопки отправки на своем веб-сайте, вы можете использовать этот селектор, если хотите группировать/обобщать некоторые свойства ваших кнопок, например font-family, font-weight и т.д. Поэтому использовать это недостаточно, если вы хотите настроить таргетинг на определенную кнопку отправки.

2) Использование .form-button будет нацелено на любой элемент с классом .form-button, поэтому, чтобы сделать его более конкретным, вы можете использовать input[type=submit].form-button, который ограничит класс, который будет использоваться только для кнопок отправки. Кроме того, вам нужно объявлять класс каждый раз, когда вам нужно стилизовать кнопку.

3) .navigation ul:nth-of-type(2) a:nth-of-type(3) Вот что я говорю над конкретным селектором. Это просто ухудшит производительность. Мало того, это также вызовет серьезные проблемы с конкретностью. Вам нужно использовать это, где вы не можете изменить разметку. Вместо этого вызов элемента class для элемента, который вы планируете настроить, будет намного проще, как вы указали в последней точке вашего вопроса.

Вывод:

input[type="submit"] - Используйте это для группировки похожих свойств, которые будут использоваться всеми кнопками отправки на вашем веб-сайте.

.form-button - используйте это для целевых кнопок, которые вы хотите иметь уникальные стили (дополнительные стили, которые вы хотите, помимо свойств, объявленных в input[type=submit])

.navigation ul:nth-of-type(2) a:nth-of-type(3) - Я не вижу причин использовать это, если и до тех пор, пока у вас не останется другой возможности, но использовать это, так как это не обязательно. Опять же, использование этого или нет зависит от некоторых обстоятельств, поэтому нельзя сказать полностью игнорировать это.

.different-link - Разумеется, лучше, чем использовать специализированные селекторные кнопки для уникальной стилизации ваших кнопок.

Ответ 4

Мой простой ответ на этот вопрос будет следующим: вы должны выбрать элемент по имени tagName не классу или идентификатору, если вы даете тот же макет на веб-сайте.

Вопросы не имеют никакого смысла, поскольку вы сами делаете много предположений и постоянно отвечаете на него, и мнения здесь не допускаются, вы должны были задать вопрос на http://programmers.stackexchange.com. Вы упомянули

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

Тогда что может быть проблемой?

Единственное различие между ними состоит в том, что они будут группировать элементы с одним и тем же именем тега или с тем же классом или идентификатором. Они ничего не сделают.

Теперь вам нужно полностью написать код, потому что на многих страницах вам может понадобиться изменить стиль кнопок.

Псевдо

Использование псевдо-класса или селектора - хорошая идея, только если вы хотите стилизовать дочерние элементы одного элемента, так как кнопка отправки не имеет дочерних элементов, тогда этот селектор является неопределенным.

Прямой выбор элемента

input[type="submit"] { /* styles */ }

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

Использование идентификатора или класса

.form-button { /*styles */ }

Возможно, вы захотите его использовать, когда вы создаете кнопку, которая должна быть больше или меньше, скажем, отправить кнопку подтверждения. Что должно отличаться от других.

Ответ 5

Это определенно не все одно или другое.

Ваш первый пример стилизации submit input с помощью селектора css на основе атрибута приведет к переопределению этого объявления для случаев, когда вам нужна нестандартная или разная кнопка. Поэтому, вероятно, лучше использовать в этом случае очень общую декларацию CSS, а затем использовать классы для добавления разных вкусов к вашим кнопкам в зависимости от варианта использования.

Посмотрите Bootstrap.

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