CSS « Как правильно присваивать одинаковые свойства разным элементам
Вопрос давно интересовал, и всегда хотел спросить мнение других людей.
Есть такой код:
/** * GeSHi (C) 2004 - 2007 Nigel McNie, 2007 - 2008 Benny Baumann * (http://qbnz.com/highlighter/ and http://geshi.org/) */ .css.geshi_code {font-family:monospace;} .css.geshi_code .imp {font-weight: bold; color: red;} .css.geshi_code .kw1 {color: #000000; font-weight: bold;} .css.geshi_code .kw2 {color: #993333;} .css.geshi_code .co1 {color: #a1a100;} .css.geshi_code .co2 {color: #ff0000; font-style: italic;} .css.geshi_code .coMULTI {color: #808080; font-style: italic;} .css.geshi_code .es0 {color: #000099; font-weight: bold;} .css.geshi_code .br0 {color: #00AA00;} .css.geshi_code .sy0 {color: #00AA00;} .css.geshi_code .st0 {color: #ff0000;} .css.geshi_code .nu0 {color: #cc66cc;} .css.geshi_code .re0 {color: #cc00cc;} .css.geshi_code .re1 {color: #6666ff;} .css.geshi_code .re2 {color: #3333ff;} .css.geshi_code .re3 {color: #933;} .css.geshi_code span.xtra { display:block; }
#footer {height:176px;}
.footer-bg {height:176px;background:url(../img/footer-bg.jpg) repeat-x 0 100%;}
Если я сделаю:
/** * GeSHi (C) 2004 - 2007 Nigel McNie, 2007 - 2008 Benny Baumann * (http://qbnz.com/highlighter/ and http://geshi.org/) */ .css.geshi_code {font-family:monospace;} .css.geshi_code .imp {font-weight: bold; color: red;} .css.geshi_code .kw1 {color: #000000; font-weight: bold;} .css.geshi_code .kw2 {color: #993333;} .css.geshi_code .co1 {color: #a1a100;} .css.geshi_code .co2 {color: #ff0000; font-style: italic;} .css.geshi_code .coMULTI {color: #808080; font-style: italic;} .css.geshi_code .es0 {color: #000099; font-weight: bold;} .css.geshi_code .br0 {color: #00AA00;} .css.geshi_code .sy0 {color: #00AA00;} .css.geshi_code .st0 {color: #ff0000;} .css.geshi_code .nu0 {color: #cc66cc;} .css.geshi_code .re0 {color: #cc00cc;} .css.geshi_code .re1 {color: #6666ff;} .css.geshi_code .re2 {color: #3333ff;} .css.geshi_code .re3 {color: #933;} .css.geshi_code span.xtra { display:block; }
#footer, .footer-bg {height:176px;}
.footer-bg {background:url(../img/footer-bg.jpg) repeat-x 0 100%;}
Станет ли мой код приятнее и быстрее?
Есть такой код:
/** * GeSHi (C) 2004 - 2007 Nigel McNie, 2007 - 2008 Benny Baumann * (http://qbnz.com/highlighter/ and http://geshi.org/) */ .css.geshi_code {font-family:monospace;} .css.geshi_code .imp {font-weight: bold; color: red;} .css.geshi_code .kw1 {color: #000000; font-weight: bold;} .css.geshi_code .kw2 {color: #993333;} .css.geshi_code .co1 {color: #a1a100;} .css.geshi_code .co2 {color: #ff0000; font-style: italic;} .css.geshi_code .coMULTI {color: #808080; font-style: italic;} .css.geshi_code .es0 {color: #000099; font-weight: bold;} .css.geshi_code .br0 {color: #00AA00;} .css.geshi_code .sy0 {color: #00AA00;} .css.geshi_code .st0 {color: #ff0000;} .css.geshi_code .nu0 {color: #cc66cc;} .css.geshi_code .re0 {color: #cc00cc;} .css.geshi_code .re1 {color: #6666ff;} .css.geshi_code .re2 {color: #3333ff;} .css.geshi_code .re3 {color: #933;} .css.geshi_code span.xtra { display:block; }
#footer {height:176px;}
.footer-bg {height:176px;background:url(../img/footer-bg.jpg) repeat-x 0 100%;}
Если я сделаю:
/** * GeSHi (C) 2004 - 2007 Nigel McNie, 2007 - 2008 Benny Baumann * (http://qbnz.com/highlighter/ and http://geshi.org/) */ .css.geshi_code {font-family:monospace;} .css.geshi_code .imp {font-weight: bold; color: red;} .css.geshi_code .kw1 {color: #000000; font-weight: bold;} .css.geshi_code .kw2 {color: #993333;} .css.geshi_code .co1 {color: #a1a100;} .css.geshi_code .co2 {color: #ff0000; font-style: italic;} .css.geshi_code .coMULTI {color: #808080; font-style: italic;} .css.geshi_code .es0 {color: #000099; font-weight: bold;} .css.geshi_code .br0 {color: #00AA00;} .css.geshi_code .sy0 {color: #00AA00;} .css.geshi_code .st0 {color: #ff0000;} .css.geshi_code .nu0 {color: #cc66cc;} .css.geshi_code .re0 {color: #cc00cc;} .css.geshi_code .re1 {color: #6666ff;} .css.geshi_code .re2 {color: #3333ff;} .css.geshi_code .re3 {color: #933;} .css.geshi_code span.xtra { display:block; }
#footer, .footer-bg {height:176px;}
.footer-bg {background:url(../img/footer-bg.jpg) repeat-x 0 100%;}
Станет ли мой код приятнее и быстрее?
1 ответов
Быстрее это работать не будет.
А если бы у вас было изначально так:
#footer {height:176px;}
#footer .footer-bg {height:176px;}
, то это бы работало медленнее, чем:
#footer {height:176px;}
.footer-bg {height:176px;}
(Но там мизерные доли секунды, заметить это не возможно.)
Еще к слову — надеюсь, вы не думаете, что удалив все пробелы и переносы строк между CSS-правилами и удалив кавычки в пути к файлам, будет всё работать быстрее. Так лучше делать на продакшене (посмотрите CSS-файлы Бутстрапа), чтобы уменьшить объем CSS-файла, но не на девелопменте.
Приятней - это личностное определение. Мне приятно, а тебе ? А мне нет. Дело вкуса
А вот меньше, css код, будет занимать точно.
Ну и если честно, то я на таких "спичках" не экономлю. Есть масса программ-оптимизаторов css кода. В больших и сложных проектах это можно и нужно использовать.
Код будет чуть меньше, да) Работать быстрее будет вряд ли)
А вообще так объединять имеет смысл, когда элементы логически связаны, тогда почему бы и не вынести общий знаменатель, хотя дело вкуса конечно.
У мало связанных между собой элементов выносить свойства в общий блок может только запутать дальнейшее чтение