Алекс Глебов

Благодаря усовершенствованию интерфейсных инструментов разработки и поддержке браузеров, теперь мы можем отказаться от jQuery как зависимости, но иначе вы никогда не заметите. Этот переход был огромным делом для @ Johann-S , нашего основного разработчика JavaScript в наши дни. Это знаменует собой одно из крупнейших изменений в структуре за последние годы и означает, что проекты, построенные на Bootstrap 5, будут значительно легче по размеру файла и загрузке страницы.

$result = Customer::getDb()->cache(function ($db) {
    return Customer::find()->where(['id' => 1])->one();
});

.page
    .page__header
      .header
    .page__wrapper
      .page__block1
        .block1  // это блок страницы, замените на свое название
      .page__block2 
        .block2 
  .page__footer
      .footer

Нужно ли везде указывать, что это за страница?

Ведь services этот блок, который может повторятся и на других страницах сайта, и при этом, будет выглядеть по другому.

Конечно, если полностью следовать БЭМ, должна появиться и такая же структура файлов. Но если мне необходимо все стили запихать в один css?

Или нужно избегать повторения в именование классов?

/*Viewport Height Correction
    https://github.com/Faisal-Manzer/postcss-viewport-height-correction
     .foo {
            height: 100vh;
            height: calc(var(--vh, 1vh) * 100); //
      }
    */
    var customViewportCorrectionVariable = 'vh';
    function setViewportProperty(doc) {
        var prevClientHeight;
        var customVar = '--' + ( customViewportCorrectionVariable || 'vh' );
        function handleResize() {
            var clientHeight = doc.clientHeight;
            if (clientHeight === prevClientHeight) return;
            requestAnimationFrame(function updateViewportHeight(){
                doc.style.setProperty(customVar, (clientHeight * 0.01) + 'px');
                prevClientHeight = clientHeight;
            });
        }
        handleResize();
        return handleResize;
    }
    window.addEventListener('resize', setViewportProperty(document.documentElement));
    /*/Viewport Height Correction*/

<div class="row"> 
   <div class="col"></div>
   <div class="col"></div>
   <div class="col"></div>
 </div>

.row {
    margin-right: -15px;
    margin-left: -15px;
}
.row:before,
.row:after {
    display: table;
    content: " ";
}
.row:after {
    clear: both;
}
.col {  
    float: left;
    width: 33.33333333%;
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;    
}

<form @submit.prevent='onSubmit'>
   <input type="text" name="user">
   <input type="password" name="password">
   <button type='submit'>Отправить</button>
</form>

async onSubmit($event) {
   const fd = new FormData($event.target); 
   const response = await this.$axios.post('api/form', fd);
}