Как правильно. Селекторы

[Dessss]

Собственно например код

<div id="pageHeader">

<p class='main'>111</p>

</div>

Вопрос как правильно по семантике и т.д запрос в ксс

#pageHeader .main{}

.main{}

p.main{}

Какой из 3 все 3 работают.

[Justnewone]

1. В CSS никакой семантики нет и быть не может, это оформление

2. Всегда делайте короче и проще, без избыточности.

[Dessss]

1. В CSS никакой семантики нет и быть не может, это оформление

2. Всегда делайте короче и проще, без избыточности.

По вашим словам вариант 2 но скажем если я открою чьи то стили и там написано название класса фиг его знает что это а вот когда написано p.class сразу понятно класс для параграффа

Edited November 11, 2009 by Dessss

[Justnewone]

По вашим словам вариант 3 но скажем если я открою чьи то стили и там написано название класса фиг его знает что это а вот когда написано p.class сразу понятно класс для параграффа

Вы ориентируетесь на глупую вещь, поверьте мне. Есть firebug на такие случаи. А вот пренебрежение пунктом 2 добавит гемороя.

[Игорь Ермаков]

Для каждого из вариантов своя ситуация.

Для первого.

Используется если нужно установить свойства только тем элементам (с этим классом) которые находятся в блоке #pageHeader

<div id="[b]pageHeade[/b]r">
<div class="[b]main[/b]"></div>
</div>

Для второго. Используется для того, чтобы установить свойства для всех элементов страницы с классом .main

Для третьего. Используется для того, чтобы установить свойства всех элементов <p> с классом .main.

Edited November 11, 2009 by Игорь Ермаков

[psywalker]

Ты должен найти свой стиль и всегда следовать одной логической структуре

[mishka]

незнаю что там у вас за ситуация, но <p> это абзац, и его желательно использовать как раз для абзаца. А класс на абзаце - вызывает подозрение в правильности верстки.

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

Edited November 11, 2009 by mishka2

[rash]

В приведенном случае и из приведенных вариантов однозначно второй.

[Dessss]

незнаю что там у вас за ситуация, но <p> это абзац, и его желательно использовать как раз для абзаца. А класс на абзаце - вызывает подозрение в правильности верстки.

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

А при ситуации нескольких параграфов в блоке родителе при этом требуется разные стили для каждого—-ваш вариант не прокатит. P.S P блочный элемент.

В приведенном случае и из приведенных вариантов однозначно второй.

Я тоже за этот вариант но когда нет возможности юзать фаербаг да и вообще стили должны быть читабельными а не абракадабра. Но когда открываешь ксс и видешь p.main сразу понятно параграф а когда #pageHeader p.main то понятно что родитель хеадер и парграф. Насколько информативно нежели просто .main

Вы ориентируетесь на глупую вещь, поверьте мне. Есть firebug на такие случаи. А вот пренебрежение пунктом 2 добавит гемороя.

Я не считаю глупую вещь нормальную верстку. Да есть фаер баг есть еще веб девелопер тулс и кучу доп софта. Любые названия селекторов и обращение к ним должны быть читабельными иметь логическую связь и технически правильно сформированы. Вот о чем я спрашиваю тут.

[Justnewone]

Я не считаю глупую вещь нормальную верстку. Да есть фаер баг есть еще веб девелопер тулс и кучу доп софта. Любые названия селекторов и обращение к ним должны быть читабельными иметь логическую связь и технически правильно сформированы. Вот о чем я спрашиваю тут.

При чем тут аще фаербаг? Он и без всяких хитрых названий классов покажет что за стили применены, и нафига тогда знать .class или P.class? Зачем вы сейчас пишите мне про нормальную верстку, если "По вашим словам вариант 2 но скажем если я открою чьи то стили и там написано название класса фиг его знает что это а вот когда написано p.class сразу понятно класс для параграффа"? Названия селекторов всегда должны быть читабельными, я что-то отрицал? Но, например, мега читабельный селектор UL LI это идиотизм. Вы сейчас не сможете мне сказать критерии логичности связей, и технической правильности, а зачем-то бросаетесь такими понятиями.

Не торопитесь пока стараться отвечать конструктивно, по моему мнению у Вас пока опыта не особо. Основные направления - это простота и лаконичность. И тут нету альтернатив.

[mishka]

если такой класс всретится не только в хедере но и в контенте и при этом эти блоки будут похожи по логике но разны по оформлению то

#header .main

#content .main

если есть эти блоки и в контенте и в хедере и они одинаковы то

.main

если только в хедере то

.main

потому что, а вдруг в дальнейшем захотите и в контент перенести

Edited November 11, 2009 by mishka2

[Scrum]

Мое зрение на все варианты.

Каждый случай под определенные нужды.

Пример:

<div id="pageHeader">
<p class='main'>111</p>
</div> 
<div id="pageContent">
<p class='main'>111</p>
<span class='main'>test</span>
</div>

в первом случае стили будут применимы только для #pageHeader

во втором для всех классов main

в третьем только для параграфов с классом main.

По этому выбирайте тот который более подходит вам в вашем случае.

[mishka]

селектор UL LI это идиотизм

почему это идиотизм?

ведь может быть и ol li

а вот ul li a э то без спорно глупо, ведь правильнее ul a

