If I navigate the website I'm developing I can keep track of any CSS directive that is being used in that page.
For example I could associate the directive written at line 1 of main.css to the page Index.htm
I've got a CSS file which is 4000 lines and I would like to split it.
The best way would be to separate it for pages.
Every CSS instruction which is specific to only one page could be moved.
How could I accomplish this task?
You could use a tool like uncss for every page in the app and diff the outcome to see what has been removed/not used on that page.
Edit:
You could automate the process a bit more using Grunt with grunt-uncss or Gulp with gulp-uncss. However, I am unsure about the diffing part.
You would need to copy them to a new css file, I would suggest naming each CSS file with specific naming for what the code inside actually does, such as you could have a layout css file, if all pages have the same basic layout. If particular pages have a large amount of css that is only used by them you could consolidate that all into one file. You would need to do full testing once done to ensure all pages have the cs files they need (and none they actually don't need). with 4000 lines it will be a large task but will be far more manageable in future upgrades/revisions
Related
is it possible to have a website that contains 2 app.css files?
I have a website and want to build a new (but related) website under the same domain. So I guess you can consider the main hub more like a landing page of sorts, and then the two related "websites" would then branch off of the main domain. Each of the websites are going to be styled differently though. So I'm unsure of what is best - to create a single combined app.css file and list each style according to each website, or can I create a new one that sits beside the original?
You can do a separate css file for each site, or have them both point to the same file. Since you want different styling between the 2 sites, I'd recommend a different css file for each site.
You can create and use as many css file as you want. If both sites will be style differently, create a file (or even multiple files, them import) for each site.
Though the websites are related, it's better to create two separate css files as it will be easy to make changes(in future) to styles and debug incase of any issues. It also increases readability of the code so that in future if you may have to refer this code for any modifications, you can understand it easily and make required changes :)
I'm building a website using Wordpress on Localhost. I'm learning the structure of the webpage by editing the HTML and CSS using Google Developer Tools. I want to know which file I'm editing and where on the hard drive it is located.
I have edited the height and width of an element inside the circle marked but when I try to save the file, it asks me for a location to save which I'm unaware of. One the left is the HTML code, how can I locate the file with that HTML code?
how can I locate the file with that HTML code?
You can’t – not really, not from within your browser, because your browser doesn’t see individual “files”, it only sees the complete HTML source code of the one resource it requested, that might have been composed of lots of different files, plus functions that generate HTML code dynamically – so that actual piece of HTML code might not even be written as such within a file.
You might be able to identify different sections of the HTML document though – and with a little knowledge of the template structure and output logic of WordPress, you should be able to find out what the relevant file to look in might most likely be.
Another thing I’d suggest, is that you get yourself an IDE that allows you to search across all files in the whole project folder – and than look for certain class names, IDs etc. on the HTML element in question or near/above it. If you search for those, you might get lucky as well. (Although a lot of times those classes/IDs might be output dynamically as well, so you won’t find them inside of a template file as such.)
Especially with little knowledge of WP template structures, it might take some trial and error to find the piece of code and file you are actually looking for.
The Google Developer Tools is not a code editor, so whilst you can try out different options I'm not aware that you can save it, and if you can, I wouldn't say it's a good idea.
Wordpress uses PHP, a language which HTML code is embedded with PHP code. For example the code <a href='<?php echo(link1);?>'>Home</a> has had the href attribute embedded with a PHP variable. If you want to find the HTML code, look at the PHP files in your Wordpress directory, index.php is the landing page code.
One thing to bear in mind is that not all the HTML code will be included in one PHP file, it is usually included from several files, and much of the content will be in the wp-content directory, keep an eye out for the PHP include or require commands.
Google developer tool is just to check, once you are done with the editing, You have to copy your css code- and paste in your css file.
To get the css file look at the below image.
Hope your question got clarified!!
I was wondering how I can call multiple external css files at once instead of calling each individually. I want to do that to avoid the request number and minimize it to one per multiple external css files.
I tired the following, but didn't work!!
<link rel="stylesheet" href=" http://statics.mydomain.co/style.css,functionstyle.css,widgets.css,edges.css,options.css,tags.css" type="text/css">
I thought it is a lot easier than that!!
any idea what I'm missing here!!!
Two options.
1. Css #import
#import url(stylesheet.css);
See documentation.
NOTE!: The browser actually does make multiple calls here, it is just hidden from the HTML
2. PHP
Use minify to shrink, cache, and combine your CSS/JS files.
Here is a minify tutorial
Here is a list of more compression tools.
In order to do what you're doing, you are going to need some kind of server side script that combines.
Alternatively, just combine them all manually or use something like grunt to combine them all.
Once you have sorted out all the CSS rules and you are ready to go into production, you should combine all your CSS files into a single file and then minify it.
You can then link to a single file from your pages.
As a start, read the previous question, it has some useful references:
Any recommendations for a CSS minifier?
You can use the #import statement inside your 'master' css, to make it include multiple files at once. All you would have to do is link to your one master file in your HTML.
However, this will not limit your requests. As long as they are separate files, you will have to do separate requests.
For real performance improvement you would have to merge the files into one bigger file. There are some good tools out there. I prefer LESS, which is a precompiler that does lots more, but can also merge multiple files into one (minified) master css
Even if you can minimize your html code to only one line, the client has to load them all individually 'cause they still are in different files on the server.
If you want to combine the Styles into one file just do it manually or on server-side.
Furthermore you could minify your CSS with an online tool to make the file's size smaller.
When I design a page I will create a CSS file so all of my selectors will store in this file, for first page, inner pages and all another pages which I have in my website.
But in this mode, when I trying to check my site in GTMetrics.com or webpagetest.org or another websites, they inform me I have many selectors in my css file which I didn't use in page so they asked me to optimize my css file ! but I use that selectors in another pages.
Now my question is, what is the best way to store css selectors ? should I have a separate css file for each page and load with link in each page or should I have separate css file and load with #import in css file or store all selectors in one file (like now) ?
First of all, those sites are just tools to help you optimizing your site. They don't know everything, that's why they say you use a lot of unused selector.
I don't know how much the styles are changed and on what pages. But if your styles are somewhat equal with minor differences, you should keep those in one file.
If, for instance, the homepage is completely different from the other pages, or if some pages have big differences, you should use one global stylesheet and multiple page specific stylesheets.
Read more about this topic in this great article by CSS guru Chris Coyier: "One, Two or Three"
one css file is the best way
if you make separate file for every page
on every page a unique file loads
so the time increases and performance decrease
one css file caches itself and dont load everytime
so you done right
ignore the warnings
I have an XML file that I am creating an XSL stylesheet for.
What I would like is to have two frames and do two passes on the data, the first would create a Table of Contents in the left frame, and the second would have the body of data in the right.
I can do the two passes, the problem is putting them in separate frames. The frame HTML element takes in a source; I can't put my source directly in there.
I can think of a few ways to get around this, none of which I'm thrilled with, so I wanted to see if anyone had found a way to do this.
As said before, you need 3 files for this.
In XSLT 2.0 you can generate multiple output files from one xsl stylesheet using the xsl:result-document instruction.
In XSLT 1.0 you don't have that function, but depending on the processor it might be possible. For example for Xalan see http://xml.apache.org/xalan-j/extensions_xsltc.html#redirect_ext
If you want to use frames you need three separate files.
The frame file. This is just a strict HTML file
A file for your table of contents
A file for your content
The first one is as specified just an HTML file. The second two are XSL files that will eventually turn into HTML. A good tutorial on frames is here at W3Schools.
EDIT: The more I think about this, the more I dislike the solution. It requires the XSL parser to be run twice for each time the initial page is served
Have you thought about using CSS or tables to do your layout? There are some really good open source CSS templates flying about here on the interwebs.
This was relatively stable data that would be generated by a script, so what I ended up doing was creating separate stylesheets for the TOC and the main window, then using those to generate html files for each of them after I generate the html.
Then my main page was just a static html page that referenced these generated html files.
There's probably a better way to do it, but this is an internal reference, so this is enough to get me going.