Igor Schnaider

Без JS.

Я бы посоветовал вынести ваши стили для этих форм в отдельный класс, чтобы не ломать другие .form-group, которые могут быть еще где-то.

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

Поля схлопнулись в первом случае. Во втором float: left не позволяет.

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

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

@DimaP, у вас же там вообще везде фиксированная ширина, зачем для #content ширина 60%

Полям заданы процентные значения, вот и бегают.

А что вы хотите?

Там всей колонке div.col-xs-6, в которой выпадайка лежит, нужно назначить z-index.

Можете начать отсюда.

Мне кажется, что без макета и стилей тут бессмысленно что-то смотреть. Ведь БЭМ это не только про наименование классов, с черточкой или еще чем, это в целом подход к верстке. Из вашего пример не ясно как реализованы все компоненты, блоки, элементы. Независимы ли блоки. Или, стоит ли делать блок .about с элементами .about__left и .about__right, а не вынести это, скажем, в блок .layout. В общем, мало информации.

Я объяснить пытался принцип того, как работает порядок выполнения кода в JS. Может коряво, конечно, вышло :-) Вот пример собрал, может поможет. Видно, что хоть клик браузер и перехватывает, пока в коде задержка, callback, переданный в addEventListenerб все равно срабатывает только после выполнения остального кода. Вот поэтому и условие в его коде тоже никогда не выполнится.

Ты же здесь mousedown вешаешь уже после того, как click сработал. Блин, сорри, я ошибся. Ты же на элемент его назначил, я почему-то про кнопку думал... Почему нет?

В его примере достаточно в самой callback функции вызывать, что там нужно. btn.onclick = div То есть в вот эту функцию div и поместить alert. @by chris, в твоем примере, кстати, mDown тоже никогда не выполнится.

Ну он же учится, так что нормально все :-) @DivMan, если трудности с пониманием того, в каком порядке должны работать асинхронные callback функции, просто помни, что в JS все работает последовательно. Пока не выполниться текущий код, следующий не начнется. Асинхронные callback функции всегда сработают только после того, как подпрограмма, в которой мы назначаем их, выполнит свой код. В твоем примере, соответственно - пока основная программа не выполнит свой код (куда входит в том числе и проверка на существование класса). Даже если предположить, что ты со скоростью света кликнешь на кнопке, после того как уже назначен обработчик события, но не остальной код (тут проверка IF), callback все равно будет ждать в очереди. Когда стек вызовов освободиться, туда попадет эта callback функция и будет выполнена (а только здесь мы добавим класс элементу).

Блок не будет создан, пока условие не будет выполнено. А в этот момент блок .div2 еще не существует. Вот и не работает.

Да, равносильно this.

https://jsfiddle.net/ucrmenzt/

float элементы вынимаются из потока. Чтобы этого не происходило, нужно "очищать". float для wrapper - один из способов (только тогда он сам выпадет из потока). Во втором примере @Sensei - clearfix. Можно overflow отличный от visible поставить.

<ul> <li> ... </ul>

Ну представьте, что вам понадобилось вставить сложный (комплексный, составной) элемент.

Ну очевидно же, что первая функция не универсальна.

http://codepen.io/anon/pen/vKdRrA http://codepen.io/anon/pen/XKkqWr