> Первая распространенная ошибка это передача 'style' и 'className' как props в ваш компонент.
И ссылка на статью 2015 года. На дворе 2018. Для корректной работы CSSinJS (styled components, JSS etc.) необходимо прокидывать className в свой компонент.
Более правильным вариантом будет при помощи того же classnames склеивать приходящий в виде пропсов className с собственными классами компонента.
> Не Используйте Bind И Arrow Function В Jsx. Никогда. Больше.
Это слишком категоричное заявление. Сколько копий уже сломано на эту тему. Я просто оставлю эту ссылку здесь.
TL;DR в моем вольном переводе
Преждевременная оптимизация — корень всех зол. Если вы не делаете измерения производительности, вы даже не знаете, работает ли ваша оптимизация, и вы точно не знаете, не сделала ли она только хуже.
Как то все очень сомнительно про Сингапур. Индекс качества жизни ниже чем в Москве, серьезно? С вечным летом, чистотой, доступным общественным транспортом, высочайшим уровнем личной безопастности и прочей инфраструктурой?
Аренда здесь, конечно, дорогая, но налоги практически нулевые.
Почитайте про hasLayout — он включается в том числе и при заданном width (как в вашем случае) и тогда zoom уже не нужен. Код выше (display: inline; zoom: 1;) это минимально необходимый код для inline-block на старых IE. Вы же утверждаете что обычный display: inline в IE ведет себя как dispaly: inline-block, а это не так.
А еще у вас в классах смесь теплого и мягкого. Если это класс size, зачем там же переопределяется font-size, font-family, text-align, display. Если это цвет, зачем там переопределяется transition. Вынесите все общие для кнопок свойства в общие, и расширяйте для каждой кнопки.
Хорошо бы вам подучиться нормальному стилю кода или хотя бы использовать IDE с автоформатированием. В свойствах после двоеточего пробел то есть, то нет, вместо табуляции используйте 4 пробела, оступы огромные. несколько extend можно объединять в одной строке @extend .foo, .bar.
Откуда такие размеры и зачем тут rem если везде px width: 186rem; margin: 20rem auto;? По умолчанию 1rem = 16px.
Эти же классы нельзя будет применить на <button>, будут дефолтные бордеры.
Маленький лайфхак transition:all .3s ease; можно заменить на transition: .3s ease;, но если вы меняете только одно свойство, то лучше указать его явно transition: background-color .3s ease; чтобы избежать ненужных анимаций.
Ну и последнее в этом занудном комментарии — сокращать имя класса button до butt странно, коллеги не поймут (butt — анг. задница), общепринято btn.
На здоровье, переадресую свою часть благодарности автору скрипта Ethan Muller.
А лично для меня арактика прошедшего года показала, что цвета в переменных лучше указывать явно, без подобной магии. При использовании формулы преобразования для двух заранее известных цветов на других цветах, не всегда дает ожидаемый и приемлемый результат.
Нет, не так. Стили генерируются динамически, но они не вставляются как inline.
Зашёл сюда чтобы вспомнить Robinson requiem от Silmarils. Настоящий сурвайвл с крафтом.
И ссылка на статью 2015 года. На дворе 2018. Для корректной работы CSSinJS (styled components, JSS etc.) необходимо прокидывать className в свой компонент.
Более правильным вариантом будет при помощи того же classnames склеивать приходящий в виде пропсов className с собственными классами компонента.
> Не Используйте Bind И Arrow Function В Jsx. Никогда. Больше.
Это слишком категоричное заявление. Сколько копий уже сломано на эту тему. Я просто оставлю эту ссылку здесь.
TL;DR в моем вольном переводе
Преждевременная оптимизация — корень всех зол. Если вы не делаете измерения производительности, вы даже не знаете, работает ли ваша оптимизация, и вы точно не знаете, не сделала ли она только хуже.
Аренда здесь, конечно, дорогая, но налоги практически нулевые.
IE6 не поддерживает max-width, в его случае нужны танцы с бубном и expressions.
PS inline-block для IE 6-7 существует:
PS И кстати при чем тут tabSize браузера, стили для кода — это CSS хабра.
@extend .foo, .bar.Откуда такие размеры и зачем тут rem если везде px
width: 186rem; margin: 20rem auto;? По умолчанию 1rem = 16px.Эти же классы нельзя будет применить на
<button>, будут дефолтные бордеры.Маленький лайфхак
transition:all .3s ease;можно заменить наtransition: .3s ease;, но если вы меняете только одно свойство, то лучше указать его явноtransition: background-color .3s ease;чтобы избежать ненужных анимаций.Ну и последнее в этом занудном комментарии — сокращать имя класса
buttonдоbuttстранно, коллеги не поймут (butt — анг. задница), общепринятоbtn.А лично для меня арактика прошедшего года показала, что цвета в переменных лучше указывать явно, без подобной магии. При использовании формулы преобразования для двух заранее известных цветов на других цветах, не всегда дает ожидаемый и приемлемый результат.