I was surprised by something last night when I pulled up one of my revisions to this little monster where I decided to put an element in all caps . . . and promptly broke the page! Absolutely shattered it. There went my lovely header and everything else went Picasso as well. I had carefully Search/Replaced the term throughout the code and been satisfied that everything matched between the CSS and the HTML.
Years ago I had been mentored that IDs are case sensitive and CLASSES are not. Every now and then some hyper-nerd would caution: be extremely careful when using all uppercase in your code! even when using classes! but I frankly dismissed them as extremists. After all, I knew my CSS (choke, cough, cough). “Are you kidding me? Everyone knows only IDs get that restriction. I’ve never experienced it once in my code” said this fount of wisdom.
Well I have now! Loathe though I am to give this site any more publicity than the obsequious sycophancy with which Google promotes them, this was a thread worth reading.
Whether by virtue of the expansive catalog of my masterpieces limited set of HTML documents I have singlehandedly been blessed with excellent mentorship to be able to compose over the years – most particularly here at Sitepoint where Paul O’Brien has not always patiently guided me through some CSS minefield or HTML jungle; an actual fount of wisdom who must have been born performing Euclidian Geometry on his tiny fingers (Not now! Can’t you see I’m postulating?) – or sheer luck, it has never happened to me. Lucky the forum who hosts Paul!
I like ALL CAPS. It satisfies on so many levels (on the whole capital-i/lowercase L issue . . . Well. I rest my case.). But right now it has risen to the occasion of aiding me to DISCERN the code Paul and many others help me compose because I’m currently limited to working on a SmartPhone with a tiny screen.
I am in the minority on this issue, I do know. But it isn’t every day you’re forced to confront that you’re going to be doing something radically different from the way you’ve done it for over 30 years.
I must bid Adieu! to my caps key and accept the truth of mine own eyes that code wants to be in lower case, and just in case I had any reservations that this is manifestly true, I was treated to a rude awakening last night when one stinking, lousy, interfering element – just one traitorous, calculating innocent element – threw the entire document into deep Picasso.
so to the multitude who have adjured me to use lowercase down through the years, i get it. you win!
You sure like to rant but you leave out the important part.
What do you mean by element? Do you mean HTML element? It would help to provide the qualification. Perhaps you expect us to look at the code you provided a link to but that does not help.
What does CLASSES mean? Do you mean HTML class or CSS class? I say HTML because if that is the context of element then it helps to know what this other context is.
Fancy words do not impress me. Clear descriptions do.
This editor provides bold and italics for emphasis and such.
Be careful. Some people are quick to complain about SHOUTING.
no one restricts you from using all words in upper case if you strictly do it in all places.
Of course you cannot use a foreign template which is defining a CSS class as „myClass“ and try to use „MYCLASS“ in your Code.
IDS and classes have always been case sensitive in standards mode. You may be referring to long ago when people coded without a doctype which would place the browser in quirks mode and then all ids and classes are case insensitive.
You should also note that element selectors (html, body,div,h1,p etc) are still case insensitive in the html and the css.
e.g. The following works either way.
<div>div</div>
<DIV>DIV</div>
The above would both be matched with this:
div{background:red}
or alternatively just with this.
DIV{background:red}
Therefore it is best to avoid ambiguity and use all lower case in your html and css and forever will be gone the simple caps typo.
You can use camelCase but css and html must match of course however I prefer to use a hypen instead to break long classes into more readable items e.g. .sub-heading instead of subHeading. However camelCase is fine and lots of people prefer it.
As usual Paul you got it in one. It’s funny but I do this sometimes: find myself at one level of innovation, consider it satisfactory for my needs and then never leave. Invoking “Quirks mode” reminds me of my very first efforts at writing html – right around the time I was learning that only IDs have to be case sensitive, not classes. In all my years of writing increasingly more complex html I’ve never experienced case sensitivity until yesterday. I’ll simply have to change.
I can’t have an experience like yesterday, when one word threw the entire page! Even now I’m worried at what exactly is going to happen. I hope I don’t have to completely redo the header.
– which reminds me: Did you ever figure out how to get the header text to vertically align to the bottom? Otherwise I’ll have to stick two <BR>s in there to force it down. Which is exactly the kind of hack I don’t want to have to resort to tsk . . .
In all my examples the header is aligned to the bottom.
If you are referring to your example then you didn’t post enough code to create the header as shown in your picture.
Breaks or vertical-align are not the solution (vertical-align doesn’t apply to block elements) but you should carry on the discussion in your other thread and I will take a look :).
But that’s just it Thallius: I did! I have always been scrupulous about keeping track of my style naming. What I’m reporting here is that one of my styles broke the page just by my deciding to ALL CAPS the little demon. This is the exact kind of outcome people have warned about (forever) – that the breach will be unexpected; inexplicable – “Volatile” is not a word I permit to come anywhere close to my code. I can’t have it be . . . unstable is I believe the word I want to use. It can’t be a loose canon on my deck man, that’s intolerable! This is why I scrupulously examine my styles – and then run the whole page through the Validator.
