Sun_Day

Препроцессор типа sass, бэм(если нужен), семантическая верстка, адаптивы всякие.

руководства по верстке

Нет никакого единого руководства по верстке, где бы было собрано все, что вы хотите. Ролики на ютубе/статьи в интернете. Мб какая-нибудь штмл академи, хз. Все зависит от вашего уровня знаний, верстать умею и каша в коде - как-то мало совместимо.

Если просто нужен принцип организации css, то пользуйтесь каким-нибудь sass'ом. Если порядок в html, то изучайте семантическую верстку.

const input = document.querySelector(".placeholder");

input.addEventListener("keydown", (e) => {
    const condition = e.target.value.length < 5 ? "new" : "password";
    input.placeholder = condition;
})

<input class="placeholder" placeholder="password">

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

const input = document.querySelector(".placeholder");
const output = document.querySelector(".for-error");

input.addEventListener("input", (e) => {
     const condition = e.target.value.length < 5 ? "the password is too short" : "";
     output.textContent = condition;
})

<input class="placeholder" placeholder="password">
<span class="for-error"></span>

Ну и поподробнее изучить тему валидации форм.
click

У чего конкретно? У select или у option?

У select

select {
  color: green;
}
//
.personal_form-select_choise {
  color: green;
}

У option

select option[value="1"] {
  color: green
}
//
.personal_form-select_choise option[value="1"] {
  color: green
}

<option value="1">новый предмет</option>