With Polymer (or custom elements in general), I've seen most examples use a separate <link> element in each element to style it, but this clearly doesn't scale. What's the usual way to deal with this? Can you just have 1, or a small number of css files, referencing the same file in multiple element definitions?
Related
I just got in a large company and given a task for writing CSS documentation. The CSS file is very large and I don't know how to understand specific css classes without looking at the visual element it applied to. Is there a way to find the css elements across different pages?
I built an extension which, whenever user visits some specific sites, I inject my script on the top of there web pages. I used
document.body.insertBefore(wrapperDiv, document.body.firstChild)
to do so.
Now problem: CSS of injected script gets messed up for each and every site(differ from one site to another).
How should I maintain single css structure for all sites?
You should be able to solve this problem by using unique IDs for your html tags with CSS.
That is, if your DIV CSS properties are interfering with their DIV CSS add a #uniqueNameHere ID to your DIV and set the CSS for the #ID.
This page on the use of the !important keyword may be useful too.
http://css-tricks.com/9462-when-using-important-is-the-right-choice/
Use unique selectors for your elements (be it classes with specific prefix or similarly constructed IDs), but you probably try to include CSS along with your script, which may not be a good idea.
In some cases the inline styling is the best idea - it will overwrite all the styles for your elements and will make sure the outlook of these elements is consistent across different pages.
So, I would say, go with inline styling.
For documentation on how the styles are overwritten in CSS 2.1, please see the following page: http://www.w3.org/TR/CSS21/cascade.html#specificity
I am designing a website, and am going to be implementing a sort of say "Wiki". I am not doing a script, none of that, it's going to be pure XHTML and CSS.
What I want to know from the StackOverflow community, is how I should approach this scenario.
I want to be able to pull out an external stylesheet, in which is lightweight, while maintaining the style sheet for the overall design (because, like I said, it's being implemented).
So instead of basically copying and pasting the style sheet used from the entire design, I want to be able to call and external style sheet, in which I can call for the specific divs used in the Mini Wiki.
I want to know how I can call that said style sheet, before the divs that are going to be called in the HTML document, so the following divs can have the custom styles applied through the specified external style sheet for the Mini Wiki.
Is that possible? Is it possible to call an external style sheet in a div, allowing the styles to override the default style sheet of the page? I am confused and would love some help. I want some feedback and some ideas.
No, this isn't possible.
A stylesheet can only be applied to an entire document.
You can limit a rule-set to a section of the document by using a descendant combinator.
I have made some templates on wikia.com, which contain only CSS code (key:value;).
My problem is having another template use these style templates in a style attribute tag.
style="{{MyTemplateStyle}}"
This code does not evaluate as expected. The CSS code is outputted before the element and the style attribute is not included inside the element.
Am I trying something not possible for a wiki ?
I merely want to be able to change styling on certain templates in one place, like regular HTML & CSS pages.
CSS styling specified from the style="" attribute always takes priority over any other css, even if you use !important in a CSS specification.
Therefore any edits you make to your CSS on Wikia will not ever override the CSS specified inside an attribute.
Kim, you were right to switch to classes instead of embedding in-line styles via templates.
The very idea of using templates suggest that this was going to be re-used in more than one place, applying styles to a group or, in fact, a class of elements.
This approach is much simpler to read and maintain (as you only have one, central place to edit), and also, if done right, will enable you to seamlessly change the colour scheme via Special:ThemeDesigner.
<div id="SideBar" class="sidebar mainbar">
I've just seen this in a .aspx file. Is this valid? Can someone point me in the right direction to learn what this does. I'm assuming its valid, but I'm not finding it in the css file. I am finding sidebar defined as a class, but not mainbar.
Thanks in advance,
Randy
This div just has two classes, which means it will get the properties defined under .sidebar as well as those under .mainbar
Sure, you can have an element implement as many css classes as you like. If there is no class defined in the CSS files it is possible that either:
The additional css classes have been removed from the styles sheets and the .aspx pages have not been refactored to match.
The css class is been used to identify the element(s) via javascript or some other scripting language.
As for mainbar not showing up in your CSS file, sometimes developers assign classes to elements and then reference those classes in javascript.
Yes this is perfectly valid. An element can be styled by multiple classes.
See this reference and this one which touches on which one takes precedence for duplicate style attributes.
CSS Tricks has a few other CSS tricks including having two classes.
Copy/Pasting the trick from the above site:
Usually attributes are assigned just one class, but this doesn't mean that that's all you're allowed. In reality, you can assign as many classes as you like!
Using these two classes together (separated by a space, not with a comma) means that the paragraph calls up the rules assigned to both text and side. If any rules overlap between the two classes then the class which is below the other in the CSS document will take precedence.
Beware of IE6 if someday you try to style an element using more than one class, it doesn't work like intended.
Googling "multiple classes ie6"
test case
No problem with id+class (like #anid.class ) or two selectors like .classA and then .classB but no .classA.classB