Должны ли мы использовать компактный css, например 'border', или расширять его как 'border-color', 'border-width'?

Question

я могу написать стиль границы, как это:

border: 2px solid #DDDDDD; 

или как это:

-moz-border-bottom-colors: none; 
-moz-border-left-colors: none; 
-moz-border-right-colors: none; 
-moz-border-top-colors: none; 
border-bottom-color: #dddddd; 
border-bottom-left-radius: 6px; 
border-bottom-right-radius: 6px; 
border-bottom-style: solid; 
border-bottom-width: 2px; 
border-image-outset: 0 0 0 0; 
border-image-repeat: stretch stretch; 
border-image-slice: 100% 100% 100% 100%; 
border-image-source: none; 
border-image-width: 1 1 1 1; 
border-left-color-ltr-source: physical; 
border-left-color-rtl-source: physical; 
border-left-color-value: #dddddd; 
border-left-style-ltr-source: physical; 
border-left-style-rtl-source: physical; 
border-left-style-value: solid; 
border-left-width-ltr-source: physical; 
border-left-width-rtl-source: physical; 
border-left-width-value: 2px; 
border-right-color-ltr-source: physical; 
border-right-color-rtl-source: physical; 
border-right-color-value: #dddddd; 
border-right-style-ltr-source: physical; 
border-right-style-rtl-source: physical; 
border-right-style-value: solid; 
border-right-width-ltr-source: physical; 
border-right-width-rtl-source: physical; 
border-right-width-value: 2px; 
border-top-color: #dddddd; 
border-top-left-radius: 6px; 
border-top-right-radius: 6px; 
border-top-style: solid; 
border-top-width: 2px; 

Что является лучшим предпочтительным методом? Причина, по которой я спрашиваю об этом, заключается в том, что когда я использую Firebug, он всегда расширяет эти правила, как показано ниже.

Также, если вы знаете, пожалуйста, скажите мне, как отключить это в firebug.

Answer 1

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

Подавляющее большинство значений в вашем примере являются специфичными для реализации и, следовательно, являются чужими для других браузеров. Сокращенное свойство border соответствует только нескольким конкретным длинным диапазонам в стандарте CSS, например border-width, border-style и border-color, а также любой из сторон (и ширина/стиль/цвет для каждая). Некоторые стандартные longhands, которые принадлежат их собственным сокращениям (или вообще не относятся), включают border-top-left-radius, что на самом деле не показано в вашем вводе CSS. Остальные (*-ltr/rtl-source) are for internal use only.