Edited November 11, 2009 by mishka2

[Justnewone]

почему это идиотизм?

ведь может быть и ol li

а вот ul li a э то без спорно глупо, ведь так правильнее ul a

LI

OL LI

[mishka]

Как говорил учитель информатики:

Из всех правильных решений самое правильное будет то где меньше всего кода

Edited November 11, 2009 by mishka2

[rash]

Я не считаю глупую вещь нормальную верстку.

Так никто же не предлагает делать ненормальную верстку -)

А скажите, если вы будете знать, к какому элементу относится класс, вам это сильно поможет? Если да, то в каких случаях?

[mishka]

LI

OL LI

Хм, ты прав

[Dessss]

При чем тут аще фаербаг? Он и без всяких хитрых названий классов покажет что за стили применены, и нафига тогда знать .class или P.class? Зачем вы сейчас пишите мне про нормальную верстку, если "По вашим словам вариант 2 но скажем если я открою чьи то стили и там написано название класса фиг его знает что это а вот когда написано p.class сразу понятно класс для параграффа"? Названия селекторов всегда должны быть читабельными, я что-то отрицал? Но, например, мега читабельный селектор UL LI это идиотизм. Вы сейчас не сможете мне сказать критерии логичности связей, и технической правильности, а зачем-то бросаетесь такими понятиями.

Не торопитесь пока стараться отвечать конструктивно, по моему мнению у Вас пока опыта не особо. Основные направления - это простота и лаконичность. И тут нету альтернатив.

Фаер не причем. Но это ж не значит что мне можно называть классы аптвлоптриылкортылоеы. Приченять .class для p мое мнение - глупо т.к не несет информативности. Прочитав 3 строчку я не совсем понял предыдущую (. UL LI suxx? Why? Логично предположить про опыт если я задаю вопрос на форуме. Знал бы не спрашивал.

если такой класс всретится не только в хедере но и в контенте и при этом эти блоки будут похожи по логике но разны по оформлению то

#header .main

#content .main

если есть эти блоки и в контенте и в хедере и они одинаковы то

.main

если только в хедере то

.main

потому что, а вдруг в дальнейшем захотите и в контент перенести

Достойный ответ. А как насчет не .main а применительно к параграфу p.main

Мое зрение на все варианты.

Каждый случай под определенные нужды.

Пример:

<div id="pageHeader">
<p class='main'>111</p>
</div> 
<div id="pageContent">
<p class='main'>111</p>
<span class='main'>test</span>
</div>

в первом случае стили будут применимы только для #pageHeader

во втором для всех классов main

в третьем только для параграфов с классом main.

По этому выбирайте тот который более подходит вам в вашем случае.

Логично! +1

почему это идиотизм?

ведь может быть и ol li

а вот ul li a э то без спорно глупо, ведь правильнее ul a

А зачем вообще ol li когда из ненумерованно я могу через list-style-type зделать нумерованный.

[Justnewone]

Приченять .class для p мое мнение - глупо т.к не несет информативности.

А как насчет не .main а применительно к параграфу p.main

Бред какой-то.

А зачем вообще ol li когда из ненумерованно я могу через list-style-type зделать нумерованный.

Ваще пять баллов =)

[Dessss]

Так никто же не предлагает делать ненормальную верстку -)

А скажите, если вы будете знать, к какому элементу относится класс, вам это сильно поможет? Если да, то в каких случаях?

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

Хм, ты прав

А куда внешний элемент списка испарился?

Бред какой-то.

Ваще пять баллов =)

Оч информативно.

[rash]

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

Ну теги забывать — это уже перебор, но что плохого в том, чтобы переложить рутинную работу на софт, если это экономит время и не вредит качеству?

[Dessss]

Ну теги забывать — это уже перебор, но что плохого в том, чтобы переложить рутинную работу на софт, если это экономит время и не вредит качеству?

Так зачем человек тогда давайте пускай софт все будет делать и мы станем как в фильме Идеократия кто смотрел.

[rash]

Так зачем человек тогда давайте пускай софт все будет делать и мы станем как в фильме Идеократия кто смотрел.

Вы или не поняли, что я сказал, или делаете вид, что не поняли, или не знаете значения слова «рутина».

[Dessss]

OK уточню

<div id="conteiner">

<div class="content">

<p></p>

</div>

</div>

Для всех параграфов в контенте задать стиль.

Варианты:

1. #container .content p{}

2.#container p.content {}

3. .content p{}

4. p.content{}

Вы или не поняли, что я сказал, или делаете вид, что не поняли, или не знаете значения слова «рутина».

Согласен не понял. Но рутина бывает приятной )

Edited November 11, 2009 by Dessss

[Justnewone]

OK уточню

<div id="conteiner">

<div class="content">

<p></p>

</div>

</div>

Для всех параграфов задать стиль.

Варианты:

1. #container .content p{}

2.#container p.content {}

3. .content p{}

4. p.content{}

Рутина бывает приятной )

P{...}

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

И поизучайте азы CSS, 2 из четырех селекторов не применятся.

Edited November 11, 2009 by Justnewone

[Dessss]

P{...}

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

И поизучайте азы CSS, 2 из четырех селекторов не применятся.

Немного опечатался. Для всех параграфов в родителе контайнер. Какие 2 не принимаются?