HTML + CSS Weblog

What I have is a simple weblog consisting of HTML and CSS. I'd like you to pinpoint mistakes (smelly code and so on) and how to improve my code. Opinionated responses are welcomed, given that you can provide solid arguments backing them. I have validated both HTML and CSS, so there are no syntactic mistakes.



* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

section, article, aside, footer, header, nav, main {
display: block;
}

html {
font-size: 62.5%;
}

h1, h2, h3, h4, h5, h6 {
font-weight: 300;
}

body {
font-family: Helvetica, sans-serif;
font-size: 1.5em;
line-height: 1.6;
max-width: 50em;
margin: 0 auto;
}

article {
padding: 4.5rem 0;
}

@media only screen and (max-width: 50em) {
article {
padding: 4.5rem;
}
}

p {
padding: 1.5rem 0;
}

nav {
margin: 1rem 0;
border-top: 1px solid #bbb;
border-bottom: 1px solid #bbb;
line-height: 4.5rem;
}

nav li {
display: inline;
margin-right: 1rem;

}

footer {
text-align: center;
}

.masthead {
text-align: center;
margin-top: 4rem;
margin-bottom: 3rem;
}

.article-header {
padding-bottom: 1.5rem;
border-bottom: 1px solid #bbb;
}

.post-date {
font-size: 1.22rem;
}

a:link {
color: #5995DA;
text-decoration: none;
}

a:visited {
color: #407FC7;
}

a:hover,
a:visited:hover {
color: #76AEED;
border-bottom: 1px solid #76AEED;
}

a:active,
a:visited:active {
color: #5995DA;
}
`


My Weblog





My Weblog

Minimalism at its best. Only cool stuff

• home

• blog

• gallery

• about

Travel day
October 22, 2009


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec hendrerit felis accumsan turpis pretium tempor. Duis eu turpis nunc, ut euismod nisl. Aliquam erat volutpat. Proin eu eros mollis dui fringilla sodales. Curabitur venenatis tincidunt felis ac congue. Maecenas at odio dui, sit amet congue sapien. Proin placerat feugiat eros,

I would like to point your code is fine, and what is below may not apply to your case, see more like guide line for long run rather than a code review.

Simplify css selectors

-
Avoid use of tags names, make classes your default and use ids when it makes sense.
This will make your css less dependent on html structure, and more reusable.

-
Don't use selector combinators. They can be confusing and may not be efficent.

-
Make hierarchy of classes, it helps to organize your css file and show dependcies between classes.
Example .parent parent-child .parent-child-superchild. Don't abuse this, three levels may be enough.

Down side of this is more classes on your html, it may not be very pretty.

StackExchange Code Review Q#156792, answer score: 2