Вы все слышали про страшный !important, который лучше не использовать. Но почему? Вы знаете ответ?

Этот ответ может быть довольно развёрнутым, поэтому давайте зайдём с другой стороны.

Когда всё-таки МОЖНО использовать !important? А я чуть позже дам свой ответ на этот вопрос.

#задача

У нас есть кнопка, на которой написано "Invite new user", а при уменьшении экрана она превращается в кнопку "+". Но пользователю надо дать понять, что именно эта кнопка предназначена для приглашения нового юзера.

Как бы вы это сверстали? Конечно же, нужен самый элегантный способ 😄

Ссылки на свои codepen присылайте в личку @fominua
Позже опубликую одно из решений с разбором

И тут же по теме: знаете про CSS Custom Properties? Поделитесь своими кейсами их использования в ваших задачах. Даже если считаете, что используете их очень банально, всё равно пишите 😁

Я не просто так вас спрашивал про кастомные свойства в CSS, хотел про это написать пост. Но лучше приходите 18 декабря на митап OdessaFrontend я вам лично расскажу 😁

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

Кто-то очень упоролся, но это выглядит забавно 😁
http://bit.ly/2E26uc1

Если вы работали с DOM, то я думаю вы понимаете насколько это жёстко 🤦🏻‍♂️

Вдруг вы где-то видели подобные фановые штуки, присылайте) С удовольствием посмотрю, а потом поделюсь со всеми)

#задача_2

:root {
--primary-color: 20px;
}

header {
background-color: red;
}

header {
background-color: var(--primary-color);
}

Какого цвета будет фон у блока и почему?
Свои ответы присылайте сюда: @fominua

Последний митап Odessa Frontend и люди, которых я там встретил, с которыми успел пообщаться, натолкнули меня на пару интересных мыслей. Поделюсь ими в вами.

Вы заметили как много существует крутых докладов и статей в сети?
Уверен, у вас обязательно было так, что вы смотрели какой-то крутой доклад, открывали для себя что-то новое, вас это очень захватывало. Вы тут сразу же представляли, какой крутой этот спикер, как много он знает и какой идеальный у него проект, а вам приходится писать ваш говнокод на JQuery или ковырять старое приложение на Backbone и стыдиться своей "ущербности".

Подумайте над тем, почему же ни один такой крутой спикер не взял и:
- не пересмотрел все доклады про то, как делать круто и не делать плохо,
- не прочитал все статьи, как надо и как не надо,
- не прочитал трижды всю документацию
- не написал свой самый крутой код сразу без ошибок, с тестами, на тайпскрипте с элементами машинного обучения и 3D-визуализации?

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

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

Не пытайтесь быть идеальными, будьте собой.

Всему своё время, но никто ж не сказал, что мои ответы и разборы должны выходить ровно в том порядке, в котором я их анонсировал.

Опубликовали видео с моего доклада на OdessaFrontend про переменные в CSS. Там есть разбор второй задачи и объяснение. Ну и сам доклад, надеюсь, вам понравится. Кому лень смотреть весь доклад, вот ссылка на саму задачу: 14:28

#задача_2

Полное видео тут: http://bit.ly/2QAstwR

#задача_3

<div class="wrap">
<h1 class="noscript">Title</h1>
<p class="text">Lorem, ipsum.</p>
<p class="text">Placeat, modi.</p>
<p class="text">Mollitia, tempora?</p>
</div>

.text:first-child {
color: red;
}

Объясните максимально доступно: почему текст ни в одном из блоков не станет красным?

Ответы, как обычно, сюда: @fominua

Медиавыражения в CSS — это не только max-width

bit.ly/2Rb4gNT

Больше месяца назад я публиковал опрос, про то, когда же можно использовать !important. Варианты ответов были запутанными и перекликались друг с другом, но это было сделано не только для того, чтобы вас запутать. Ответы были подобраны так, как они обычно звучат в самом сообществе, так как нет однозначного мнения. Многие примерно понимают, в каких ситуациях !important оправдан, другие просто сильно себя убедили, что это плохо и не используют, третьи об этом всём не думают и пишут его там где хочется. Я попробовал разобраться, когда же всё таки можно 😄

Вы прислали много ответов на #задача_3, но доступно объяснить, почему же текст ни в одном из блоков не станет красным, получилось не у многих.

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

<div class="wrap">
<h1 class="noscript first">Title</h1>
<p class="text">Lorem, ipsum.</p>
<p class="text">Placeat, modi.</p>
<p class="text">Mollitia, tempora?</p>
</div>

.text.first {
color: red;
}

