How to write page specific CSS in backbone js


Tags: css,backbone.js

Problem :

I have backbone application and wanted to write custom css applicable only for a particular page. Something like how we write in <style></style> tags in html pages. Is there a way to write similar code in the corresponding dust files in backbone js. I don't want to dynamically add css file in the view js files, because my page specific css will be one or two lines and it is different for every page.

EDIT:

I have jq editor as shown below and it gets rendered dynamically(hence, cannot write inline css) and it is used in multiple pages across my application and I want to control its height, width and other properties in a particular page. That is why I need write page specific css, this page is written in backbone js (.dust, view.js and model.js). enter image description here



Solution :

my page specific css will be one or two lines and it is different for every page

Since it's small, I don't think there will be a problem with loading this CSS before hand via a css file.

You can simply have a selector for each page and specify the CSS like:

#page1 .editor{
/*^---unique selector of page*/
  height:100%;
  width:50%;
}
#page2 .editor{
/*--------^---selector of editor*/
  height:80%;
  width:60%;
}

    CSS Howto..

    How to make a resizable menu centered on the middle?

    How do i set the relative path and folder paths in HTML and CSS from VS 2012?

    How to get a border around this polygon?

    How to prevent rightmost inline element from wrapping or overflowing in CSS?

    How to get background image from internal css using xpath?

    How to make a CSS transform affect the flow of other elements

    How to horizontally align a list of contacts?

    How to centre a div vertically and horizontallly?

    How semantic X/HTML can save time when we will write CSS?

    ExtJS - How to style disabled buttons?

    How to use jQuery for hover effects

    How to load .css file from parent directory with .htaccess rule?

    How to align more than one DIVs which list of letters to the center

    How to disable
    tags inside
    by css?

    How to slide in divs from off screen into absolute layout using CSS transitions?

    How to make a 2x2 grid of Div's in CSS?

    How to change the opacity background color of other two buttons once we click on a single button using css

    Clickable dropdowns - How do they work?

    How to load content in a “virtual window” like “LightBox”

    How to adjust the height of a series of DIVs by CSS

    D3 Line Chart Show/Hide Element, Variable Not Defined Error?

    How to target last 3 elements in a container using CSS :nth-last-child(n)?

    Sitefinity 5.3: How do I order my CSS?

    How can I add categories-authors-members area for commenting on my website? [closed]

    How to add javascript expression's output to my CSS?

    how to make css animation smoothly for full-screen page?

    How to have menu items streched in full width menu with css for any screen automatically

    How can I apply css to elements created with append()

    How to center two elements which are separately wrapped in ?

    CSS - How do I float one element to the right inside the other div?