So far I can't find a question or fix for this. I'm sure it's something simple I'm missing.
I have a style bundle with a bunch of minified CSS, and I am decorating HTML elements with the classes inside. Everything is working great.
Intellisense and ReSharper however are both bugging me about the CSS the classes being unknown. I'm guessing this is because they cannot peek inside the bundles.
Question: Is there a way to fix this?
<!-- Style Bundles in HEAD tag-->
#Styles.Render("~/bundle/style/css")
#RenderSection("styles", false);
<!-- HTML elements in BODY tag: "row" is an unknown css class -->
<div class="row">
<p>Lorem ipsum</p>
</div>
Update: Visual Studio 2012. LESS conversion and intellisense works for single directly referenced files. My situation is that intellisense breaks when referencing a LESS bundle.
Update 2: Here's the code showing the BundleConfig.cs since it isnt clear
var customStyles = new Bundle("~/bundle/style/css")
.Include("~/Content/normalize.css","~/Content/*.less");
bootstrapStyles.Transforms.Add(new LessTransform());
bootstrapStyles.Transforms.Add(new CssMinify());
bundles.Add(customStyles);
Notice we are using Bundle not StyleBundle which is necessary because we want to specify the LessTransform() class and skip the built in CSS transformer. The LessTransform object is a custom object that simply reads in all the LESS content and concatenates it on a StringBuilder and then calls dotless's converter... out comes a huge CSS string that is minified and returned. The question is why cant VS or ReSharper peek at the returned CSS and help check class styles?
Here's a post on jetbrains blog. It's a bit out of date, but Jura went on record stating that there were no plans on supporting LESS (yet).
User:
Are there any plans to support LESS? I don’t care a whole lot about full support, but it would sure be nice if it could at least bring highlighting and code completion support into .less files and have it handle nested rules.
Jura Gorohovsky :
No, no such plans yet. Can you point me to a publicly available
project that uses LESS extensively so that we can take a look at it to
determine the scope of work?
Link
Late edit:
Web WorkBench from Mindscape may provide what some people coming to this thread are looking for. They are very response to bug fixes, and have been making some solid improvements to intellisense in the LESS world.
Have you installed the js extension to Visual Studio 2012? Go to Tools | Extensions and Updates and then SDKs if you have many installed.
Don't think the bundling has any affect on your intellisense, I've tried with and without and my intellisense is still there. Ensure you css stylesheet is included in your solution and maybe test with a more specific class, e.g. "onebeatconsumer" instead of "row" (there could be a clash somewhere with this)
If you are using LESS, this could most definitely be your issue as it visual might well not be able to parse LESS syntax as it only generates the full styles at runtime. Does styles in a standard css stylesheet work okay for you?
Related
As stated by Rob Dodson, style tags are now unavoidable with Web Components. I am trying to find a way to use LESS with this new tecnhology without having to paste the compiled CSS in my HTML document everytime I change something in the LESS file . Is there anyway to achieve that?
I am using Polymer.
Thanks!
Laurent
You can make the client compile the LESS to CSS , you should definitely take a look at this :
http://lesscss.org/#client-side-usage
It is advised to compile it yourself to css in a production environment though !
Doing this client-side hardly seems like the corrent solution, especially at scale. For instance, do you really want 1000 web components in your app all including LessCSS and compiling on the client side?
Just compile server-side and include the compiled version in your html import. Apps like DocPad, make this a lot easier. For instance:
src/documents/components/my-component/my-component.css.less is your source file, and is compiled to out/components/my-component/my-component.css, which is accessible at /compoennt/my-component/my-component.css.
We use this workflow to also make use of javascript pre-processors like coffeescript, as well as post-processors like css auto prefixer, and bundlers like Browserify. See: https://stackoverflow.com/a/23050527/130638 for more info.
Simply compile your less and embed the generated CSS file via good old link tag.
I don't think that rob wanted to say that using style tags is the only way to go. You can still link to external stylesheets as you always did.
Why don´t you compile on server side using php compiler? Have a look here - http://leafo.net/lessphp/ -
To let you know, i´m using this compiler on my projects, on the server side without any kind of problems!!!!!!! :) IMO, it´s better to have the compilation work on the server side. I´m not totally 100% sure, but i think IE8 don´t recognize text/less
The way I have done this before is have individual .less or .scss file for each component and have it compile into the individual .css file which is then called into the respective component file. and finally vulcanize everything into a single file.
Incase you want to use a single CSS file, then use //deep// combinator or ::shadow pseudo elements in the CSS.
If you able to create the custom elements without using ShadowDOM then you can simply have all your less merge into a single CSS.
Honestly speaking I was unable to create a wc without shadowDOM in polymer. There is a long conversation on github on enabling / disabling and hacking a way to create a wc without shadowDOM here https://github.com/Polymer/polymer/issues/222
One solution would be to have the preprocessor translate .less files into .css and then linking them inside Polymer components, like explained in the official documentation: https://www.polymer-project.org/1.0/docs/devguide/styling#external-stylesheets
Unfortunately this is deprecated. So the other way to go could be to have another step that wraps the preprocessor-generated css files with a dom-module: this way you can follow the Polymer way including the style module inside your components, or using the css file compiled from less if you do things outside Polymer components.
I'm using Gulp for my build process and I found this module very useful:
https://github.com/MaKleSoft/gulp-style-modules
It creates, for every .less file I have in my sources, an .html file with a dom-module wrapped around it, ready to be included in the components' styles.
In my asp.net mvc application, I'm using bundling for css. When I created a new css stylesheet and used the same id names as another page in the application, the styles on the first page were messed up.
I must be doing something wrong as I know that the same id can be used on different pages, but I don't find others having this problem when I searched the web on the subject.
Please help. Thanks.
The two CSS files are styling with the same ID (yet intended to style different pages) are bundled together and causing styling problems on those IDs.
This is because the page is loading the bundled CSS file then all the styles (from both CSS files) are applied to that ID regardless of page. The solution is to only load the relevant CSS file (and not bundle) or of course use different IDs.
id re-use throughout an application is unusual and often overcome by using class instead.
^^ summarized from comment discussion
You should be able to look in your developer tools (firebug, chrome devtools) and see which styles from which stylesheets are messing things up. Or am I misunderstanding the problem?
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.
I know that there are questions regarding this same topic, but for HTML. What are some good conventions in regards to using external stylesheets in a Flex app.? How would you break up the stylesheets (names of stylesheets and what they include)?
Flex compiles the external CSS file when you publish your project.
There is a way to load CSS at runtime using Flex; it can be done by compiling CSS files into SWF files and load them at runtime using StyleManager.loadStyleDeclarations.
See the LiveDocs on Stylesheets at Run Time for more info.
Some conventions we use in organizing stylesheets:
Have one main.css stylesheet that holds all of the data for skinning the base application.
Have one fonts.css stylesheet to store all of the fonts in the main app, because these can get quite messy.
The main.css stylesheet is included in the main swf via the <mx:Style source="main.css"/> tag. We load our app with as little as possible, and once everything is loaded, if we need to immediately show some text (sometimes we just have a video playing if it's an advertising site), we fade/tween in the main elements and load the fonts.css via StyleManager.loadStyleDeclarations at runtime.
If we have an admin panel, we have an admin.css stylesheet which we load at runtime because the main app doesn't need it.
We don't need to divide up the CSS anymore than that because we usually create a whole set of skins in a Theme, so the stylesheet is just applying those skins to components and is pretty lean (using Flex 4). I tend not do divide stylesheets into anything smaller (like "pages.css", "comments.css", "popups.css", or even "controls.css", etc.) because it would be overkill and too much to manage for little in return. That's common with HTML, but that's because HTML requires CSS for nice presentation; Flex could do without CSS entirely.
When developing, one of us usually develops most of the skin right away (having a default wireframe setup, like those found on ScaleNine as they do the photoshop/flash/after-effects. There's no way to not have to recompile the css swf if you make changes. But if it is loaded at runtime, you only have to recompile the css file and not the main swf, which is useful but not really useful during hardcore skin development.
I tried keeping the main stylesheet separate during development (in a custom Theme), and it made development a LOT harder, because I had to recompile the css separately every time I made a change and sometimes I had to recompile the main app too, and there were strange and hard-to-track-down bugs, etc. Then I was compiling two different apps. So I recommend keeping the main css file part of the main app.
If you wanted runtime css without having to recompile anything, try Ruben's CSS Loader and check out the source. But that would come at a runtime performance cost.
Flex is not something I've dealt with, but I did some research. It looks like the code to call a remote stylesheet is this:
<mx:Style source="com/example/assets/stylesheet.css" />
Flex Quick Start: Building a simple user interface: Styling your components says this:
Note: You should try to limit the
number of style sheets used in an
application, and set the style sheet
only at the top-level document in the
application (the document that
contains the tag). If
you set a style sheet in a child
document, unexpected results can
occur.
The implication of this seems to be that multiple stylesheets are not really possible. It sounds like what you want to do is organize your stylesheets, check out Organizing Your Stylesheets and Architecting CSS for some ideas for approaches. It looks like you have classes and basic tags, but the W3C stylesheet specifications are different from the Flex stylesheet specification.
As a non-Flex developer, Namespaces looks interesting as a way to organize namespaces: How to use the new CSS syntax in Flex 4.
Any recommendations on a way to find what aspx files use what CSS class. Right now I have one gigantic css files and I would like to break it up into a more organized fashion simply for sake of maintainibility.
I was wondering if anything existed that could yield a report such as this css class is used in file1.aspx, file2.aspx, etc...
I guess I could write a little script to do this, but if there were any free apps out there already written, that'd be swell.
Maybe this will help:
http://www.dotnetsurfers.com/Blog/2008/10/02/RemovingUnusedCSSClassesFromYourWebApplication.aspx
The guy wrote a small utility that parses the CSS file and your application folders to determine which css classes are not being used.
There are a couple of Firefox plugins that can help you. These are Page Speed from Google and Dust-Me Selectors.
Page Speed will give you a list of CSS selectors NOT used on the page you are analysing, while Dust-Me Selectors will give you that and also a report on CSS selectors that ARE being used. Both reports have their uses.
With Dust-Me Selectors you can also get it to spider a whole site and detect any selectors that are not used anywhere on the site.
I would say that you should try to consolidate CSS into as few files as possible in order to reduce connections needed to load the CSS dependencies; this will speed up initial page load time.
You should also try to leverage a Master Page at least for common elements such as loading jQuery, CSS, etc.
Finally, I would use GREP for Windows and add it to Visual Studio as a Toolbox item to do simple text searches like this:
http://gnuwin32.sourceforge.net/packages/grep.htm
If you have the project open in visual studio, a super simple solution could be:
In visual studio: CRTL + SHIFT + F
Find what: "class={css class name}"
Look at these file types: "*.aspx"