.post .the {...} должен иметь больший приоритет, тут нет понятия скорости обработки, тут есть очерёдность и приоритеты

Не экономь на спичках. Для чего?

У меня, например, стили бывало вырастали до 20 000 строк (что-то около 5-6 тыс селекторов). Ничего, нигде не тормозило.

иными словами

<style>
.main .the {color: red}
.post .the {color: green}
</style>
<div class="main">
	<div class="post">...<span class="the">some text</span>...</div>
	<div class="post">...</div>
	<div class="post">...</div>
	...
</div>
[/coode]

цвет текста будет зелёным

> .post .the {...} должен иметь больший приоритет

Спасибо, Кэп.

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

> Не экономь на спичках. Для чего?

Если делать, так делать идеально (или хотя бы пытаться).

Если делать, так делать идеально (или хотя бы пытаться).

Это не есть идеально. Сколько не работал в команде с разными верстальщиками с версткой, никто не заморачивается на таких ложных оптимизациях. И нигде ничего не тормозит.

CSS и верстка — это все-таки не совсем программирование. Правила немного иные.

Premature optimization is the root of all evil (c) не помню кто

Это касается программирования и очевидно.

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

Ок, вот тогда другая

То, что нельзя измерить, нельзя и улучшить.

Другими словами, с чего ты взял, что один вариант будет всегда быстрее другого? Не задумывался о том, что в разных бравзерах всё может отличаться? Как ты это бенчмаркаешь? Если никак, то просто подбрось монетку и избавься от ступора :)

У веб-дизайнера тоже нет объективного объяснения почему отступ между картинкой и текстом должен равняться 30 пикселям, а не 25, в определенной ситуации. Равно как и ручной кернинг (letter-spacing) понятие очень субъективное и интуитивное для каждого человека/дизайнера.

Ты тоже будешь сидеть и размышлять над тем, лучше ли применить margin:20px 0 0 0; или margin:30px 0 0 0;? Ты ведь просто интуитивно задашь «значение красивее».

Так и в целом: кто-то любит #loginWindowWrap .closeButton .closeButtonCross, а кому-то нравится .b-login-window .b-close-but .ico-but-cross. А на разницу в 2—3 миллисекунды как-то можно не обращать внимание. Читабельность, удобство и consistency — во главе угла.

> У веб-дизайнера...

Не быть веб-дизайнером... Имеет место быть практически полное отсутствие ГМ и over9000 подобных психологических особенностей.

Ты ведь просто интуитивно задашь «значение красивее».

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

на разницу в 2—3 миллисекунды как-то можно не обращать внимание.

Вот 30 раз по 2 миллисекунды - уже полсекунды, а это уже важно.

Читабельность, удобство и consistency — во главе угла.

Это были бы тоже аргументы. А у меня здесь нет ни одно аргумента: какой из вариантов сабжа читабельные/удобнее?

> Другими словами, с чего ты взял, что один вариант будет всегда быстрее другого? Не задумывался о том, что в разных бравзерах всё может отличаться? Как ты это бенчмаркаешь? Если никак, то просто подбрось монетку и избавься от ступора :)

Религия не позволяет. Это же уже не аргумент...
Мне бы хоть какой-нибудь аргумент, не обязательно по производительности...

> 30 раз по 2 миллисекунды - уже полсекунды

попробуй ещё раз

и я даже не уверен, что переписать свойство объекта займет целых две миллисекунды

одна строка ~20 байт. Путем нехитрых вычислений получаем около 400Кб один CSS. Не жирно?

На самом деле™ ты должен написать так, как по логике. К чему у тебя the относится? А если будет другое the внутри другого класса внутри main? В зависимости от того, что тебе нужно, то ты и должен написать.

man gzip

кэп?

> На самом деле™ ты должен написать так, как по логике. К чему у тебя the относится? А если будет другое the внутри другого класса внутри main?

Ну в том то и дело, что нет.

Но спасибо хоть за какой-то аргумент.

Ну, посмотри на это с такой стороны. Они все должны быть в post? Если да, то .post .the, если нет, то .main .the. Если же .the вообще может быть везде, то просто .the. Как-то так.

Если там поиск втупую, то наверняка он выполняется для каждой ноды в DOM. Тогда, чем больше дырок в цепочке поиска, тем сильнее тормозит. В *main*the* и в *post*the* по три дырки (три звездочки). Вот если бы ты использовал child selector, это нейтрализовало бы одну дырку посередине, и это была бы нефиговая оптимизация =)

Огромное спасибо!

> нефиговая оптимизация

простейший тест тупо 10000 нод: хром 0.8 секунд на итерацию, в _любом_ варианте

Child selector не работает в MSIE6. Бесполезное свойство для профессиональных верстальщиков.

> 0.8 секунд

Да, это принципиально. И даже очень.

> Child selector не работает в MSIE6. Бесполезное свойство для профессиональных верстальщиков.

Какой нах IE6 во втором десятке двадцать первого века?
А если заказчик таки такой мyд...к, то для IE<=7 пишется отдельный CSS и впихавается ПХПшом в нужном случае.

> Child selector не работает в MSIE6

Кстати, а ты уверен? Речь не о псевдоклассе.

Какой нах IE6 во втором десятке двадцать первого века?

А если заказчик таки такой мyд...к, то для IE<=7 пишется отдельный CSS и впихавается ПХПшом в нужном случае.

Я лучше перестрахуюсь лишний раз и посижу 2—3 дня над тем, чтобы верстка работала в MSIE6 тоже. Зато буду уверен, что потенциальный покупатель/регистрант не уйдет просто так с сайта с пустыми руками.

Тем более баги MSIE6 изучены и известны очень хорошо. Можно верстать не глядя в MSIE6 и уже знать, что не понравится ему, когда будешь смотреть в нем. css3pie есть, ddbelatedpng есть, рецептов в сети вагон.

Кстати, а ты уверен? Речь не о псевдоклассе.

Уверен на все 100.

Пруф: http://kimblim.dk/css-tests/selectors
Вторая таблица, вторая строка таблицы.

на десять тысяч узлов
т.е. применение стиля к каждой отдельной фразы «some text» в среднем занимает 0,00008 сек. (на моем металлоломе)
и это, кстати говоря, со затратами на визуализацию, т.е. сколько всего машинного времени затратил браузер на перекрашивание длиннющей портянки

> на десять тысяч узлов

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

Я тебя не понимаю. И предыдущий пост толком тоже не понял... Говори по-русски.

Только вчера вот до того, как я оптимизировал (на том, что знал) кое-какой css, в моей опере, даже при загрузке с кеша, было заметно как обрабатывается css и строится по нему структура. После оптимизации - наоборот, заметна дозагрузка некоторого содержимого, при уже готовом css-оформлении и готовой css-структуре.

Долбоклюи-оптимизаторы... Как страшно жыть.