Adexs

Попробуй $(this).attr('class', 'region active');

1. Какая сейчас зп у верстальщиков в регионах (живу в Калининграде)? На сайтах вакансий я вижу предложения в 30, 25 и даже 20 тыс. (Хотя попадаются и на 80-100 000, но там требуют очень серьезные скиллы.) Насколько это соответствует реальным зп?

Это средние цифры по больнице, даже для мск. Суть не в том, чтобы верстаком получать горы (это нереально), а в том, чтобы договориться с работодателем, что верстак - это начало и хотелось бы развиваться в сторону фронтенда. Договориться, чтобы на первых порах время от времени тебе давали какие-то простенькие JS задачки с условием "смог - круто, не смог - ну ладно, в следующий раз получится".

2. Правильно я понимаю, что рабочий день верстальщика - это 8 часов верстки с перерывом на обед? Насколько высокая загруженность? На моей предыдущей работе, например, непосредственно работать приходилось процентов 40 времени.

В целом - да. Но опять же в среднем по больнице. Это зависит от стажа и опыта. На первых порах, возможно, даже придется перерабатывать. Все зависит от кол-ва заказов, их сложности, твоего личного темпа работы, фазы луны и кучи других факторов. Но даже Москва не сразу строилась. С опытом можно научиться работать столько, сколько нужно и даже тратить часть рабочего времени на обучение.

3. Насколько реально, работая в офисе, и, будучи заваленым задачами по верстке, попутно развиваться в веб-разработке и изучать ЯП, например PHP и JS?

Возвращаясь к п1, если договориться с начальником про рост во фронтенде, то в общем-то вполне реально совмещать работу и изучение JS - оно само напрашивается. Все остальное - скорее всего в нерабочее время.

4. Есть ли карьерный рост непосредственно в профессии? Какой потолок зарплат в верстке без программирования? (подключение плагинчиков и простенькие вещи на jquery не в счет)

Карьерный рост - это фронтенд. Сначала джуниор, потом мидл, потом сеньор, а потом, если хотите, тимлид. У каждого из них зп выше, чем у предыдущего.

5. Стоит ли вообще начинать путь в веб-разработке с верстальщика, с учетом моих знаний, или есть смысл изучить какой нибудь язык и устраиваться уже джуниором программистом?

Определенно стоит. Но не ради того, чтобы оставаться верстальщиком, а ради того, чтобы развиваться во фронтендера. См. п1.

1 - Суммы очень разнятся, от 20-ти до 60-ти, + редко около 80 000 (Краснодар) . Не знаю, как человек должен верстать за 80, но, наверное, очень круто)

2 - Формально - да. Но так бывает разве что в веб-студиях. И даже там спокойно можно находить время на изучение JS/PHP, чтение Хабра, ... . В больших не-IT компаниях времени будете тратить на дело столько же, сколько раньше. Загруженность может быть высокая на первых порах, но когда "набьёте руку", определитьесь с инструментами и подходом - это всё уже не будет занимать столько времени.

3 - Реально. Настолько, что все так делают)

4 - Карьерный рост верстальщика ведёт во Frontend , то есть в мир JS , всяких там Angular/React/Vue и прочего.

5 - Да стоит как-угодно начинать, я думаю. Можете сделать второе резюме уже сейчас - "Junior Frontend" и параллельно с поиском работы учить JS . Хотя бы на уровне jQuery и базовых принципов.

Верстальщик - это, как правило, начало карьерного пути, на нём не стоит оставаться очень долго. Возможности роста у вас 100% будут, даже при плотном графике.

button, 
button:active, 
button:focus {
    outline: none;
}

можно писать стили для условного класса .button так, чтобы они работали и для A, и для BUTTON, и даже для INPUT (с type = button) одинаково. Хотя, конечно, сейчас такое оформление бывает, что инпуту все детали не прикрутишь, ну да и ладно - ссылки или button должно хватить для всего. А далее в верстке/на проекте применяешь с этим классом нужный тэг по вкусу/желанию/назначению.

а насчет с помощью какие правил делать - так зависит от задачи. "просто кнопке" хватит паддингов, если кнопку надо ровнять по высоте с инпутами или еще чем - надо фиксировать высоту. всегда - от задачи.

Demo

Главное при стилизации ссылки под кнопку, необходимо указать

display: block; // так как по умолчанию ссылка является inline элементом...
// иначе, применение некоторых стилей не будет применено.

mixin test(param)
  div(class="b-content-img-#{param}")
    block

+test("test")
  h1 Test

Всё зависит от того, будут ли во флекс-ячейках элементы (используемые только в этом контексте) или блоки (могут быть переиспользованы где-то ещё).

В первом случае всё просто, приблизительно так:

<div class="container">
	<div class="container__header"> ... </div>
	<div class="container__body"> ... </div>
	<div class="container__footer"> ... </div>
</div

.container {
	display: flex;
	...
}
.container__header {
	flex: 1 1 auto;
}
.container__body {
	flex: 1 1 auto;
}
.container__footer {
	flex: 1 1 auto;
}

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

<div class="container">
	<div class="container__header">
		<div class="some-header-block"> ... </div>
	</div>
	<div class="container__body">
		<div class="some-body-block"> ... </div>
	</div>
	<div class="container__footer">
		<div class="some-footer-block"> ... </div>
	</div>
</div

В общем, в процессе верстки нужно задавать себе вопрос - этот блок может быть использован где-то ещё? Пусть не прямо сейчас, но хотя бы теоретически в будущем? Если да - делать обертки.

Лучше писать на уникальные классы все флекс-свойства.

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

Например .header__wrapper вместо .flex-wrap.flex-wrap--aic.flex-wrap--jcsb

Возможно

Во первых проследить чтобы он переносился на новую строку (не задавать жестко height, а лучше line-height + padding), ну и использовать динамические единицы
vw – 1% ширины окна
vh – 1% высоты окна
Но без медиа запросов никуда, не нужно их бояться.