Material UI uses JSS at its core and you sometimes need to override styles from their base components.
Example from Input: '&:hover:not($disabled):before'{ ... }
I cannot find this syntax mentioned in the JSS syntax docs, so it's hard to discuss with others without a common name. What is it called?
This functionality is made possible through a plugin for nesting.
The plugin itself describes this as "nested selectors", which is also usually the term you will find being used to describe it when searching Stack Overflow.
Related
I would like to create a borderless table in rst2pdf extension with Sphinx, but I can't seem to find a way to work around the stylesheet/css of the extension.
Any suggestions on this?
I just went through a "learning experience" with rst2pdf stylesheets, and while I may not have a complete answer for you, I think I can give you enough direction to get you started. A couple things I learned:
rst2pdf stylesheets are not CSS stylesheets, they are specific to rst2pdf and leverage (I think) some style directives from the PDF "language"; all of the source to the builtin styles can be found here
Custom rst2pdf stylesheets only need to define what styles you want to add or modify, or page templates that you want to modify
You can (and may well want) CSS and rst2pdf styles with the same name, if you want to style the same document elements differently when rendered as HTML vs. PDF
To see how the default table style for rst2pdf is defined, you can execute the command rst2pdf --print-stylesheet or you can look at rst2pdf/styles/styles.yaml - you could then create a custom style in your stylesheet like borderless-table using that information (you may even be able to use table as the value of the parent element and override the commands element, but that is just an idea). Once you have your custom style defined, you should then be able to use it in your .rst file with the class directive:
.. class:: borderless-table
+----- your table definition here ----+
Again, I haven't done this completely myself, so it's more of a partial solution or pointing in the general direction of the solution. rst2pdf is a great piece of software, but there are some devilish details that are not covered in the manual. Good luck!
I'm writing a Chrome extension that injects HTML into a displayed page. I want the injected HTML to have it's own style, protected from the CSS that may be present in the host page.
I've tried using conventional CSS, and still suffer from style corruption from the host page.
After watching the Polymer presentation from I/O 15, I was wondering if there are any new, Chrome-specific techniques that I can use to achieve this?
What you will want to look into is shadow-dom. This will enable you to create a widget/component (which would be your injected html). This would mean that the DOM tree for the widget/component is encapsulated and no external styles from the page will affect it. There is a good article on html5rocks covering this. You may also want to look into WebComponents. Bear in mind that this functionality is only available in the latest browser versions.
Two things that I currently use at my place of work are:
css-modules
react-css-modules
I use react at work, hence react-css-modules, but css-modules should work in your case. It's not Chrome specific, but we use them within the context of each component we build. Basically, like the docs state, a class of row would become something like table__row___2w27N. The breakdown of the built name is the filename of the CSS than the class name followed by a base64 hash of 5 char. I hope this helps.
One potential downside is Webpack would be required.
Here is an example of our component folder structure:
- component
- Component.jsx/js
- component.css/scss/sass
- component.test.js
I've been trying to figure this one out for a while, is there an type of image or url embedding for CSS or its language derivatives (SASS, LESS etc) that do not use this specific syntax?
url:(foo.png) # with or without quotation
I know that SASS can and does use
asset-url('foo.png', image);
but I am counting this as a match (due to my regular expression formula that this is for)
Specific things that I am looking for would be for instance how HTML handles urls with both href and src, though this is unrelated I would like to use it as an example due to the fact that it utilizes urls in different ways. Thanks for taking a minute to quiz over this one =)
CSS can only reference images by the url() function (even embedded image data is a data url). However, compile to CSS languages like LESS and SASS, are far less straight forward...
asset-url() is not a SASS native function. It's provided by the sass-rails gem, and so only available in the context of a rails application. So asset-url() is a custom function that is provided by a library. And you can even write your own function that abstract away calls to url() behind your own custom mixins.
If you want to find all image URLs referenced in some CSS, they only reliable way to do it is to compile it to CSS and then search through that, because that's the only way you can know for sure. And as a bonus, this approach will work for other CSS preprocessors that you havent written a scanner for, because all you care about is CSS.
I'm looking for suggestions or pointers to best-practices for segregating classes used for browser styling from those used for dom manipulation.
More specifically, we're creating a single-page, backbone.js webapp that utilizes jQuery extensively for updating page elements dynamically (adding, hiding and appending new content to the page). The problem we're running into seems to originate with the overloading of the class attribute - it's used for styling presentation, AND for identifying page elements for GUI app logic via jQuery. This causes problems when it comes to modifying styles as there is no obvious way to know whether a given class (or DOM element for that matter) is required by the underlying javascript application.
In other words, if someone naively changes or removes a class on a tag, assuming they are only modifying presentation, it breaks the application. I'm looking for a way to separate these concerns - to keep the classes used for jQuery selectors separate from those used for CSS styling. I'm assuming this is a 'solved problem' as we're obviously not the first to write a javascript heavy webapp. Is there a standard way to deal with this? Am I missing something obvious?
The good way to do it probably not to use css classname for binding JavaScript logic at all. HTML5 introduces a way to add custom user-defined attributes for tags. To do it you simply add attribute to tag but start it's name with "data-" prefix. For example:
John Doe
jQuery, starting from 1.4.3, have build-in methods to work with such attributes using .data() function. You can read about it in more details here: http://api.jquery.com/data/#data-html5
If it is necessary for your app to use classnames as pointer for some reason, then you can make following convention:
Classnames starting with "js-" prefix are only used buy scripts to identify html elements, and you can't use them for styling. So this way your elements will have multiple classes on each element (some for styling, some for logic):
John Doe
This way classes without prefix can be removed without concern, and you can be pretty sure that you will broke something if you remove class with prefix.
In my project i have a lot of css styles. Some of them are never used (not anymore). I check this manually with eclipse: i select text and then with "Search -> Text -> Project" i can find, if this style occurs only in the stylesheet or also in java files. Is there better way to check, which styles are currently used in my GWT project?
edit:
#Igor,Keith: thanks for the hint, but i'm not using the CssResource to insert my css file. Instead i use my index.html. And i want to remove the unused styles just for better overview. CssResource is not exactly, what i'm looking for.
If you use CssResource to inject your css file, GWT will handle pruning unused styles for you (just like it does in the case of unused code). It will also by default obfuscate it, so watch out for that. For a comprehensive explanation see the docs.
CssResource works best in combination with UiBinder. I'd recommend both - you even get cool features like compilation-time errors when you are missing a CSS style in your UiBinder xml files (or you misspelled it), among other cool/awesome things - again, check the docs for the full list.
GWT 2.0 added a feature called ClientBundle, which is a generic mechanism for bundling resource files such as images and CSS. If you bundle CSS files with ClientBundle (via the CssResource class), the GWT compiler can actually generate errors on unused CSS selectors.
The documentation is a bit rough, but here is the relevant part of the GWT docs:
http://code.google.com/webtoolkit/doc/latest/DevGuideClientBundle.html#Strict_scoping
In addition to detecting missing selectors, CssResource also supplements CSS itself, letting you use constants and conditionals within your CSS, even allowing you to specify different styles depending on which browser is being used. It also provides obfuscation and minification, among other things.
I'm still looking for a better solution. To solve the problem i've used the linux terminal instead eclipse for the search and that was faster.