After a few years of semi-retirement, I’m back to coding some lisp/html/css…
I remember on my last project I had a few issues with css element ordering.
Could somebody either point me in the right direction for css element order rules or give a simple explaination which I could test out?
I’ve searches W3C and read their texts till my eyes crossed, but can find no relevant info…
thanx…
william…
As in “How do I keep my CSS files efficient?”
If so, I usually put the most common first and the one-timers last.
Other times not so organized if it’s only a small bit of code
/* But Always Comments */
In general the last rule in a stylesheet will always take precedence if it’s been mentioned before.
Simple example:
p { color: #333; }
...more styles...
p { color: #555; }
P elements will always be #555
What kinds of order rules are you concerned about? Can you give any specific examples or usage examples that we can relate to? Otherwise, our answers could be irrelevent, too
If you mean style, id, class, that is the order of preference.
If I remember correctly, the main problems in order was dealing with properties concerning with positioning.
There were interactions between various properties which altered where html elements (text/images/input) were placed in the body, depending on the order of the properties inside the css definitions.
I could verify that altering the order inside css did change the flow of text/images, but not always with the same results, especially with different browsers.
As most of my work deals with software generated html/css/js, I can guarantee code/element/properties order, if only I could know what rules (if any) deal in css property order.
There was talk at W3C (5-6 years ago?) about defining rules to cover just this concern, but I can find nothing about it today.
Perhaps I am worried about a storm in a teacup, but it was a major pain on my last project, and I had hoped there would be some resolution by now…
thanx…
william…
I still prefer something like
/* header style /
⋮
/ navigation style /
⋮
/ footer style /
⋮
/ index style /
⋮
/ sitemap style */
⋮
etc. But it sometimes means more trouble that it could be.
I guess the more logical way would be to put the less specific selectors first and then over-ride them when needed to target something more specific.
If I may… it sounds like you never worked with HTML and CSS enough to learn how HTML and the CSS properties behave on a page… the rules of behavior of the individual properties and how they act (or interact) amongst their peers (other properties). In other words, in spite of some past experience, today you are essentially starting from scratch. If you have been reading extensively but the things your are reading don’t make sense, I would hazard that you probably have too little hands-on experience to understand what the authors are talking about.
If you have the time and interest to take a course and to play with HTML and CSS and write some web pages (just for fun, not for publication on a server), you should pick up a lot of new information very quicky. If you do not particularly enjoy playing (working example pages and experimenting) then I’m afraid the outlook is bleak for much more than a cursory familiarity with the most basic elements and properties.
I suggest that you take a course in HTML and CSS and don’t skip over anything because it seems irrelevant. Take it seriously and completely so you can build a firm foundation (methodically learn the rules for a bunch of properties by watching them in action).
On the other hand, you mention a previous project. Do you have sufficient recollection of or leftover material to allow you to express/share specific examples of “property order” (I’m still unclear what “property order” means to you) that caused you grief? If so, we can address those issues specifically.
I’m guessing that floats, positioned elements, and specificity were the bugaboos because those are commonly misunderstood behaviors. Whatever your issues, specific examples would be extremely helpful toward understanding the issues you faced and clarifying those behaviors.
silly me…
thought this site was a place for answers…
not interested in flame wars or trading insults…
I leave you as the big frog in this pond…
enjoy…
william…
???
I’m sorry. No “flame war” or other symbol of disrespect intended or imagined. Trying to gather information so I/we can be most helpful. That’s all.
signed,
tadpole
There is no problem with positioning as such and rules are applied to elements depending on their specificity. (That article is actually taken from my original entry in the old SitePoint reference site.)
Specificity is rather complex at first but becomes second nature after a while. There is no getting around the fact that you do need to learn the details though. Specificity, inheritance and the Cascade are topics that need to be learned to understand the full impact of how you apply your css rules.
If your problem with positioning is that you are applying conflicting rules (e.g. floating and absolute positioning are mutually exclusive and absolute positioning wins out) then in most cases it should be common-sense to expect that both cannot be true. There are rules that govern which properties will win out in these cases but its not often that you will run into conflicts if you are using the rules for the purpose they were intended.
If you are talking about old fashioned presentational mark up (like align=“left” etc) then css will always win out but these days no one uses mark up like that anyway.
If you are inserting code into the page then that code will inherit any properties from the page’s css so you can’t actually insert a block of code and not expect it to be unaffected by all that is around it as of course the C in CSS means Cascade. Therefore you usually have to tweak things to get them right depending on the context that you have inserted them. (There have been murmurs of late for creating isolated blocks to create modular designs but there is nothing usable at present.)
Yes perhaps you are over-thinking this and assuming you have a good grasp of CSS you should not be unduly concerned.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.