Нужно подбирать материалы по своему уровню. Если слишком много непонятного, берите на уровень ниже. Открываете книгу, читаете разворот. Если больше пяти непонятных слов, берите попроще, вплоть до свинки Пеппи для малышей. Читайте без словаря, стараясь понять смысл непонятных слов из контекста. Смотрите без субтитров, чтобы развивать навык слушания, а не чтения. Так советовали преподаватели, когда жена ходила на курсы языка тут в Канаде.
> Первая распространенная ошибка это передача '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.А лично для меня арактика прошедшего года показала, что цвета в переменных лучше указывать явно, без подобной магии. При использовании формулы преобразования для двух заранее известных цветов на других цветах, не всегда дает ожидаемый и приемлемый результат.