Access CSS Variables from a Database via db‑connect

2^nd April 2021 edit:

It should ‑ I hope ‑ have been obvious that this was intended as a light‑hearted April Fool's joke rather than anything more serious. From the messages I've received since putting it online yesterday morning, it clearly piqued some interest within the front‑end development community and even made its way onto Reddit and Twitter.

To be clear: at the time of writing, there is no such thing as db‑connect in CSS, and storing database access details in client‑side code like CSS is a truly horrible idea. If you really are set on the idea of storing CSS in a database, take a look at this very clever solution on Stack Overflow from 2013.

What follows is the original article from yesterday (1^st April)...

Did you know it is possible to store custom CSS properties like colours in an external database (at the time of writing, supported are: Oracle, MySQL, PostgreSQL, and IBM Db2), and then access them directly from your stylesheets using the db‑connect properties?

In the past, I have found this approach extremely useful when building up a multi‑brand codebase template library where the only difference needed between stylesheets for different brands was the db‑host URL.

Although admittedly browser support is not (yet) very good, this is a technique that rarely gets much ‑ if any ‑ attention and many seasoned developers I've spoken to have been unaware (and then surprised) that it is even possible.

This is a feature wholly outside of CSS preprocessors like LESS or Sass, and can literally be written directly into stylesheets as basic, plain, vanilla CSS. For example:

.component {  db-host: url('localhost:1433');  db-type: mysql;  db-username: 'username';  db-password: 'abcd1234';  db-query: 'SELECT * FROM Styles';  color: db('black');  background-color: db('mid-blue');  &--element {    // access to variables from db are also available    // within nested selectors    border: 0.1rem solid db('dark-blue');  }}

What this does is create a db object which contains each named cell within your query results, so you can use it to access ‑ for example ‑ colours you have stored away. You could go as far as to store entire property values (it doesn't just have to be colours), so the .component‑‑element selector could ‑ if you have the property stored correctly (as a string) ‑ look something like:

&--element {  border: db('element-border');}

Much like border, you can also use the db‑connect, which is a shorthand property for:

• db‑host
• db‑type
• db‑username
• db‑password
• db‑query

Note that ordering is important here, and all are required, except for db‑query, which I cover in more detail below. The first example selector above would then become:

.component {  db-connect: url('localhost:1433') mysql 'username' 'abcd1234' 'SELECT * FROM Styles';  color: db('black');  background-color: db('mid-blue');  &--element {    border: 0.1rem solid db('dark-blue');  }}

Do bear in mind that db‑query can become particularly complex depending on what type of database you are using, where the data within your database has been stored, and how you are choosing to access it. For this reason, it is possible to omit db‑query from db‑connect and then declare it as a separate property, in much the same way you can do with any other shorthand property.

See here for documentation for SQL commands as an example of how this property might look, bearing in mind of course that within CSS, you are limited only to accessing data within the database rather than setting or deleting it!

Of course, CSS variables have very quickly made this way of storing and selecting custom CSS properties obsolete. Nevertheless, it is a cool trick and one that I usually find developers are entirely unaware of...