Распространенные ошибки CSS / положить им конец

Очевидно, что пока нет хорошей базы для лучших практик CSS. Новички в css продолжают совершать те же ошибки, что и 10 лет назад, и когда люди переходят на html5 и css3, эта группа быстро растет. Это печальное положение вещей, с которым нужно иметь дело, так что, хотя я и не являюсь большим поклонником небрежно составленных списков, вот мой топ-лист безобразия, который я никогда больше не хочу видеть.

1. остановить ненужное плавание

.selector {float:left; width:100%;}

Код выше — это то, что вы найдете довольно часто. Простой элемент уровня блока, который имеет ширину 100%, чтобы он охватывал всю ширину своего родителя. В большинстве случаев удаление float и width приведет к точно такой же визуализации, только с более гибким использованием полей и отступов. Так что же дает?

Обычно происходит то, что люди не понимают, как происходит снижение прибыли. Плавающий элемент запускает более понятный вариант использования, когда поля не сворачиваются с полями окружающих элементов. Это нормально, пока вам не нужно добавить отступы, поля или дополнительные правила позиционирования. Кроме того, этот код не очень защищен от браузера, и вы часто будете сталкиваться с неприятными проблемами ie6.

Существуют более эффективные способы работы с (или вокруг) сокращающимися полями, и, кроме того, поплавки никогда не являются хорошим способом исправить ситуацию . Использование поплавков для фальсификации элемента уровня блока совершенно бесполезно и в дальнейшем приведет к проблемам. Так больше не надо.

2. поля и прокладки

.parent {margin:1em 0.5em 0em 0.5em; padding:0em 0.5em 1em 0.5em;}

Поля и отступы никогда не должны использоваться вместе для создания единого пробела. Оба свойства могут быть размещены на листьях (элемент html без дочерних элементов) при определенных обстоятельствах, но кроме этого варианта использования лучше придерживаться любого из двух, чтобы определить все интервалы вокруг элемента.

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

Меня не волнует, предпочитаете ли вы отступы или поля , но объединение их для создания единого пространства никогда не является хорошей идеей. Так больше не надо.

3. злоупотребление шириной

 .parent {width:50em;}  .parent .child {width:49em;}  

Используйте ширину только тогда, когда это действительно необходимо. Люди склонны делать все математику на своем CSS, в то время как CSS (в некоторой степени) готов выполнить большую часть работы за вас. В приведенном выше примере объявление ширины в .child совершенно не нужно. Было бы гораздо лучше просто добавить правое поле для элемента .child (если только вы не хотите, чтобы дочерний элемент имел ширину 49 мкм, независимо от ширины его родительского элемента). Вместо этого использование отступов или полей обеспечит достойный рендеринг, даже если родительский объект изменит ширину.

У меня было несколько проектов, целью которых было расширить сайт. Это правда, если вы можете сделать это, адаптировав только пару значений в CSS, не беспокоясь о несоответствиях браузера. Подобный проект превращается в ад на земле, когда каждый компонент имеет определенную ширину, особенно когда эти компоненты все равно занимают доступную ширину. Это действительно делает разницу между часовой работой или двумя днями тяжелого труда.

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

4. починка и починка

.selector {margin-left:-6px;}

Со всем сообществом веб-дизайнеров не так уж и много, но когда дело доходит до ie6, большинство (если не все) люди соглашаются с тем, что это устаревший, трудно кодируемый программный мусор. И хотя я не буду оспаривать это утверждение, следует сказать, что большинство проблем ie6 могут быть решены достаточно последовательно. Независимо от того, используете ли вы встроенные хаки или условные комментарии, неважно, как вы на самом деле решаете эти проблемы, более важно.

Многие из ошибок ie6 существуют из (небольших) неправильных размещений элементов. Большинство людей пытаются исправить эти проблемы, перестраивая их специально для ie6. Например, если слева добавлено дополнительное пространство размером 6px, вы можете противопоставить его, определив отрицательное поле того же размера. Это дерьмовое кодирование, поскольку вы только исправляете проблему, а не исправляете ее. ie6 может быть настоящей стервой, но большинство ее ошибок можно противопоставить, чтобы заставить ее вести себя как другие браузеры.

Это очень важно, так как эти исправления будут продолжать работать после адаптации оригинального CSS. Вместо того, чтобы определять отрицательное поле, убедитесь, что ie6 отображает элемент должным образом, чтобы в будущих адаптациях не потребовалось дополнительного исправления. Заставить ie6 вести себя нелегко, но далеко не невозможно. Так больше не надо.

5. сброс без перезагрузки

* {margin:0; padding:0;}

Я ничего не имею против сброса css, будь то из стандартного скрипта или из пользовательского кода. До тех пор, пока вы не восстановите общие стили, я в порядке. Я действительно злюсь, когда сталкиваюсь с CSS, где для простых текстовых абзацев даже не определено поле (или отступ). Это просто не сделано и крайне небрежное кодирование.

Так что используйте эти стили CSS для сброса так, как вам нравится, просто убедитесь, что снова установили основные стили. Убедитесь, что ваши абзацы выглядят как абзацы, а списки содержат некоторые обозначения элементов списка. Эти быстрые сбросы устраняют стили, которые важны для отображения общих данных, а не возвращение их к хорошим стандартам — это чистый дилетант.