Есть ли какие-либо за и против, если я всегда использую Класс CSS вместо этого идентификатор CSS для всего?
Печать моноширинного шрифта в размерах по умолчанию - (на листе А4) 80 столбцов 66 строками.
8 ответов
Одно большое различие: в CSS класс имеет более низкий уровень важности, чем идентификатор.
Представьте, что каждая спецификация в объявлении CSS добавляет определенное количество точек к значению этого объявления. Допустим, точки выглядят примерно так (полностью выдуманные, но неважно):
- Имя тега ('a', 'div', 'span'): 1 балл
- Имя класса ('.highlight', ' .error ',' .animal '): 10 баллов
- ID (' # main-headline ',' #nav ',' #content '): 100 баллов
Итак, следующие объявления:
a {
color: #00f;
}
.highlight a {
color: #0f0;
}
#nav .highlight a {
color: #f00;
}
являются стоит 1, 11 и 111 баллов (соответственно). Для данного тега «выигрывает» объявление с наибольшим числом баллов, которое соответствует ему. Так, например, с этими объявлениями все теги a будут синими, если только они ' re внутри элемента с классом "highlight", и в этом случае они будут зелеными, если только этот элемент не находится внутри элемента с id = "nav", в этом случае они будут красными.
Теперь вы можете попадете в сложные ситуации, если используете только классы. Допустим, вы хотите сделать все ссылки в области содержимого синими, а все ссылки в области foo - красными:
.content a {
color: #00f;
}
.foo a {
color: #f00;
}
По моей предыдущей (составленной) шкале, обе они имеют 11 баллов. Если у вас есть foo в вашем контенте, какой из них выиграет? В этой ситуации foo выигрывает, потому что идет после. Возможно, вы этого хотите, но это просто удача. Если вы позже передумаете и захотите, чтобы контент выигрывал, вам придется изменить их порядок, и в зависимости от порядка объявлений в файле CSS это плохая идея. Теперь, если бы вместо этого у вас было следующее объявление:
#content a {
color: #00f;
}
.foo a {
color: #f00;
}
Контент всегда будет выигрывать, потому что это объявление имеет значение 101 (больше, чем у foo 11). Независимо от того, в каком порядке они идут, объявление содержимого всегда будет лучше, чем foo. Это дает вам очень важную последовательность. Победители не будут произвольно меняться в зависимости от порядка в файле, и если вы хотите изменить победителя, вы должны изменить объявления (возможно, добавьте #content перед объявлением .foo, чтобы в нем было 111 очков).
Таким образом, в основном различия в ценностях важны, и вы получаете много несоответствий и, казалось бы, произвольных победителей, если просто используете классы.
Это дает вам очень важную последовательность. Победители не будут произвольно меняться в зависимости от порядка в файле, и если вы хотите изменить победителя, вы должны изменить объявления (возможно, добавьте #content перед объявлением .foo, чтобы в нем было 111 очков).Таким образом, в основном различия в ценностях важны, и вы получаете много несоответствий и, казалось бы, произвольных победителей, если вы просто используете классы. Это дает вам очень важную последовательность. Победители не будут произвольно меняться в зависимости от порядка в файле, и если вы хотите изменить победителя, вы должны изменить объявления (возможно, добавьте #content перед объявлением .foo, чтобы в нем было 111 очков).
Таким образом, в основном различия в ценностях важны, и вы получаете много несоответствий и, казалось бы, произвольных победителей, если просто используете классы.
Самая большая из моих задач связана с будущим обслуживанием. Приятно не только знать, что стиль используется только для одного элемента на странице, но и если вы когда-нибудь начнете интегрировать javascript на свою страницу, приятно иметь возможность быстро получить доступ к элементам, используя их идентификаторы, а не пытаться получить к ним доступ по их класса.
Если вы используете достойная библиотека javascript (например, прототип или jQuery), тогда нет, я не могу придумать никаких технических причин, по которым это имело бы значение. Однако,
Проще говоря, мы можем определить идентификатор и класс, как показано ниже.
ID = A person's Identification (ID) is unique to one person.
Class = There are many people in a class.
Используйте id , когда элемент уникален на странице, и вы всегда ожидаете, что так будет. Используйте класс , когда нескольким элементам будет присвоено значение атрибута. Это правда, что это может не иметь большого значения с точки зрения чисто CSS, но с точки зрения JavaScript или Selenium очень важно иметь возможность однозначно идентифицировать элементы по их атрибуту id .
Я знаю, что я здесь не "норма" и я буду за это перебирать... но я использую исключительно классы и всегда использую только ID для скриптинга :)
Это создает четкую линию разделения дизайнерских и связанных с кодом настроек и изменений, что очень удобно для нас!...
Также у нас есть несколько .NET кодеров веб-формы (даже несмотря на то, что мы переносим все сайты в MVC) и так как .NET элементы управления берут на себя идентификаторы для динамического сценария, используя ID'ы для CSS - это больно... Я не фанат использования #ct00_ct02_MyControlName в css файлах и даже если бы я вносил изменения в код, это могло бы сломать CSS! Классы для этого работают GREAT.
Некоторые PHP-либвы, используемые другими компаниями, также нуждаются в динамическом присваивании идентификаторов, это тоже создает проблему. И снова классы работают GREAT.
Так как все больше и больше этих динамических выходов и языков используют идентификаторы (для того, что они на самом деле предназначены... для идентификации элемента для работы с ним), то работать с идентификаторами в CSS может быть все более и более занудой.
Мне кажется, что каждый хочет использовать их просто потому, что думает, что они должны, потому что они "там", я предлагаю идею, что ID вообще не существует для CSS и их использование в CSS просто есть как дополнительный помощник через селектор и их реальное использование - это скриптинг.
Не было ни одного экземпляра, где бы мне нужен был ID для использования css или даже ни одного экземпляра, где он был бы мудрее.
Но, возможно, я просто привык к этому и вот почему? Мой HTML вывод маленький, мои CSS файлы маленькие и прямые. Вложенные элементы работают во всех браузерах, как я и ожидал, у меня нет проблем и я могу создавать сложные красиво оформленные страницы. Изменения занимают всего несколько минут, так как я могу применить несколько классов к элементу или сделать новый.
ID для скриптинга, CLASS для css... работает на славу.
Очевидно, что нет большой проблемы (даже в команде дизайнеров и программистов) в использовании их обоих для css, так как мы все привыкаем к тому, к чему привыкаем :), но то, как мы работаем, быстро выводит ожидаемые результаты, и никто не может наступить ни на один палец, даже в автономном разделяемом окружении.
. См. Следующее:
Лучшие практики CSS в отношении идентификатора и класса?
Для SEO: Это не будет иметь никакого значения для SEO.
Вам следует выбрать имена, отражающие смысловое содержание этого раздела. например: id = "leftMenu" class = "footerNotes"
Не используйте символы подчеркивания в именах классов и идентификаторов (распространенная ошибка).
Идентификаторы подходят для элементов, к которым требуется доступ из JavaScript. Но идентификаторы на странице должны быть уникальными в соответствии со стандартами w3, то есть:
- у вас не может быть двух в одном документе
- у вас не может быть
иИмена классов подходят для элементов, к которым не требуется доступ из JavaScript (хотя это возможно). Одно имя класса может использоваться для нескольких элементов, и к одному элементу может быть прикреплено несколько имен классов. Таким образом, имена классов позволяют создавать более «общие» определения CSS, например:
< div class = "column right-column">- все три могут быть в одном документеВы можете смешивать идентификаторы и классы вместе.
Подводя итог: используйте идентификаторы для конкретных случаев; имена классов для общих случаев; и каскадные классы для элементов, которые разделяют некоторые общие свойства, но не все.
1ответ дан 28 November 2019 в 01:40поделиться
Другие вопросы по тегам:Похожие вопросы:
- у вас не может быть