прочитай вопрос

Я нашел проблему 4 раза рендера, но с этим связанно вся логика моей страницы и в целом я незнаю как можно будет решить проблему, мне придётся вкладывать все на много глубже, что бы отрендерить то что мне нужно, очень сложно рассчитывать приложение в целом

в htmlbook.ru почему так мало материалов в самоучителе css?

там 2010 год еще

где можно css учить?

Перестал сайт обновляться, вроде.

оттуда учить не нужно?

Что-то остается актуальным.

Но лучше найди что-то другое.

а на каком сайте учатся в основном

На разных.

Метанит не советую, ибо в тексте много ошибок.

И некоторые примеры могут не работать.

Здравствуйте пожалуйста помогите как мне сделать столкновение объектов, то есть
если игрок столкнётся с другим квадратом то он проиграет
function startAll() {
 let blacki = '#'+(0x1000000+(Math.random())*0xffffff).toString(16).substr(1,6)
 document.querySelector("h1").style.color = blacki;
 document.querySelector("p").style.color = blacki;
let canv = document.getElementById("canvas")
let ctx = canv.getContext("2d");
canv.width = 350;
canv.height = 600;
let speed2= -2,
   speed3= 2,
   speed4= -3,
   speed5= 3,
   speed6= -2;
let x2 = 0,
   x3 = 0,
   x4 = 0,
   x5 = 0,
   x6 = 0;
let y2 = 100,
   y3 = 200,
   y4 = 350,
   y5 = 400,
   y6 = 500;
let w2 = 50,
   w3 = 50,
   w4 = 50,
   w5 = 50,
   w6 = 50;
let h2 = 50,
h3 = 50,
h4 = 50,
h5 = 50,
h6 = 50;
//создаём квадрат
let x1 = 300 / 2;
let y1 = 0;
let w1 = 50;
let h1 = 50;
let speed = 2;
let level = 1;
let lives = 3;
function kyb(x, y, w, h) {
  ctx.clearRect(300/2, 0, 70, 70);
  ctx.fillRect(x, y, w, h);
}
let black = '#'+(0x1000000+(Math.random())*0xffffff).toString(16).substr(1,6)
ctx.fillStyle = black;
ctx.textAlign = "center";
ctx.font = "20px ittalic";
ctx.fillText("level: " + level, 30, 20)
ctx.textAlign = "center";
ctx.font = "20px ittalic";
ctx.fillText("lives " + lives, 27, 40)
ctx.textAlign = "center";
ctx.font = "20px ittalic";
ctx.fillText("speed: " + speed, 35, 60)
kyb(x1, y1, w1, h1)
let play = function () {
ctx.textAlign = "center";
ctx.font = "20px ittalic";
ctx.fillText("level: " + level, 30, 20)
ctx.textAlign = "center";
ctx.font = "20px ittalic";
ctx.fillText("lives " + lives, 27, 40)
ctx.textAlign = "center";
ctx.font = "20px ittalic";
ctx.fillText("speed: " + speed, 35, 60)
kyb(x1, y1, w1, h1)
 y1 += speed;
if (y1 > 570) {
 alert("YOU WIN! ");
 y1 = 0;
 ctx.clearRect(0, 0, 100, 100);
 level++;
 speed++;
 lives++;
  speed2--;
   speed3++;
    speed4--;
     speed5++;
      speed6--;
}
}
canv.addEventListener("touchmove", play)
function q () {
ctx.fillRect(x2+w2, y2, w2, h2);
ctx.fillRect(x3, y3, w3, h3);
ctx.fillRect(x4, y4, w4, h4);
ctx.fillRect(x5, y5, w5, h5);
ctx.fillRect(x6, y6, w6, h6);
}
function ride() {
 ctx.clearRect(0, 70, window.innerWidth, window.innerHeight)
 kyb(x1, y1, w1, h1)
 q()
x2 += speed2;
if (x2 <= -100) {
 x2 = 400;
}
x3 += speed3;
if (x3 >= 400) {
 x3 = -50;
}
x4 += speed4;
if (x4 <= -50) {
 x4 = 400;
}
x5 += speed5;
if (x5 >= 400) {
 x5 = -50;
}
x6 += speed6;
if (x6 <= -50) {
 x6 = 400;
}
}
setInterval(ride,30)
}

Делаешь пандорический захват, лифтишь в монаду, потом строишь рекурсивную схему (здесь подойдёт зигохистоморфный препроморфизм) как монадический трансформер из категории эндофункторов, и метациклически вычисляешь результат. Любой второкурсник справится. А если делать на анафорических лямбдах — так задачка вообще на пять минут.

подскажите пожалуйста, почему так происходит. Когда я делаю такие стили у меня почему-то у searchFormItem__subtitle перестает работать text-overflow: ellipsis. Текст получается как на третьем скрине. А должно быть как на последнем скрине. При этом если я уберу display: flex у .searchFormItem:hover :last-child, то все как надо

Спасибо, но я новичок