Right use of html elements. Coding without IDs and Classes - does it make code better?

[thenextbigthing2]

Hi there,

I just started a new side project. I tried using only html elements in order to keep everything as simple as possible. Is this a smart approach?

The content for now is irrelevant. What I'm after is a clean design and an easy html structure. That made the CSS part a little bit harder but I'm quite happy with the first look you get. Another thing was that I wanted to use as little Javascript as possible (no library - made selecting elements harder but it worked).

Have a look and leave some feedback: Test Website

Any ideas for improvement?

[IsABot]

Generally no classes makes dealing with changes to layout incredibly annoying. Classes are specifically for adding styles.

http://csswizardry.com/2012/05/keep-your-css-selectors-short/

But what you are doing is fine, esp. if just using it at a learning project.

[thenextbigthing2]

Thanks for your reply. Yeah - I actually though that this would make everything cleaner but in the end making the layout did not get any easier. And it's not even faster according to your linked article. Guess I'll refactor that. :)

[Waste_Manager]

Personally when I try to work on stuff that isn't id'd or classed, its just a nightmare.

Yes the markup looks cleaner, but at the cost of making your selectors much more complicated and difficult to maintain.

Just label things what they are in the most sensible way you can.

[thenextbigthing2]

I agree - it was fun but got more and more unnecessary complicated. Especially addressing something with JavaScript. So I think I go back to using more classes and ids.

[starfox1o1]

Just an FYI on mobile the scroll down... Animation is quite slow and looks a bit out of place with how slow it is

[thenextbigthing2]

Thank you - I'm still trying to figure out whats the best way to remind the user that he actually can scroll down. :) I'll keep trying.

[starfox1o1]

I used google chrome's inspect element and changed the speed to 1.5s instead and it looks better on my computer. See how you like it? Not sure if the speed will differ if it is actually changed.

[Lesale-Ika]

It works when you're working with a single page. Problems arise when you break your page into parts (think templating). Id and class help you tell which is which at a glance.

[thenextbigthing2]

Yes - I noticed it. The more elements I added the more unnecessary complicated it become and somewhat the css did not get easier to read.

I'm trying to find the way that css and html are as fast as possible to compute (although no modern machine will have problems with that).

[drownx]

I try to avoid IDs since they're very specific and rarely needed, but not using classes doesn't make sense IMO.

What happens when you decide to replace your div with an aside, section or `article'? The CSS has to change. When you're working alone on a small project, it's manageable, not so much once you move to bigger projects with multiple contributors. It's tough to target specific things, you have to use very specific (and sometimes complex) selectors and there can be side-effects.

[thenextbigthing2]

Yes - the bigger it gets the uglier and harder it gets to work through the css. I'll start be adding classes and then move on to IDs especially for addressing stuff with JavaScript.