I’m currently developing a website application that enables non-technical individuals to create their own text-based MMORPG. The application design is not to be visually-stimulating for developers (whitespace, indentation, etc.), …, and eliminate nodes from the DOM (where unnecessary). I would like CSS to do all of the styling, therefore eliminating all id and class attributes.
Though (personally) this seems plausible, excluding ease of development and time, I am keen to know if there are any disadvantages to this method .
Example:
<body>
<div id="page_content"> <!-- id used for styling purposes -->
...
</div>
</body>
#page_content {
....
}
The only disadvantage I can think of is if your really not gonna have any contrast in the website if it is all the same and our sure your not going to add something that is different with different style? its really up to you and what you have planned…
I should’ve mentioned this in the first post but the design and development itself is definitive.Meaning, because its intended for non-technical users (primary young teenagers), I’m not considering external development so the website is static.
First of all, body+div{} expects this sort of structure.
<body></body><div></div>
I think you meant this: body>div{}. Which expects your example.
In general, I think you should use the ID to identify a page. However, as long as you have the same structure throughout your website and you have no issues i n development, you can certainly go classless/ID-less. It’s all a matter of your website needs and how you need to structure things.
If you have no IDs or classes though, your CSS selectors could become advanced very quickly since you are trying very hard not to select multiple elements throughout the DOM.
I can understand not wanting a mess of unused ids and classes (** cough ** WordPress) but they are typically there specifically to make CSS styling easier.
The selectors are certainly an issue - I’m currently 50 lines in and they becoming quite complex, but it’s certainly a fun exercise.
In regards to your selectors there are some issues: Firstly, all nodes appearing after the end body tag are placed at the bottom of the body element so you’ll end up with them same result. Secondly, frst>scnd would select all scnd elements whose parent is an frst element, example:
<body>
<div></div>
<div></div>
</body>
Body divs would be selected, whereas using frst+scnd (body+div) only selects that first element (because it’s placed immediately after the frst element).
Descendant selectors, long selectors and complicated child and adjacent selectors come at a high price in terms of css parsing the document and time critical applications would grind to a halt if that approach was used.
For a small demo or very small page it probably would not be an issue but would be awkward to maintain or change at a later date if the selectors are vastly over-complicated.
The quickest way to apply css is by adding a class to the element in question and also happens to be the easiest way to maintain large pages.
Things like this are very slow:
#page_content div > p + a {color:red}
Where this is very quick and easier to understand: