Wątpliwości związane z designem kodu (ID vs Class)

Tworzę stronkę, która będzie reprezentować moje umiejętności w dziedzinie informatyki. Czyste portfolio. Mam już jakieś doświadczenie w tworzeniu stron internetowych (tym po części zajmuję się w pracy). Chciałbym, aby kod tej strony był bliski ideałowi - niech potencjalny pracodawca wie, że mam o tym jakieś pojęcie.
Głównie z tego powodu napisanie tej strony zajęło mi już... zbyt dużo czasu. Normalnie skończyłbym to w kilka dni, jednak naszły mnie wątpliwości w związku z konwencją nadawania ID oraz/lub klasy poszczególnym obiektom. Weźmy na przykład poniższy fragment kodu:

<div id='loading_wrapper'>
    <div class="loading">
        <div class="bar 1"></div>
        <div class="bar 2"></div>
        <div class="bar 3"></div>
    </div>
</div>

Jak wiemy, dane ID może posiadać tylko jeden element na stronie. Stosujemy je głównie w przypadkach, w których ten element jest unikalny i nie ma wspólnych atrybutów (jeśli chodzi o CSS) z innymi elementami. Klas natomiast używamy w przypadkach, w których mamy wiele elementów tej samej kategorii, które współdzielą jakieś atrybuty CSS.
Pierwsza wątpliwość:
Co jednak, jeśli na stronie mam wiele "wrapperów", które różnią się praktycznie każdym atrybutem CSS, ale służą do tego samego? Przykładowo loading_wrapper odpowiada za umiejscowienie elementów na stronie, które się w nim znajdują. Posiada kilka atrybutów CSS (position, left, width itp.). W przypadku innego wrappera, dajmy na to menu_wrapper, wartości każdego z tych atrybutów są inne, jednak jego funkcja jest bardzo podobna (umiejscowienie menu na stronie). Czy w tym przypadku powinienem każdemu z tych elementów nadać osobne ID (tak, jak jest teraz)?
Druga wątpliwość:
Teoretycznie div odpowiadający za pasek ładowania powinien mieć KLASĘ loading, ponieważ zazwyczaj takich pasków mamy wiele. Po co dla każdego z nich z osobna definiować te same atrybuty CSS? Na tej stronie jednak będzie tylko jeden pasek ładowania. Jestem tego absolutnie pewien i wiem, że w przyszłości nie będę dodawał kolejnego. Czy powinienem w takim razie zmienić klasę loading na ID loading_bars_holder?

Najnowsze konwencje mówią - porzuć id całkowicie. Tylko i wyłącznie klasy. Częściowo się zgadzam, choć nie twierdzę, że ID to evil. Niemniej za wiele tych korzyści ID nie mają w nowoczesnym programowaniu, czasem wręcz przeszkadzają, więc sam używam już tylko klas.

Od siebie polecam metodologię BEM. Porusza ona zdecydowanie ważniejsze rzeczy takie jak problem specyficzności selektorów.

Ok, dzięki wielkie za odpowiedź, naprowadziła mnie na dobrą drogę. Poczytam o BEM :)

Tutaj masz fajny artykuł o BEM, który powinien rozwiązać wątpliwości jakie mogą się pojawić, pokazuje fajny patent z prefiksami i kilka innych, ciekawych rzeczy. Jak dla mnie wypas, przeszedłem na to kilka miesięcy temu i widzę z tego (przynajmniej na razie) same korzyści - większy porządek, łatwiej się odnaleźć, nawet jeżeli ktoś nigdy nie miał z tym styczności to szybko się wdroży i nie ma miliona WTFów.

Ja bym polecił raczej CSS Modules: https://css-tricks.com/css-modules-part-1-need/

bo teraz już mieć całkowicie coolowskie i odjazdowe metodologie czy moduły zamiast zdrowy rozsądek, myślenie i opis z dokumentacją