Let’s say there is such a markup:

<header class="header">
  <ul class="list header__list">
    <li class="list__item"></li>
    <li class="list__item header__item_active"></li>
    <li class="list__item"></li>
  </ul>
</header>

<main class="main">
  <ul class="list main__list">
    <li class="list__item"></li>
    <li class="list__item list__item_active"></li>
    <li class="list__item"></li>
  </ul>
</main>

<footer class="footer">
  <ul class="list header__list footer__list">
    <li class="list__item"></li>
    <li class="list__item list__item_active footer__item_active"></li>
    <li class="list__item"></li>
  </ul>
</footer>

the file structure will look something like this:

blocks/
    header/
        __list/
            header__list.css
        __item/
            _active/
                header__item_active.css

        header.css

    main/
        __list/
            main__list.css
        __item/
            _active/
                main__item_active.css

        main.css

    footer/
        __list/
            footer__list.css
        __item/
            _active/
                footer__item_active.css

        footer.css

Where in this file structure (if I have composed it correctly, of course) should the styles for the “list” block and its elements be located?

This block seems to be common to the other three blocks. Should its styles be duplicated in the folders for header, main, footer?

How should styles be placed when there is a “mix”, like this one: <ul class="list header__list footer__list">?