Почему стили с одинаковыми идентифкаторами из разных файлов переплетаются?

Почему стили с одинаковыми индексами но в разных файлах переплетаются

Например:

У нас есть следующая структура: папка components и в ней ещё две папки например head и body

и почему если в этих папках создать по папке со стилями styles.css и в этих папках создать стиль с интексом допустим .background и призначить этот стиль например в компоненте, который находится в head, стили можно будет менять из папки со стилями, которая находится в папке body

очень странно, ранее с такой проблемой не встречался

Структура: https://i.sstatic.net/nSySERKP.png

test1.tsx:

import React from 'react'
import './styles1.css'
const test1 = () => {
  return (
    <div className='test'>
      test
    </div>
  )
}

export default test1

style1.css:

.test {
   background-color: red; 
}

и выходит так, что если я создам точно такой же индекс (test) в style2.css то соответсвенно можно будет менять test стиль из style1.css в style2.css