some-sect
├── _some-sect-header
│ ├── some-sect-header.scss
│ └── some-sect-header.html
├── _some-sect-card
│ ├── some-sect-card.scss
│ └── some-sect-card.html
├── some-sect.scss
└── some-sect.htmlесли честно запутался с этими лэйаутами окончательно
"editor.snippetTabstopHighlightBackground": "#ffffff00",function getAngleBetween(newPoint, oldPoint) {
const dy = (newPoint.y - oldPoint.y);
const dx = (newPoint.x - oldPoint.x);
const theta = Math.atan2(dy, dx);
const angle = (((theta * 180) / Math.PI)) % 360;
return (angle < 0) ? 360 + angle : angle
}
const percent = clamp((scrollTop + halfWindowHeight - stepsOffset) / stepsHeight, 0, 1);
const prevArrowPoint = svgPathActive.getPointAtLength(pathLength * (percent - .001));
const currentArrowPoint = svgPathActive.getPointAtLength(pathLength * (percent));
const angle = getAngleBetween(prevArrowPoint, currentArrowPoint) + 180;
stepsArrow.setAttribute('transform', `translate(${prevArrowPoint.x - 6} ${prevArrowPoint.y - 11}) rotate(${angle}, 6, 11) `);
Я не вижу ничего предосудительного, если это оправдано - то есть мельчить и создавать блоки, в которых три строки разметки и три CSS правила - не стоит. Но если каждый отдельный блок имеет самостоятельную, относительно объёмную логику / разметку / стили - это оправдано, и на то, насколько уродливо в этом случае выглядит файловое дерево - в общем-то плевать, ибо тыкать мышкой в этой дерево вы будете примерно никогда.
Увидели в разметке "some-sect-deep-nested-entity", нажали Ctrl+P (VSCode), вбили туда название класса, клацнули Enter и попали туда, куда вам надо.