Распечатать статью

Недостатки CSS

У каждого языка программирования есть свои достоинства и недостатки. CSS (знаю, это не язык программирования) в этом плане ничем не отличается.

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

«Стандартная» боксовая модель

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

Свойство box-sizing выручило в данной ситуации, и теперь, имея хорошую поддержку среди браузеров, а в особенности IE8, мы, наконец, можем потихоньку оставлять W3C-шную боксовую модель в прошлом.

Краткая запись свойств шрифта

Я уже говорил об этом ранее: какой толк от этого свойства? Тем шести параметрам, которые можно указать в свойствах font, вообще не место в краткой записи.

Для большей части сокращенных, сама краткость не является проблемой. Можно объявлять что угодно, и если какие-то параметры отсутствуют, будет считаться, что они имеют дефолтные значения. Поэтому кого волнует обнулены они или нет? Например, все неуказанные параметры list-style и background в 99% случаев не будут наследоваться, так что не важно обнулены они или нет.

Однако, ожидается, что многие свойства типографики будут наследоваться от родительского элемента. Поэтому при использовании краткой записи свойств шрифта можно напортачить. Если вам неизвестны тонкости этого свойства, вы легко сможете оказаться в состоянии глубокой задумчивости. Иными словами, если я объявляю текст полужирным в <body>, я ожидаю, что он будет полужирным, даже в случае объявления с помощью краткой записи параметров font.

Флоаты

Да, мы все время ими пользуемся и уже давно привыкли размечать страницы знакомым способом. Но по правде говоря, разметка, основанная на флоатах, имеет многие характерные для табличной верстки проблемы, хотя не в таком объеме и с большими преимуществами.

Основная цель атрибута float заключается в том, чтобы позволить строчному контенту обтекать плавающий блочный элемент. Создавать столбцы с помощью флоатов это в той или иной степени хак. Таким образобы мы используем float не по назначению, точно так же как использовали не по назначению <table>, создавая на его основе целую страницу..

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

Тем не менее, флоаты  раздражают. Из-за них исчезает контент. Они требуют хаков типа «clearfix»-а. Они являлись причиной большинства проблем с полями в IE (это, конечно, большей частью лежит на совести производителя, но мы же тут жалуемся по полной, так ведь?). И еще они не позволяют сделать то, чего нам на самом деле хочется с их помощью добиться.

Хотя CSS Regions и flexbox уже стабильно используются, нам потребуется еще немало времени, чтобы полностью избавиться от верстки, основанной на флоатах, и сопутствующих ей выкрутасов.

Браузерные префиксы

А требует ли этот пункт вообще каких-либо объяснений?

Идентификаторы как хуки для привязки стиля

Да, идентификаторы все еще можно использовать. Только не используйте их как хуки для задания стиля. Многие со мной до сих пор не согласны по этому поводу. Однако нет никакого аргумента «за». Класс может делать все то же, что и идентификатор, и, вдобавок, имеет массу преимуществ.

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

Выравнивание по вертикали

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

Где данное свойство работает хорошо, так это в ячейках таблицы, поскольку делат то, что и старый атрибут valign, поэтому его легко понять исходя из контекста.

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

Схлопывание вертикальных полей

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

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

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

Width: 100%

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

Когда новички осваивают CSS, и им нужно, чтобы бокс занимал место по горизонтали, они в первую очередь пытаются применить «width: 100%». На первый взгляд кажется, что элемент долен занять все оставшееся место по горизонтали и таким образом отпадает необходимость рассчитывать ширину. Но 100% работают не так.

Процентные величины в CSS всегда расссчитываются относительно других параметров CSS (например, родительского элемента). «Width: 100%» вообще-то делает ровно то, что в нем написано. Оно не заполняет 100% оставшегося места; оно заполняет 100% всего места, без учета внешних и внутренних отступов.

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

Изображения в качестве границ

Сдается мне, что из всех новшеств CSS3 это будет самое неиспользуемое. Я написал статью для SitePoint, где пытался продвинуть эту функцию как полезную, поскольку большинство из виденных мною примеров использования border-image были ужасны.

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

И сегодня, даже после написания целого урока и прочтения всей спецификации по этой теме, мне все еще приходится обращаться к справочнику и рвать на себе волосы, чтобы написать код блока с изображениями в качестве границ.

CSS-счетчики

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

У них такой запутанный и  неинтуитивный код, что остается только чесать затылок: «А не для этого ли придумали элемент <ol>

CSS-комментарии

Напомните-ка мне почему я не могу закомментировать одну строку с помощью двух прямых слэшей? Конечно, это как-то связано с тем, как парсятся прямые слэши. Но было бы намного проще, если бы можно было закомментировать и раскомментировать обратно одну строку так же, как в JavaScript — используя двойной слэш в начале строки.

Двойное двоеточие для псевдоэлементов

Чтобы отличать псевдоэлеметы от псевдоклассов, в CSS3 все псевдоэлементы указываются через двойное двоеточие. То есть вместо :before надо писать ::before.

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

Это означает, что двойное двоеточие не будут использоваться до тех пор, пока все браузеры, которые его не поддерживают (включая IE8, основного лидера среди браузеров) не уйдут в прошлое — что вряд ли случится в ближайшие 2-3 года, а может и дольше.

Я ничего не упустил?

Фуф! Ну, у меня камень с души упал. Как вы сможете заметить, данный список не имеет отношения к браузерным нестыковкам (ну, кроме вендорных префиксов), а сосредоточен на полноправных функциях языка.

Не стесняйтесь расскзазать о своих любимых мозолях в CSS и о тех моментах, которые вам кажутся не очень интуитивными или простым для понимания. И, пожалуйста: всем известно, что все ненавидят Internet Explorer и его баги, поэтому давайте сосредоточимся на реальных функциях языка, а не на их реализациях производителями.

Источник:  css-live.ru
Вы можете оставить комментарий, или обратную ссылку на Ваш сайт.

Оставить комментарий

Похожие статьи