function structure with pure CSS

primitiveFunctionCSS.html

<style>
/* define a function */
.myFunction {
  border: 3px solid rgba(var(--baseColorRGB));
  background-color: rgba(var(--baseColorRGB), 0.2);
}

/* Global Variables (Default Parameters) */
:root {
  --baseColorRGB: 255, 0, 0;
}

.parameterPackage{
  --baseColorRGB: 0, 255, 0;
}

</style>

<!-- Call the function without any parameter (meanwhile default parameters are used) -->
<div
  class="myFunction"
>
  Output
</div>

<!-- Call the function with the parameter package -->
<div
  class="parameterPackage myFunction"
>
  Output
</div>
<!-- Call the function with a parameter -->
<div
  class="myFunction"
  style="--baseColorRGB: 0, 0, 255"
>
  Output
</div>

https://codepen.io/yarliganfatih/pen/gOdaRRg