- Почему ни один элемент не стал красным?
- Потому что у нас нет ни одного элемента, у которого есть класс .text и класс .first.

То же самое и с псевдоклассом :first-child.

Псевдокласс first-child получит первый элемент в родителе, а классы .text есть только у второго, третьего и четвертого. Выходит, что у нас просто нет такого элемента, у которого был бы класс .text и псевдокласс :first-child 🤷🏻‍♂️

Я как-то записывал видео с обзором на Chrome Dev Tools. Тогда у меня ещё не было канала, поэтому я про него ничего и нигде не писал.

В видео прохожусь по всем вкладкам инструментов разработчика, показываю возможности, о которых вы, возможно, не знаете.

Приятного просмотра! И не забудьте поставить лайк 😁

http://bit.ly/2ts5AnH

Очень простая #задача_4 😁

<div class="wrap">
<div class="card">First Card</div>
<div class="card">Second Card</div>
<div class="card">Third Card</div>
<div class="card">Fourth Card</div>
</div>

<style>
.card {
width: 25%;
display: inline-block;
background-color: red;
}
</style>

Все элементы шириной 25% и их всего 4, но они почему-то не становятся в одну строку.

Объясните максимально доступно: почему элементы не становятся в одну строку и как это можно исправить?

Опубликую самый доступный и развёрнутый ответ 😉
Ответы, как обычно, сюда: @fominua

#немногооффтоп

Я иногда преподаю на курсе Front End, и вот такую первую домашку мне прислал один из моих студентов. Особенность этой домашки была не в технической реализации, так как это только начало курса, а в самой истории, описанной Владимиром. Почитайте, уверяю, вам очень понравится!

https://telegra.ph/Pro-menya-02-14-2

Очень рад, что #задача_4 получила такой активный отклик! К моему удивлению, очень многие хорошо сформулировали проблему и объяснили, почему же блоки не становятся в одну строку, но не так хорошо ориентировались в решениях. Я думал ситуация ровно обратная 😄

Попробуем подвести итог:

1. Почему?

Когда мы превращаем элемент в inline-block - он получает преимущества строчных и блочных элементов. От строчных элементов инлайн-блок получит основную особенность - набирать свою ширину за счёт объёма контента внутри и возможность становиться частью строки. Именно это даёт нам возможность выстроить несколько блоков в ряд.

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

Откуда берётся этот пробел? Он возникает из-за того, что мы форматируем код, и каждый наш перенос кода на новую строку, создаёт какое-то количество пробелов, а браузер потом это всё равно отображает как один пробел. Я думаю вы знаете про такое поведение.

Мы убедимся, что это пробелы, если попробуем записать наши инлайн-блоки в строку:

<div class="wrap">
<div>...</div><div>...</div><div>...</div><div>...</div>
</div>

Теперь никакой проблемы - блоки стали в одну строку, как и планировалось. Однако так записывать код мы не можем, потому, что при большом объёме кода такое форматирование сделает код абсолютно не читаемым.

2. Как исправить?

В интернете описано много способов решения этой проблемы (например тут и тут). Однако хороших способов не так уж и много.

Я не буду разбирать способы, которые считаю плохими, расскажу только о тех, которые считаю адекватными.

2.1. Если размер шрифта равен нулю, то и размер пробела будет равен нулю.

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

<div class="wrap">
<div class="card">...</div>
<div class="card">...</div>
<div class="card">...</div>
<div class="card">...</div>
</div>

<style>
.wrap {
font-size: 0;
}

.card {
width: 25%;
display: inline-block;
background-color: red;
font-size: 16px;
}
</style>

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

2.2. Если проблема заключается в наличии пробела, то просто уберите его 😅

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

<!-- Мой комментарий -->
<div>...</div>

Мы можем воспользоваться этой возможностью не совсем по назначению, и это решит нашу проблему.

<div class="wrap">
<div>...</div><!--
--><div>...</div><!--
--><div>...</div><!--
--><div>...</div>
</div>

Что я только что сделал? 😣 Я создал комментарий, который начинается сразу после закрывающего тега </div> и заканчивается перед следующим открывающим тегом <div>. Таким образом, все пробелы остаются, но они находятся внутри комментария и браузер не рендерит нам часть, которая заключена в коммент, а мы при этом сохранили форматирование кода.

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

Селекторы в CSS

Мы можем писать селекторы в CSS по тегам, классам, атрибутам и id. Какие из этих вариантов вы считаете допустимыми, а какие нет?

И если какие-то считаете недопустимыми, то напишите почему)
Очень интересно) @fominua