div # name vs #name

Question

Я знаю, что в таблице стилей div # name и #name делают то же самое. Лично я принял использование имени div # для большинства стилей, которые я делаю, учитывая, что он немного быстрее, и означает, что я могу легче идентифицировать элементы HTML, посмотрев на CSS.

Однако все крупных веб-сайтов я, кажется, смотрит на использовании #NAME над сНом именем # (переполнение стека в комплекте)

На самом деле я нахожу его очень трудно найти много сайтов, на всем, что использование сНу # name over #name

Есть ли какое-то преимущество в том, чтобы делать # имя, которое мне не хватает? Есть ли какие-либо причины использовать его над именем div #, о котором я еще не знаю?

Answer 1

Поскольку идентификаторы должны быть уникальными на странице, большинство идентификаторов, с которыми вы столкнулись, будут появляться только один раз в вашей таблице стилей, поэтому имеет смысл не беспокоиться о том, какой элемент он будет отображаться. Исключая это, также сохраняется несколько символов в вашей таблице стилей, которая для больших сайтов, которые посещают миллионы и миллионы раз в день, экономит довольно небольшую полосу пропускания.

Существует преимущество включения имени элемента в случае, когда разделение с идентификатором «имя» может отображаться иначе, чем пролет с идентификатором «имя» (где он будет показывать разделение на одном типе страницы и промежутке на другой тип страницы). Это довольно редко, но я никогда не сталкивался с сайтом, который это сделал. Обычно они просто используют разные идентификаторы для них.

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

Answer 2

Поскольку div не является частью div#name (потому что ID уникален для каждой страницы), это позволяет уменьшить файлы CSS для его удаления. Меньшие CSS-файлы означают более быстрые HTTP-запросы и время загрузки страницы.

И как отметил NickC, отсутствие div позволяет изменять HTML-тег элемента без нарушения правила стиля.

Answer 3

Использование #NAME только:

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

Со всеми новыми элементами HTML5, имена элементов стали намного более взаимозаменяемыми для целей семантики только (например, изменение <div> быть более семантический <header> или <section>).

Использование DIV # Название:

Вы сказали, что «с доводами, что это немного быстрее». Без каких-либо серьезных фактов от разработчиков движка рендеринга, я бы не стал даже делать это предположение.

Прежде всего, двигатель, скорее всего, сохранит хеш-таблицу элементов по ID. Это будет означать, что создание более конкретного идентификатора вряд ли приведет к увеличению скорости.

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

Answer 4

вопрос обслуживания и удобочитаемости кода.

При объявлении element#foo стиль кода становится жестким - если требуется изменить структуру документа или заменить типы элементов, нужно также изменить таблицы стилей.

, если объявить #foo, мы лучше согласуемся с принципами «разделения проблем» и «KISS».

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

Answer 5

Поскольку идентификатор, такой как #name, должен быть уникальным для страницы, нет причин для размещения элемента с ним. Однако div#name будет иметь более высокий приоритет, который может (или не быть) желательным. См. this fiddle, где следующее #name не отменяет css div#name.

Answer 6

Я использую имя div #, потому что код более читабельен в файле CSS.

Я также структурировать CSS, как это:

ul 
{ 
    margin: 0; 
    padding: 0; 
} 
ul.Home 
{ 
    padding: 10px 0; 
} 
ul#Nav 
{ 
    padding: 0 10px; 
} 

Так я начинаю родовое, а затем становится более конкретным позже.

Это просто имеет смысл для меня.

Answer 7

Я бы предположил, что в том числе имя элемента в вашем селекторе будет фактически медленнее – браузеры обычно хеш-элементы с атрибутами идентификатор для быстрого просмотра элемента. Добавление в имя элемента добавит дополнительный шаг, который может потенциально замедлить его.

Одна из причин, по которой вы можете использовать имя элемента с идентификатором, - это если вам нужно создать более сильный селектор. Например, вы имеете базовую таблицу стилей с:

#titlebar { 
    background-color: #fafafa; 
} 

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

div#titlebar { 
    background-color: #ffff00; 
} 

Этот селектор является более специфичным (имеет более высокий specificity), поэтому он будет перезаписать базовый стиль.

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

a#productId { 
    color: #0000ff; 
} 
span#productId { 
    color: #cccccc; 
} 

Answer 8

Связывание имя ДИВ: http://jsfiddle.net/wWUU7/1/

CSS:

<style> 
div[name=DIVNAME]{ 
color:green; 
cursor:default; 
font-weight:bold; 
} 

div[name=DIVNAME]:hover{ 
color:blue; 
cursor:default; 
font-weight:bold; 
} 
</style> 

HTML:

<div name="DIVNAME">Hover This!</div> 

Список Css селекторов: http://www.w3schools.com/cssref/css_selectors.asp