I’ve created userscript for Tampermonkey to style unvisited links with blue color, visited links with violet color, and red for hovered/active/focused links.

It was created primarily for my researches on Wikipedia.

Below are shown 3 implementations. The first one is very simple and shown just for demonstration purposes.

My actual question is about 2nd and 3rd implementations. I don’t sure which choose from them. Which is better?

1st and 2nd implementations

// ==UserScript== // @name         Test // @match        *://*/* // ==/UserScript==  /* Preferences =============================================== */  var links = 2; // Set to "1" to style only simple links (example: a:link) // Set to "2" to style also hidden links (example: a:link *)  /* Functions =============================================== */  function AddGlobalStyle(css) {     var head, style;     head = document.getElementsByTagName('head')[0];     if (!head) return;     style = document.createElement('style');     style.type = 'text/css';     style.innerHTML = css;     head.appendChild(style); }  function Links(blue, violet, red) {     AddGlobalStyle(         blue + '{' +             'color: rgb(0, 138, 206) !important;' +             'text-decoration: none !important;' +         '}'     );      AddGlobalStyle(         violet + '{' +             'color: rgb(180, 14, 180) !important;' +         '}'     );      AddGlobalStyle(         red + '{' +             'color: rgb(204, 0, 0) !important;' +         '}'     ); }  /* Main part =============================================== */  /* 1st way. Simple and works fine. Shown here just to show an idea ----------------- */  /* if (links == 1)     Links('a:link', 'a:visited', 'a:hover, a:focus, a:active'); if (links == 2) {     Links('a:link', 'a:visited', 'a:hover, a:focus, a:active');     Links('a:link *', 'a:visited *', 'a:hover *, a:focus *, a:active *'); } */  /* 2nd way ----------------- */  const plusX = s => s + ' *';  var args = ['a:link', 'a:visited', 'a:hover, a:focus, a:active']; var modifiedArgs = args.map(     s => s         .split(',')         .map(plusX)         .join(',')     );  if (links == 1)     Links(...args); if (links == 2) {     Links(...args);     Links(...modifiedArgs); } 

The resulting rules in the head section will be as follows:

<style>     a:link {         color: rgb(0, 138, 206) !important;         text-decoration: none !important;     } </style>   <style>     a:visited {         color: rgb(180, 14, 180) !important;         text-decoration: none !important;     } </style>  <style>     a:hover, a:focus, a:active {         color: rgb(204, 0, 0) !important;         text-decoration: none !important;     } </style>  <style>     a:link * {         color: rgb(0, 138, 206) !important;         text-decoration: none !important;     } </style>  <style>     a:visited * {         color: rgb(180, 14, 180) !important;         text-decoration: none !important;     } </style>  <style>     a:hover *, a:focus *, a:active * {         color: rgb(204, 0, 0) !important;         text-decoration: none !important;     } </style> 

3rd implementation

// ==UserScript== // @name         Test // @match        *://*/* // ==/UserScript==  /* Preferences =============================================== */  var links = 2; // Set to "1" to style only simple links (example: a:link) // Set to "2" to style also hidden links (example: a:link *)  /* Functions =============================================== */  // This function is the same changed function AddGlobalStyle(css) {     var head, style;     head = document.getElementsByTagName('head')[0];     if (!head) return;     style = document.createElement('style');     style.type = 'text/css';     style.innerHTML = css;     head.appendChild(style); }  // But this one have changed function Links(blue, violet, red) {     if (links == 2) {         blue = blue + ',' + blue + ' *';         violet = violet + ',' + violet + ' *';         redArray = red.split(',')         const plusX = s => s + ' *';         redNew = redArray.map(             s => s                 .split(',')                 .map(plusX)                 .join(',')             );         red = red + ',' + redNew;     }      AddGlobalStyle(         blue + '{' +             'color: rgb(0, 138, 206) !important;' +             'text-decoration: none !important;' +         '}'     );      AddGlobalStyle(         violet + '{' +             'color: rgb(180, 14, 180) !important;' +         '}'     );      AddGlobalStyle(         red + '{' +             'color: rgb(204, 0, 0) !important;' +         '}'     ); }  /* Main part =============================================== */  /* 3rd way ----------------- */  Links('a:link', 'a:visited', 'a:hover, a:focus, a:active'); 

The resulting rules in the head section will be as follows:

<style>     a:link, a:link * {         color: rgb(0, 138, 206) !important;         text-decoration: none;     } </style>  <style>     a:visited, a:visited * {         color: rgb(180, 14, 180) !important;         text-decoration: none;     } </style>  <style>     a:hover, a:focus, a:active, a:hover *, a:focus *, a:active * {         color: rgb(204, 0, 0) !important;         text-decoration: none;     } </style>