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
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 :)
Is there any way to find which CSS tags and elements are related to the specific HTML page section?
For example: We have a large CSS file but few of elements are related to content in HTML classes, is there any way to find related elements and remove other parts?
How large is the CSS file? I can't think of anything else than splitting it to multiple libraries and then including a library in your page if it's required.
For example, if the page has a slider then it will have a CSS link to slider.css this might not be ideal when you send too many HTTP requests so you might embed the library as internal <style> CSS. I've seen many WordPress theme developers use that technique.
This shouldn't be a problem since minification and Gzipping reduce the filesize drastically and once the file is cached your users wouldn't need to wait extra time to load your next pages.
For Chrome
In the Chrome DevTools, there is an Audits tab that will allow you to run a Web Page Performance audit and see a list of unused CSS rules :
For Firefox
You could install one of these add-ons :
CSS Usage for Firebug
Dust-Me Selectors
CSS Usage
Dust-Me Selectors
I don't think there is. It would be really hard to do this, too, because your system could build up a page by including 500 different files of different languages. How could such a program know which of your files is included where and under which conditions?
The thing that I think comes closest would be using your DevTools to see which styles apply to which element and maybe by hand or in an automated way create a list of which CSS rules apply to which end-page (for example which URL endpoint) element. But! Even then it would be hard, because it would be really hard for a program to find out which styles are dynamically added to elements (for example Javascript could add/remove classes when a user performs a certain action).
I am building a personal homepage. I have 4 HTML pages and only one CSS sheet linked for all of the pages. That is, inside a single CSS file I have set up layout for all different pages.
[In fact, each page has pretty much the same layout, only the contents and their style looks different. And my website isnt that advance.]
Is it a good practice? Or I should create separate CSS for each page?
An example of that what I have done:
page-1.html:
<link rel="stylesheet" type="text/css" href="design.css">
page-2.html:
<link rel="stylesheet" type="text/css" href="design.css">
design.css:
/*
.......
*/
Just have 1 css file for something so small. When you get into building larger sites you can split your style sheets up into modules.
Have a read through the Scalable and Modular
Architecture for CSS approach as it's a solid way of thinking before you get to a level where you can build out your own css architecture.
Your example shows you using one design.css file for your entire website.
Generally, it is better to have one single .css file containing data for all pages for 2 reasons:
You will allow browsers to cache .css files thus resulting in faster loading times;
It will ease the maintenance process.
I would advise you, if you really want to divide .css in separate blocks to use CSS' #import to divide blocks of code f.e form styles and so on.
It's a good practice. As you said that
In fact, each page has pretty much the same layout, only the contents and their style looks different. And my website isnt that advance.
So keep just one CSS file. Reasons:
It's easy for browsers to keep the cache
It's better for maintenance, as you have all your design rules in just one place.
As your project is small, the CSS file is not so big at all.
If you want to separate the files for organizational reasons, I will suggest you to read about CSS Preprocessors like Less or Sass. With them you can set your styles in separated files and join all of them before the releasing.
There's not universal best practice for doing it. Generally for large projects, it is recommended to separate css among multiple files for debugging and maintenance during development. As your personal website doesn't seem too complicated, it doesn't seem reasonable to separate them out. This type of question has already been answered.
Single huge .css file vs. multiple smaller specific .css files?
One Stylesheet Per Page!
you should keep only one css file. Let me tell you in simple one line, once your website loads in client web browser the static resource can be cached that helped your website to boost and number of web request can be reduce when user browse multiple pages of your website.
I would recommend you use SCSS or LESS.
These pre-compilers will allow you to use valid CSS if you do not want to use the fancy syntax.
They will allow you to modularise your code and then com
They're are already plenty of questions about many css files vs one and the solution is to use one because of fewer http request. That's not what I am asking :P
I generally would use two css files. One for the entire site and one for the specific page overwrites.
My thinking behind it is that it will speed up the css since there isn't as many css selectors that need to be evaluated for every element on the page.
Requiring the client to download one more cachable css file seems like it would be worth speeding up the browsers rendering. Especially for larger sites or sites that need lots of custom css for each page.
On the other hand the page files will have additional media queries.
What do you think is the best solutions?
While a technically correct answer would require inside information on your server's performance, your visitors' behaviour and what kind of site you're designing, I'd like to explain my basic reasoning wether to use one or many CSS documents.
For any small, basic site I'll stick to one CSS document, no questions asked. However once a site becomes more complex there may be scenarios where it's reasonable to use more documents.
If a site has several pages with very different CSS and/or markup, or one-off-type pages such as a campaign landing page, or several very different types of content such as a forum or a blog or similar, then I think it makes sense to split up your stylesheets in many documents.
The structure of said stylesheets would, again, depend on the type of site you're designing. Global rules such as normalizing/resetting CSS, general structure and media queries could be in one document, while keeping page-specific rules in another.
This makes sense to me since your visitors can cache the basic structure which should be used on every page anyways, without having to download all the CSS needed for your blog or campaign page until they actually visit it.
I agree that if you have big site with different type of pages your should split your css into different files. However I think that this should not be made based on pages. It should be made on components. When you design CSS you have to split your pages into modules. A module should contain its styles and its media queries. I found that putting the media queries in different file leads to slow development. You may even end up with something like CSS constructor. I.e. a tool which selects the specific modules, combine them in a file and server it like that. You still have only one file, but its content is different.
For CSS optimization check out this tool http://bem.info/tools/csso/
That's it. I've been hearing about CSS files a lot.
What are the main advantages of having a CSS file instead of writing the styles in the HTML code directly?
Assuming your site has 10 pages
You don't have to repeat yourself 10 times.
If your style changes, you don't have to do the change in 10 files
Your HTML files are smaller
Your CSS files can be cached
You can reuse the style sheet on other sites you make
I'd add to JohnP's excellent answer by saying:
you can separate out your caching
on your page (where content may
change regularly) to your CSS (where
it may not) - sites are more likely
to cache CSS for longer than they
would the content of a page,
separating it out will allow you to
do this
you can deliver your CSS
from a content delivery network,
potentially improving site
performance
you can 'minify' your
CSS as part of a build process so
that what you're developing on is
readable/verbose, and what you
deliver is small/terse, again as a
means of improving performance
once the content and presentation
are separated out, your users will
benefit from all of the above and
you will get a faster page load.
Please read this artical on Advantage of using external css.
There are a few advantages;
1) You can re-use the CSS in different pages across your site.
2) The download is separate for CSS when it is in a separate file, this is quicker.
3) The separate CSS file will be treated as static content and likely cached locally. Again quicker.
I personally find CSS easier to read and edit when it is in its own file.
Some good answers by JohnP. However, the most important reason for me would be the separation of presentation and content.
Versioning becomes far easier as you have a central point to apply changes.
The loading time of your site advances because you only deliver the stylecode ONCE and not with every html page you deliver.
Furthermore you save up loading time as the css can be cached locally and so the site loads faster after first load, if there was no changes. This can also cause problems, see solution for those problems in point 2.
you can also use different styles for different platforms or different tasks (such as braille or print)
see available types here:
Media types
There are severe cache problems regarding Internet Explorer, you can give version numbers to keep the cached css out of order, if there were changes applied, so there is NO disadvantage of using css files but a HUGE advantage in administering the site.
Example of versioning:
<link rel="stylesheet" href="[path_to_css]/style.css?v=[date]" type="text/css">
So there are only huge advantages and no disadvantages of using css, so it is best practice.