After writing about whitespace in CSS selectors on Thursday, I was chatting to my friend Tyler that night about CSS in general when we were reminded of CSS-Tricks, which we hadn’t visited in a while. So we paid it a visit, I scrolled through the home page, and I saw an article linking to a retweet of this tweet of some slides by Julie Cameron about modular CSS (phew, what a mouthful!):
and my first thought was holy flamebait. My second thought was well, looks like I have my second article about Selectors already!
Now, like Chris Coyier, I know better than to judge an opinion by two out-of-context slides, but being a huge fan of Selectors, I thought I’d write an article of my own to deconstruct the slides piece by piece and examine their context and the underlying premise they’re advocating, because I think there’s an interesting discussion to be had here.
Before I do that, I recommend reading Chris’s article, as he does a good job explaining the general idea behind the slides objectively. What follows is more in-depth, and certainly more opinionated as well. I’ll also be answering some of the questions he posed in his article.
Two spaces before the first *, which is not a big deal, but still an unusual sight.
One space after the first *, before the :not() pseudo-class. That’s a big deal.
The complete and utter lack of whitespace between the selector and declaration block, and within the declaration block, a stark contrast to the mess of whitespace in the selector.
Why is #2 a big deal? Because in selector syntax, whitespace that separates any two simple selectors is a descendant combinator. This includes the universal selector *. Think of it like this: in much the same way that
#id .cls
matches any .cls descendant of #id,
* .cls
matches any .cls descendant of, well, any element. In other words, any .cls element that has an ancestor (effectively excluding :root.cls). And since pseudo-classes are simple selectors just like type, class and ID selectors,
* :not(.cls)
likewise matches any :not(.cls) element that has an ancestor.
Compare the example selectors above with these ones:
#id.cls
*.cls
*:not(.cls)
Removing the space results in
a selector matching any element with both the respective ID and class name,
a selector matching any element with the respective class name, and
a selector matching any element without the respective class name.
Notice that there’s no mention of ancestors or descendants. That’s because I removed the descendant combinator!
Also, as you might have guessed by comparing the second and third examples, yes, you don’t actually need the * in front of a pseudo-class. Just like class and ID selectors, as well as pseudo-elements, the * can be left implicit.
Note: In some cases, adding a universal selector can make a selector easier to read, even though it has no effect on the matching behavior. For example, div :first-child and div:first-child are somewhat difficult to tell apart at a quick glance, but writing the former as div *:first-child makes the difference obvious.
… if you read that note in the context of this article, suddenly it takes on a completely different meaning!
So, be careful with whitespace when writing CSS selectors! Whitespace generally doesn’t change the meaning of a selector anywhere else, but when the syntax expects you to chain your simple selectors as tightly as possible, it means it.
Here are some related Stack Overflow answers of mine you may be interested in:
As a birthday gift, I got my site its very own SSL certificate, courtesy of DigiCert through their Microsoft MVP offer, and as of this week my site has now been fully transitioned to HTTPS!
SSL (Secure Sockets Layer) is an Internet security standard that enables encrypted communication between your browser and a website, preventing attackers from eavesdropping on or even tampering with information. This is more important for sites that collect sensitive information such as government and e-commerce sites, and less so for personal sites, but as SSL certs become more accessible and affordable I don’t see any reason for me not to secure my site, so, here I am!
In this entry I’ll be sharing my personal experience of obtaining and signing a certificate, setting it up on my server, and migrating both static and dynamic content on both the main domain and its subdomains.
As this is about my own experience, this will not be a comprehensive how-to covering all the various ways of setting up HTTPS on your site (though I’ll cover some ground in the overview), but I hope you learn something about the process in general. This being my first ever experience with SSL certificates as a server administrator, I certainly learned a whole lot!
As another uneventful even-numbered birthday, here’s another fun fact: ten years ago, my 16th birthday in 2008 was when I had intended to launch NOVALISTIC 3.0 “Oltanis”, which, from the About page, was:
An attempt at creating an online resource for web developers, with tutorials, assets, and even a discussion forum. Codenamed “Oltanis”, I spent months implementing version 3.0 between 2007 and 2008 before finally deciding not to launch it as I realized it was too large of a commitment for myself.
At 26, not only do I still think I’m not ready for such a commitment, but I think the web has largely moved beyond tutorial sites and discussion forums. Oltanis was a relic of its time, for sure.
I should probably start some sort of birthday fun fact thing here each year, huh?
Anyway, speaking of the number 16, it was NOVALISTIC.com’s sweet sixteen last November! Here’s my tweet about it in case you missed it:
And if you haven’t noticed the fact that my site is now mostly on HTTPS yet, to commemorate my domain name’s sweet sixteen it now has its own SSL certificate, courtesy of DigiCert through their Microsoft MVP offer!
This is an architectural (read: behind-the-scenes) update that should not negatively impact performance or reliability on Windows Phone 8.1. On Windows 10, a few user-facing improvements accompany the architectural changes:
Updated with a fresh but familiar look and feel on PCs and tablets with the Windows 10 Fall Creators Update.
Fixed minor layout issue on startup on Windows 10 phones.
Improved chat history context menu behavior.
Performance and reliability improvements.
That blog post I promised in the previous update will be rolled into the one I’m planning that’s accompanying this update, as they both pertain to the UWP development process (for the developers, don’t worry, I haven’t forgotten about my question on Software Engineering!). In the meantime, if Emergency Chat has helped you during a time of need, or if there’s something that you think can be improved, we’d love to hear from you! Please rate and review our app (you can do this from within the app by going to Settings > About, or if you’re reading this on Windows 10 you can use this handy direct link!).
