Архитектура CSS: новые лучшие практики

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

Сброс с помощью Normalize.css

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

Вместо того, чтобы использовать чрезвычайно популярный CSS Reset от Эрика Мейера ( потому что это слишком далеко ) или сделать самодельный сброс , многие люди рекомендуют использовать normalize.css . Normalize.css «нормализует» код до общей базовой линии, а не сбрасывает базовую стилизацию для элементов во всех браузерах. Ссылаясь на проект normalize.css на Github , это его преимущества перед сбросом CSS:

• Сохраняет полезные значения по умолчанию, в отличие от многих перезагрузок CSS
• Нормализует стили для широкого диапазона элементов HTML
• Исправляет ошибки и распространенные несоответствия браузера
• Улучшает юзабилити с тонкими улучшениями
• Объясняет, что делает код, используя подробные комментарии

Использование normalize.css вместо стандартного сброса поможет вам правильно выбрать код и сэкономит много времени, не восстанавливая базовые стили.

Получить четкое исправление при расчистке поплавков

Если вы все еще используете метод, показанный здесь, чтобы очистить поплавки в ваших документах, тогда нам действительно нужно поговорить:

<div class="clear"></div> ... .clear { clear: both; } 

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

Micro Clearfix , используемый в HTML5 Boilerplate , использует самые современные, проверенные и передовые передовые методы кодирования. Micro Clearfix поддерживает Firefox 3.5 и более поздние версии, Safari 4 и более поздние, Chrome, Opera 9 и позже, и Internet Explorer 6 и позже. Вот пример:

 /* For modern browsers */ .cf:before, .cf:after { content:""; display:table; } .cf:after { clear:both; } /* For IE 6/7 (triggers hasLayout) */ .cf { *zoom:1; } тем /* For modern browsers */ .cf:before, .cf:after { content:""; display:table; } .cf:after { clear:both; } /* For IE 6/7 (triggers hasLayout) */ .cf { *zoom:1; } то и /* For modern browsers */ .cf:before, .cf:after { content:""; display:table; } .cf:after { clear:both; } /* For IE 6/7 (triggers hasLayout) */ .cf { *zoom:1; } 

Класс clearfix .cf должен быть добавлен ко всем элементам, которые содержат числа с плавающей точкой. В этом случае старый разделительный элемент старой школы с примененным clear (<div class = ”clear”> </ div>) может быть навсегда удален из вашего репертуара.

Как насчет переполнения: скрытый?

Еще один популярный метод очистки чисел с плавающей запятой заключается в использовании переполнения: скрытого, хотя Micro Clearfix настоятельно рекомендуется, поскольку иногда возникают проблемы с методом переполнения: скрытый в Internet Explorer 7 и более ранних версиях.

Хотя использование переполнения: скрытого было почти всем любимым методом очистки поплавков, оно вызывало такие проблемы:

• Скрытие содержимого и дочерних элементов без полос прокрутки, когда окно браузера меньше контейнера .
• Вмешательство в поля, границы, контуры и абсолютно позиционированные PNG.
• Применение свойств CSS3, таких как box-shadow, text-shadow и transforms .

Луи Лазарис, соавтор HTML5 и CSS3 для реального мира , предполагает, что использование переполнения: скрытое вызывает проблемы в сложных макетах, и рекомендует избегать его в пользу Micro Clearfix.

Если вы связаны и решительно настроены избежать переполнения: скрыто, используйте следующую его версию, которая учитывает hasLayout в Internet Explorer и элементы уровня блока:

 .container { overflow: hidden; /* Clearfix! */ zoom: 1; /* Triggers "hasLayout" in IE */ display: block; /* Element must be a block to wrap around contents. Unnecessary if only /* using on elements that are block-level by default. */ } 

циркуль

Говоря о неправильном использовании пустых div-ов … вам нужно прекратить раскачивать пустой очищенный <div> с границей, назначенной ему также как разделитель страниц:

 <div class="divider"></div> ... div.divider { border-top: 1px solid #ABAA9A; clear: both; } 

Да, я знаю, что этот код отлично работает как очиститель визуального разделителя страниц, но он не является семантическим. Николь Салливан , ниндзя CSS и создатель объектно-ориентированного CSS (OOCSS), предлагает использовать элемент <hr> для разделения разделов страницы и добавления к нему необходимого стиля.

 <hr class="divider"> ... .divider { border-top: 1px solid #ABAA9A; clear: both; } 

 .hide-text { text-indent: 100%; white-space: nowrap; overflow: hidden; } 

 <li class="favorite"> <span class="icon favorite"></span><span id="favorite-insert-point" class="favorite"></span> </li> 

 <p><i class="icon icon-comment"></i>23 comments</p> ... .icon { background-image: url( sprites.png ); } .icon-comments { background-position: 0 -30px; } 

 img { max-width: 100%; height: auto; } 

 <!DOCTYPE html>