Solução genérica? | HTML5 e CSS3 I: Suas primeiras páginas da Web

Ao escrever a página do portfólio me incomodou o fato de eu ter que definir direita ou esquerda, antes de ver a solução do professor escrevi o meu código assim(o relevante mesmo é o css):

main {
    background-color: #FAFFFC;
}
main h2 {
    text-align: left;
}
.link {
    border: 8px solid black;
    width: 45%;
    margin: 7.5px 0px;
    margin-right: 7px;
    padding: 5px;
    float: left;
}
.link img {
    width: 90%;
}

<!DOCTYPE html>
<html>
    <head>
        <title>Blog - Biografia João da Silva</title>
        <meta charset="utf-8">
        <link rel="icon" href="img/favicon.png">
        <link rel="stylesheet" href="css/reset.css">
        <link rel="stylesheet" href="css/site.css">
        <link rel="stylesheet" href="css/portfolio.css">
        <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Crimson+Text:400,400italic,600">
        <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans+Condensed:700">
    </head>
    <body>
        <main>
            <h1 class="titulo">Portfolio</h1>
            <div class="container">
                <h2>Veja abaixo a lista dos meus projetos mais relevantes:</h2>

                <a href="https://bmw.com">
                    <figure  class="link linkesquerda">
                        <img src="img/bmw.png" alt="Site da BMW">
                        <figcaption>BMW.com: reformulção de design e implementação de HTML, CSS e JavaScript.</figcaption>
                    </figure>
                </a>

                <a href="https://uol.com.br">
                    <figure  class="link linkesquerda">
                        <img src="img/uol.png" alt="Site da BMW">
                        <figcaption>UOL.com.br: reformulção de design e implementação de HTML, CSS e JavaScript.</figcaption>
                    </figure>
                </a>

                <a href="https://ibm.com">
                    <figure  class="link linkesquerda">
                        <img src="img/ibm.png" alt="Site da BMW">
                        <figcaption>IBM.com: reformulção de design e implementação de HTML, CSS e JavaScript.</figcaption>
                    </figure>
                </a>

                <a href="https://g1.com.br">
                    <figure  class="link linkdireita">
                        <img src="img/g1.png" alt="Site da BMW">
                        <figcaption>G1.com.br: reformulção de design e implementação de HTML, CSS e JavaScript.</figcaption>
                    </figure>
                </a>
            </div>
        </main>
        <img src="img/eu.jpg" alt="Foto de João da Silva" class="foto-principal">
        <aside  class="navegacao-site">
            <h1>João da Silva</h1>
            <nav>
                <ul>
                    <li><a href="home.html">Home</a></li>
                    <li><a href="portfolio.html">Portfólio</a></li>
                    <li><a href="bio.html">Sobre mim</a></li>
                    <li><a href="blog.html">Blog</a></li>
                    <li><a href="contato.html">Contato</a></li>
                </ul>
            </nav>
            <ul class="icones-sociais">
                <li><a class="github" href="https://github.com/git-joaodasilva">Github</a></li>
                <li><a class="twitter" href="https://twitter.com/twitter-joaodasilva">Twitter</a></li>
                <li><a class="linkedin"href="https://br.linkedin.com/pub/linkedin-joao-da-silva/32/4/508">LinkedIn</a></li>
            </ul>    
        </aside>

        <footer class="rodape">
            &copy;Pedro Soares da Rosa, 2017
        </footer>
    </body>    
</html>

teriam alguma ideia para aperfeiçoamento?

Você pode usar esse codigo no css

.container figure{
    //css do linkesquerda
}
.container a:last-of-type figure{
    //css do linkdireita
}

o [ :last-of-type ] garante que apenas o figure que é o filho do ultimo <a> seja selecionado.

No caso, o ultimo filho do tipo <a> no container é o que possui o figure "linkdireita". Como ele é o único que precisa ser diferente o código funciona.

Tem bilhares de outras formas de se fazer isso. Por exemplo, usando o seletor [:last-child] que seleciona o ultimo filho da tag pai ou [:nth-child(n)] que seleciona o filho de numero n da tag pai. Também da pra fazer por força bruta tipo:

.container a + a + a + a figure{
    //css do linkdireita
}

mas não é a solução mais agradável :V

Eu recomendo que você crie a classe "linkdireita" e depois use o css

.container figure{
    //css do linkesquerda
}

.container .linkdireita{
    //css do linkdireita
}

Assim você não precisa colocar "linkesquerda" em tantas tags e só se concentrar nas exceções.

Nota: "linkesquerda" não é o melhor nome pra uma classe. Tenta "link-bmw-g1", ou algo mais genérico tipo "link-projeto". O importante é que a classe represente mais o conteúdo e não a localização dela.

Chegou a hora de transformar