О чистоте кода CSS

Разницы нет. Дело в удобстве и правильной практики. Как насчет такого варианта по БЭМу?

<nav class="navigation">
  <ul class="navigation__list">
    <li class="navigation__item"><a class="navigation__link href="#">Ссылка 1</a></li>
    <li class="navigation__item"><a class="navigation__link href="#">Ссылка 2</a></li>
    <li class="navigation__item"><a class="navigation__link href="#">Ссылка 3</a></li>
  </ul>
</nav>

Если у вас появится нужда в дальнейшем поменять цвет одной ссылки, можно будет добавить модификатор, например:

.navigation__link_red

Организация CSS кода это очень индивидуальное, поскольку это зависит от многих факторов. С популярными подходами в организации CSS можете ознакомиться по ссылке, хорошо описаны подходы и их недостатки.

рекомендуют всем родительским елементам задавать классы, но при этом рекомендуют использовать не более двух селекторов для изменения стилей

Эта рекомендация дана вам для того что бы вам было проще переопределять стили для новых элементов, поскольку у новичков часто возникают проблемы с определением "веса" селектора, что бы было понятнее прочитайте эту статью.

Если вы только начали изучение CSS, то вам пока не стоит заморачиватся с организацией кода, посколько любая методология решает определённые проблемы при работе с проектами различной сложности, с которыми вы еще долгое время не столкнётесь. Например тот же БЭМ которые вам рекомендуют, был создан компанией Yandex для компонентного подхода к веб-разработке и хорошо подходит для больших команд разработчиков т.к имеет четкие правила к формированию селекторов. Пока вы не работает с большими проектами лучше потратить время на изучение самого CSS.

Если же вы уже опытный разработчик и хотите улучшить свою организацию кода, тогда попробуйте различные методологии на какой-то типовой задаче и определите с какой из них Вам удобней работать.

В вашем случае я бы рекомендовал '.navigation-list a'. Но вообще надо еще ориентироваться на тот факт какие блоки переиспользуются, а какие нет. Использовать '.main-navigation a' небезопасно. потому что если кто то из разработчиков проекта использует '.navigation-list a', он переопределит ваши стили. Опасность в себе несет только использование '.navigation-list li a' в дальнейшем т.к имеет больше веса, но само по себе использование такой цепочки селекторов некорректно т.к в данном случае li можно пренебречь - других селекторов кроме li внутри ul быть не может.

Организация кода CSS - часто субъективное явление. Я бы рекомендовал давать родителю достаточно описывающее функцию название класса, а дочерним элементам добавлять через дефис слово, описывающее элемент. К примеру

<div class="card"> 
  <p class="card-paragraph"></p> 
  <a class="card-link"></a> 
  <img class="card-picture"> 
 </div>

Ну а вообще все сводится к тому, чтобы класс достаточно понятно описывал функцию элемента. Очень хорошо можно организовать код в SCSS с такими классами. Если пишите на чистом CSS - лучше всего писать стили к родителю, а под ним в последовательности, сходной с последовательностью кода в HTML, писать стили к дочерним элементам. Удачи

Я предпочитаю древовидный подход, особенно с препроценссорами у вас остается дерево, аналогично блоку верстки, что визуально упрощает читабельность кода.

На примере scss:

.main-navigation {
    background: wheat;
    .navigation-list {
        list-style: none;
        li {
            display: block;
            a {
                text-decoration: none;
                &:hover,
                &.active {
                    color: red;
                }
            }
        }
    }
}

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