Have you used these CSS selectors?

Its a genuine question. I would like to know if what I am about to walk you through exists out there in the ether. I have seen so many techniques and methodologies with CSS. A variety of frameworks, preprocessors, standards, the works. So consider this a conversation. I would really like to understand why these ideas that I am sharing with you have not been done or considered. Surely there is something I am missing…

By the way, there is a codepen example, so it wont be too boring.

In summary, I am curious about 2 approaches to CSS selectors:

  • Attribute selectors: [attr]
  • Wildcard selectors: [class*=”-h1"]

However, the following techniques I am yet to find in frameworks or used as official methodologies. Its very simple and would have expected a framework of some sort to have evolved, even for a small minority of front end developers.

Heres what I want. A quick and simply way to style an element with a range of predefined styles. Here are some ideas of how I imagine the html aspect to work:

<h1 uppercase red>Red Uppercase Heading</h1>
<span bold italic>Bold italic</span>
<span h1 uppercase>Uppercase Heading, not bold</span>
<span heading>Custom heading</span>

So the idea is to simply add the empty attributes of what I would like for the element. So if there was a theme.css, all these styles could be defined like so:

[uppercase]{
text-transform: uppercase;
}
[italic]{
font-style: italic;
}
[red]{
color: red;
}
[h1]{
font-size: 18px;
line-height: 20px;
}
[heading]{
font-size: 18px;
line-height: 20px;
color: red;
font-style: italic;
}
...

I like this. Its so simple. I could just add whatever tags I want to style. And whats cool is I can add it anywhere in the tag. I do not need to add it to the class attribute.

HOWEVER, its also kind of frowned upon. And apparently can become risky. Mainly because browsers might add a new attribute which could affect functionality and potentially styling. But that I am not worried about really. I personally trust that most of the tags used would not be used for anything particular. But there could be a conflict if some framework, JS or CSS, happens to already use these tags. Then it could be an issue. But there is an easy solve for that:

<h1 typo-uppercase typo-red>Red Uppercase Heading</h1>
[typo-uppercase]{
text-transform: uppercase;
}
[typo-red]{
color: red;
}

Simple, add a prefix. I’d probably want to make it shorter though because as the tags get longer, the less interested I am in using this technique. I would maybe go with “t-uppercase” for instance. However, the prefix puts me off. Just reminds me of the super fancy, real-dev techniques and frameworks. I want things so simple that you almost cringe.

So, I have considered that a lot of people would probably stand firmly against this. Maybe because its too simple and it shows no skill. Or a lack of understanding of the web in general. That is why I tried to explore another way:

<h1 class="typo-uppercase-red">Red Uppercase Heading</h1>
<span class="typo-bold-italic">Bold italic</span>
<span class="typo-h1-uppercase">Uppercase Heading, not bold</span>
<span class="typo-heading">Custom heading</span>

I’ll use SCSS for the real devs:

[class^="typo"] {
&[class*="-h1"] {
font-size: 28px;
line-height: 32px;
}
&[class*="-bold"]{
font-weight: bold;
}
&[class*="-red"] {
color: red;
}
&[class*="-italic"] {
font-style: italic;
}
&[class*="-uppercase"] {
text-transform: uppercase;
}
&[class*="-heading"] {
font-size: 18px;
line-height: 20px;
color: red;
font-style: italic;
}
}

Now this technique intrigues me a lot more. I realised that the order of the wildcard selectors are not a factor. Both of these classes would do the same thing: .typo-uppercase-red and .typo-red-uppercase

In addition, the prefix is only required once. It is not needed for each style, yet the styles are all dependent on the prefix. Win!

Here is an example of how I would use it for easily adding padding to a container:

<div class="padding-bottom-top">Padding top and bottom</div>
<div class="padding-top-bottom">Padding top and bottom (same styling but no dependency on wildcard order)</div>
[class^="padding"] {
&[class*="-top"] {
padding-top: 15px;
}
&[class*="-bottom"]{
padding-top: 15px;
}
&[class*="-left"]{
padding-left: 15px;
}
&[class*="-right"]{
padding-right: 15px;
}
&[class*="-vertical"]{
padding-top: 15px;
padding-bottom: 15px;
}
&[class*="-horizontal"]{
padding-left: 15px;
padding-right: 15px;
}
}

This gives us a single utility class for applying padding to any side of the div. Without needing a specific order. Of course we can compress it to be more like: .pad-t-b

This is as far as I have gone with this idea. I almost feel like there is potential in these ideas to actually be useful, but I wanted to see if I can reach out to others to have an open conversation about it. I do have a bit more that I would like to share and explore but this is the gist of it.

I am holding thumbs someone even reads this and feels the urge to respond.

Oh, and here is the codepen example demonstrating the simplicity of the idea:

https://codepen.io/awinhayden/pen/OBYjjL

I’m Adrian by the way.