What is the best way to establish personalized CSS styles specific to each subdomain?

Question

What is the best way to establish personalized CSS styles specific to each subdomain?

I am in the process of establishing a multi-tenant application with a single instance and single database setup. The backend infrastructure is built using Ruby on Rails, while the frontend is handled by a separate AngularJS app integrated with a Rails framework.

To identify the subdomain and consequently determine the tenant, I have implemented a resolve function on an abstract parent state. Once the specific tenant is identified, my goal is to access CSS variable values stored in a configuration file on the front-end. These values would then be utilized to generate the main styles.css file containing classes referenced throughout the project.

While I have heard that CSS pre-processors such as Sass and Less can facilitate this task, I lack experience with either one. As a result, I am currently struggling to configure this setup effectively.

If anyone could provide guidance or offer code examples to help me navigate through this challenge, it would be greatly appreciated. Thank you!

css angularjs sass less

Answer 1

Answer №1

Neither Sass nor Less will meet your requirements as they are pre-compiled before the browser loads them. Essentially, the browser only recognizes the compiled css file.

There are various approaches you can take to achieve your objective. I am not well-versed in Ruby, so my suggestions regarding server language will be general. These suggestions are not comprehensive solutions as I do not have full knowledge of your situation; rather, they are meant to provide some guidance.

The most effective method would likely involve using server logic to assign a different class to the body tag and then utilize that class to determine which styles are applied to the page. For example:

/* It's advisable to have fallback styles */
body {
  color: black;
  background: white;
}

body.style-one p {
  color: red;
  background: blue;
}

body.style-two p {
  color: blue;
  background: red;
}

<body class="style-one">
  <p>This text will be red.</p>

Another option is to modify the body tag's class using JavaScript, allowing users to change the theme of the page.

Alternatively, you could implement similar server logic to output a secondary <link rel="stylesheet"...> tag to load one of two stylesheets. This approach enables you to neatly separate a large number of rules for different themes into their own files.

One approach I've utilized (with PHP) involves generating the stylesheet dynamically based on GET variables and outputting it as a CSS file. However, this method may result in losing some browser caching benefits. Here's an example:

<?php
header("Content-Type: text/css");

if( $_GET['theme'] == 'one' ) {

  echo 'p { color: red; }';

} else {
  
  echo 'p { color: blue; }';
  
}
?>

a {
  color: green;
}

<link rel="stylesheet" href="style.css.php?theme=one">

Answer 2

Neither Sass nor Less will meet your requirements as they are pre-compiled before the browser loads them. Essentially, the browser only recognizes the compiled css file.

There are various approaches you can take to achieve your objective. I am not well-versed in Ruby, so my suggestions regarding server language will be general. These suggestions are not comprehensive solutions as I do not have full knowledge of your situation; rather, they are meant to provide some guidance.

The most effective method would likely involve using server logic to assign a different class to the body tag and then utilize that class to determine which styles are applied to the page. For example:

/* It's advisable to have fallback styles */
body {
  color: black;
  background: white;
}

body.style-one p {
  color: red;
  background: blue;
}

body.style-two p {
  color: blue;
  background: red;
}

<body class="style-one">
  <p>This text will be red.</p>

Another option is to modify the body tag's class using JavaScript, allowing users to change the theme of the page.

Alternatively, you could implement similar server logic to output a secondary <link rel="stylesheet"...> tag to load one of two stylesheets. This approach enables you to neatly separate a large number of rules for different themes into their own files.

One approach I've utilized (with PHP) involves generating the stylesheet dynamically based on GET variables and outputting it as a CSS file. However, this method may result in losing some browser caching benefits. Here's an example:

<?php
header("Content-Type: text/css");

if( $_GET['theme'] == 'one' ) {

  echo 'p { color: red; }';

} else {
  
  echo 'p { color: blue; }';
  
}
?>

a {
  color: green;
}

<link rel="stylesheet" href="style.css.php?theme=one">

What is the best way to establish personalized CSS styles specific to each subdomain?

Answer №1

Similar questions

The Label method in the Html helper does not display the id

Experiencing difficulties replicating two auto-scrolling divs

What is causing the ng-show function to malfunction after building with phonegap?

Can you explain the mechanics behind the animation of the upvote button on steemit.com?

Can you create different width sizes using two types in HTML?

The text alignment function of justify is not functioning properly

The HTML image link is adorned with a tiny blue checkmark underneath

The attempt to initiate the MongoDB server was unsuccessful. dbexit reported an error with code 48 within the MongoDB system

I've encountered a peculiar error that is new to me while using bootstrap and javascript. Can anyone shed light on what this error signifies?

What is the best way to style the currently selected option element in a select dropdown?

Maintain the basic structure while ensuring divs are properly aligned

Adding a default option to my AngularJS select box

Position the ion-radio element in the middle of the layout

"Need help on Tumblr: how can I make a div container wrap around a photo

How can you conceal an element once the ngHide animation has completed in Angular's ngAnimate?

Continue duplicating image to stretch header across entire screen

Struggling to create a photo grid design that meets my expectations

Achieving overlapping div layouts with CSS styling

Obtaining Master-Detail table data via WebAPI

Troubleshooting issues with adding rows to an HTML table