Статьи

Использование и злоупотребление CSS

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

CSS

То, что придумывают разработчики CSS-спецификаций, не имеет ничего общего с тем, как разработчики интерпретируют / реализуют вещи.
Тьерри Кобленц

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

Z-индекс

… или как продолжать добавлять цифры, пока эта чертова вещь не появится ! 🙂

Некоторое время назад я видел эту удивительную декларацию CSS в дикой природе:, z-index: 2147483646которая, вероятно, является результатом стремления к порядку размещения .

Во всяком случае, тем временем выяснилось, что 2147483647 является максимальным значением для int32 . Таким образом, эти люди просто хотели убедиться, что абсолютно ничто не преодолеет их дело. Ничего такого!

За пределами макс. Int32

!важный

Это может показаться не таким важным сейчас, но было время, не так давно, когда большое количество CSS-строк в дикой природе были важны .

Теперь, если вы все еще делаете это иногда, вы слишком ленивы или … просто должны переопределить некоторые стили CMS, что вполне понятно.

Все в или ничего

Оживить все

Наряду со способностью анимировать все виды вещей с помощью transitionодной из самых безумных идей, которые я видел, было анимировать все. Я имею в виду все.

* {
    transition: all .2s ease;
}

Хотя играть с ним может быть интересно, из-за проблем с производительностью, это никогда не было решением для производственных целей. Слава Богу!

Оживить все

OOCSS, BEM, SMACSS, ETC.

В начале таблицы использовались для построения макетов. Это было проблемой, и в конце концов нам это не понравилось, таблицы созданы для отображения только табличных данных. Далее мы полагались на div и float, и в конце мы создаем пользовательские элементы HTML5, такие как headerи, footerчтобы заменить некоторую несемантическую разметку.

Теперь, благодаря использованию новейших методологий, таких как OOCSS, BEM или SMACSS, кажется, что у нас появилась новая проблема: торговля маленьким CSS для большого HTML .

Так что же дальше?!

Что дальше?

Над квалифицированными селекторами

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

Над квалифицированными селекторами

изменится

Говоря о производительности, чтобы избежать вычислений браузера каждый раз, когда элемент анимируется, вы можете сказать браузеру что-то вроде: «Эй, это изменит его свойство позже». Таким образом, вы избегаете вычислений браузера в последнюю минуту и ​​набираете скорость. Сара Soueidan написал отличную статью по этому вопросу так, пойти на это !

Это немного странно, потому что, как только вы установите элемент, will-changeвы не сможете снова удалить его позже через CSS. Итак, очевидно, что текущая рекомендация — использовать JavaScript для добавления и удаления значений will-change. Это новое свойство создаст контекст стека для элемента, поэтому очень важно удалить его из элемента после выполнения действия — обычно преобразования или анимации.

Это будет весело!

изменение воли и сложение контекстов

*

Известно, что универсальный селектор *работает медленно, поскольку мы все использовали его для сброса полей и отступов для всего — хардкорным способом. Позже мы согласились использовать его, что не является хорошей практикой, и теперь CSS-линтеры продолжают говорить нам то же самое.

Тем не менее, мы влюбились в новую коробочную модель, с которой все стало проще. И угадайте, что это за селектор? Сюрприз!

*, *:before, *:after {
  box-sizing: border-box;
 }

Универсальный селектор

Вывод

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

Но, по крайней мере, мы можем немного подшутить над этим. 🙂