Оптимизация верстки и что актуально на средину 2015 года?

Question

[trafic]

1. Влияет ли на производительность * box-sizing: border-box (то есть для всех тегов приминяем)? Слышал это дурной тон и лучше указывать конкретно у каждого элемента.

2. Сейчас многие переходят с пикселей на относительные REM единицы, объясняя это тем, что это лучше для масштабирования. Но во первых, ведь для мобильных устройств есть "", и если масштабировать в браузере (сафари, хром, мозила по крайне мере), то они достаточно умны чтобы просто увеличивать общий масштаб страницы даже если все в пикселях. Единственное где есть разница это если юзер увеличивает именно шрифт в браузере. Как вы относитесь к REM есть ли еще у него какие-то преимущества?

3. DOM очень громоздкий, каждый тег (объект) имеет так много всяких методов и полей если смотреть в dev tools. правильно ли утверждение что каждый лишний тег это дополнительная нагрузка на браузер? то есть стоит ли заморачиватся чтобы писать при возможности меньше тегов?

4. Стоил ли использовать сокращенный записи в CSS или больше принято полные, чтобы было понятно. например

font: normal 12px/19px Arial;
padding: 10px 0 0 10px;

или все таки лучше писать полные font-size, font-family и т.д. ?

5 Как группировать стили в селекторе, по алфавитному порядку или не запариваться над этим? или как то по группам разбивать...

Answer 1

[Viktor Vsk]

5) csscomb.com

Comments

[Денис Богданов]

Абсолютно согласен, ещё настроить под себя и в одно нажатие весь код причесывается)

Answer 2

[Дима Паутов]

1) Почему если сразу "дурной тон", то нельзя так делать? Мода на одежду тоже много чего говорит, но не все же ей следуют! Исходите из ситуации. Если у вас много элементов, к которым нужно использовать данное свойство, то * {box-sizing: border-box} будет норма. А иначе да, проще добавить тем 2-3м элементам к которым нужно применить! Такой подход очень удобен для адаптивных шаблонов. Что бы каждый раз не пересчитывать ширину блока у которого есть border и padding

2) Я никаких не увидел! Всю жизнь пользовался px и буду, пока не будет необходимости переходить на другие единицы. Ведь макет в фотошопе имеет размер в пикселях! Мне они для восприятия проще. Если вдруг все из фотошопа перейдут в другой редактор, в котором будут rem единицы измерения, то буду переходить на них!

3) Если тегов много, то и нагрузка больше. Ведь чем их больше, тем больше браузеру нужно отрисовать, построить древо узлов и т.д.

4) Если вы в селекторе используете все свойства как font-weight, font-size, font-family, line-height, то да, лучше написать 1м свойством. А когда меняете только размер шрифта, то зачем писать font: normal 12px/19px Arial;

5) Разницы никакой нет, только если для восприятия кода!

Answer 3

[Zurab Shyvarbidze]

Я пользуюсь неплохим стандартом мб будет полезно :)

Comments

[Александр Тихомиров]

Ссыль мертвая.

[Zurab Shyvarbidze]

Александр Тихомиров: исправил, прошу прощения

Answer 4

[Константин]

1. caniuse.com/#search=box-sizing, а потом, как самому удобнее, и если действительно надо. В принципе 15 лет назад вопроса не возникало - верстали таблицами :)
   
2. опять смотрим canisue сначала, а потом думаем. Вообще-то хороший верстальщик задает размер базового шрифта в pt (не px!), а все остальные размеры ставит в em и %. И только в крайнем случае (картинки, svg, подгонка общей ширины, canvas для графиков с точной математикой) –px.
   rem, конечно, более удобная и понятная единица, но будем подождать, также как и vh, vw, vmax, vmin - очень заманчивые штуки, особенно для мобилок и планшетов, но... caniuse.com
   
3. Обязательно!!! Городушки в стиле Бутстрап оправданы лишь отчасти, нужно стремиться к семантическому коду, страница должна нормально читаться с отключенными стилями, легко конвертиться в другие форматы, легко разбираться сторонними скриптами на стороне браузера (плагинами) и т.п. Это также важно и для СЕО - и Гугл, и Яндекс больше любят чистый код! А про хай-лоад вообще молчу. Ну, а если речь зайдет об одностраничниках и т.п. - тут вообще ясность превыше всего.
   
   
4. какая, хрен, разница, если в серьезном проекте код CSS минифицируется? В большом проекте действительно имеет смысл смотреть какие свойства в каком виде быстрее обрабатываются браузером и если в stylesheet пара миллионов правил, то обязательно нужно минификатору указывать - какие свойства объединять в одно правило, а какие оставлять как есть. А для себя: LESS, SCSS, css-comb. В принципе основное правило уже лет 15 как никто не отменял: если ставишь сразу несколько параметров (например, при инициализации базовых шрифтов), то - сокращенный, если меняешь один-два параметра - то отдельно. Что тут обсуждать?
   
   
5. разница есть, и существенная: в большинстве браузеров стили применяются именно в том порядке, в каком указаны, и если стили имеют свойства со взаимоисключающими значениями - то применено бедет то правило, что указано в стиле стоящем последним!!!
   
   

Вообще-то Ваш вопрос из разряда - "чем арбуз лучше дыни" или "что вкуснее - колбаса или конфеты" :)