Just as anyone else starting to code, I just rushed everything into the CSS file, and I’ve continued doing this for as long as I can remember. Enough is enough, today I started cleaning my code seperating content in the order I might need them in the future, making the code more “user friendly” than before.
This is my 3 steps: 1) Seperated Typography, id:s, classes and kept usual divs & id:s at the top{1}, as a usually tweak them every now and then. 2) Made the code look good by adding and removing (bad) spaces{2}. 3) Removing code snippets that I no longer use{3}.
If you want to take a look at it, simply right-click and chose “show source” and knock yourself out.
On the other hand, I also made a few design-related changes too, like adding the logo you see in the upper right corner. I actually don’t know how I could do without it earlier. The second thing is the background that really spiced things up. The third thing is the typography in the sidebar{4}.
Hope you enjoy it!
Great changes! I love the background, although I’d look into positioning it relative to the centered container rather than the browser window. I arranged some less than fortunate screen width scenarios:
http://files.forrykt.com/hw1.jpg
http://files.forrykt.com/hw2.jpg
I like the idea of maintaining a section exclusive to typography in the CSS file. I’m not entirely sure that it’s easier to maintain, though?
Since FRKT VII I’ve started to add a line break after CSS elements that share the same properties like so:
.item1,
.item2,
.item3 {
display: none;
}
What are your thoughts on this? The idea is to make it easier to scan through the list of elements affected by the rule, but on the other hand it contributes to the length of the CSS file.
Damn, you’ve caught me off guard once again, Johannes. The background needs to be centered, that’s for sure. And thanks for the images, they really proved your point for sure!
I’d say it makes it easier to maintain, because you can keep it into numbered sections in the CSS-file. Just use an “index” at the beginning and you’ll find it. I put mine at the bottom for easier access when editing (I usually change there alot).
I’ve always been thinking of ways to make it easier to scan through it, and I think your way is excellent. The only problem I can see is that the document is getting longer, and do take some more time scrolling for what you need. I guess it depends on what you prefer yourself.
I forgot to mention another thing I’ve made a habit of lately. For some reason no one use indentation in CSS, but I’ve found it to be very helpful in organizing my code. I tend to indent rules that relate to a parent, like so:
a {
text-decoration: none;
}
a.emphasis {
color: red;
}
#section #subsection a {
color: blue;
}
In the odd case that WordPress doesn’t play ball to illustrate this example, see http://www.forrykt.com/css/global.css for reference. :-)
Isn’t that the same as inheritance, Or am I missing out on something?
I absolutley love your excerpts in your entries. It’s italic Georgia, isn’t it? Looks stunning.
I failed to illustrate it as WordPress didn’t like the excessive amounts of spaces in my comment. I’ve uploaded a piece of code to demonstrate it at http://files.forrykt.com/indentedcode.jpg. There’s not much to it, I just indent (tab) CSS rules that are applied within a parent rule.
As for the excerpts – you’re right, it’s Georgia. Thanks!
That’s freaking beautiful! That makes it even more easier to see which snippets of code belongs to which parent. I think I will apply this right away actually. Pure genious.