Nazewnictwo w CSS Opcje

[Evinek]

Witajcie.
Napisze krótko i na temat.
Jak nazywać lub inaczej, jak robić tagi w CSS i HTML.
Mój problem jest w stylu (przykład):

index.html

[HTML] pobierz, plaintext 
<div class="articles">
	<div class="article">
		<h2>Tytuł</h2>
		<p>Lorem ipsum...</p>
		<a href="article.html">Czytaj dalej</a>
	</div>	
</div>
[HTML] pobierz, plaintext 

article.html

[HTML] pobierz, plaintext 
<div class="article">
	<h2>Tytuł</h2>
	<p>Lorem ipsum...
	Bla bla bla</p>
</div>	
[HTML] pobierz, plaintext 

Wszystko opakowane oczywiście w:

[HTML] pobierz, plaintext 
<div class="container">
	<div class="header"></div>
	<div class="content">
		<!--Tutaj wcześniejszy kod z tamtych plików-->
	</div>
	<div class="footer"></div>
</div>
[HTML] pobierz, plaintext 

Póki co tworze takim sposobem i jakoś działa:

[CSS] pobierz, plaintext 
.articles .article h2 {/*kod dla index.html*/}
.article h2 {/*kod dla article.html*/}
[CSS] pobierz, plaintext 

Jakieś lepsze sposoby lub pomysły? Chciałbym aby kod był jak najbardziej przejrzysty i aby ktoś inny nie miał problemu aby raz dwa się połapać.

[sunpietro]

Wydaje mi się, że w index.html możesz na spokojnie posłużyć się HTML5 i zamiast div z klasą .article daj znacznik article, a w nim odpowiednio znacznik header.
Wtedy będziesz miał kontener .articles z pojedynczymi artykułami.

Innym pomysłem może być stylowanie wg kontekstu nadrzędnego jakim jest typ strony. Jeśli artykuły są na stronie kategorii, to kontekstem nadrzednym może strona z klasą .page-category a dla strony z pojedynczym artykułem, kontektstem będzie .page-article.