0

I've a web app with a bunch of pages. Each page have a few of modal windows.

Such page with modals have structure as below:

<div class='page1'>
     <p>Page 1 content here</p>
     <div class='modal'><p>Modal window</p>
</div>

The question is how to separate css styles of modals and pages, i.e. to make page style not affect modal style.

For example, a style p { font-weight: 900 } will affect both page and modal paragraphs.

To clarify: the question is not about how to write css selector which narrows selector by div.page + p, its question how to organize HTML for widgets as modals, which are contextually bound to certain elements/pages/components.

A simplest solution would be to put all those modals outside of the page components, but that would reduce readability because it would become not clear to which context modal belongs.

setec
  • 15,506
  • 3
  • 36
  • 51
  • use `.page1 > p` and that will only apply to the `p` tag that is a direct child of `.page1` and not all of the child elements. - http://stackoverflow.com/a/4459872/28004 – balexandre Aug 07 '14 at 08:39

2 Answers2

1

Whilst you could define a bunch of styling to remove every possible style that could have been set within the page to clear it ready for your widget, this isn't a very good approach if you have control over this code structure.

A much better approach would be to use CSS semantically and define a set of class names that apply to your page styling and not use the generic tag selectors unless you actually want every tag in your markup to use that style.

p { somestyles: here; }

Should mean every p has to do obey this, regardless of where it comes from, widgets and all. If you want ps within my content to obey my style then write

.mycontent > p { somestyles: here; }

and have the markup be

<div class="page1 mycontent">
     <p>Page 1 content here</p>
     <div class="modal"><p>Modal window</p>
</div>

Say what you really mean and the CSS will flow more naturally.

Edit

An iframe will stop the cascade, but you're completely removing the widget from the markup then (to a different file), which it sounded like you didn't want.

To me, modals are separate to the markup that calls them and can be placed elsewhere, you could include a comment where it is opened if a developer needs to know that information. One modal could legitimately be re-used by many elements on the page.

As for stopping containers affecting their contents, that's what they're for in the land of CSS, but if you really want to work around it then you can create a "reset" class that sets all of the style properties back to the way they were before you applied your styles. There's not a way to just turn off cascading though.

Klors
  • 2,665
  • 2
  • 25
  • 42
  • Thats partially answers the question, but still i wonder are there ways to completly avoid container styles affect modal styles without all those micromanagement. Perhaps it could be done with some way to prevent cascade, maybe with iframe or some HTML5 features. – setec Aug 07 '14 at 09:15
  • @setec I had to update the answer as my comment response was too long... :) – Klors Aug 07 '14 at 10:07
  • Thats good answer. So basically i can a) consider it's problem of architecture, and review modals to make them context-less and b) create 'reset' class (i suppose it could be automatically created with some less/sass addons, gotta look for it). Also i've found a 3rd option, to use narrow css scopes but it makes code less readable. – setec Aug 07 '14 at 12:48
  • @setec Thanks. a) I prefer to use them that way, then a single edit modal could be used to individually edit 20 different fields, or a single full-size image modal can show any thumbnail on the page. b) LESS/SASS would certainly make that easier to manage. c) Yes, generally it's good practice to try and keep the scope of the CSS as narrow as it can be whilst still fulfilling its purpose, accidental side-effects are common if we don't. – Klors Aug 07 '14 at 13:06
-1

Use .modal p { font-weight: 900 } or .modal > p { font-weight: 900 } for modal elements!

Use .modal before each element of modal that will not create confusion!

For more details learn css selectors its fun CSS Selectors

selectors css

Suresh Karia
  • 17,550
  • 18
  • 67
  • 85
  • The question was how to hide styles from container block, from elements on modal block, which is inside of container block. Specifying any class on modal would't protect classes from container styles. And even more, thats actually not question about using CSS selectors to override/block style cascade, which is not possible anyway, it's question about structuring the code or hacks to stop css cascading. – setec Aug 07 '14 at 09:12