I made a remake of an older website which used tables for everything (structure and content). Now I did it in a (hopeful) "more modern way". All basement-things are div's now, but in my content I still use tables because I always have to display stuff as a table, and why I shouldn't do this with the table-tag?
Anyway, now I'm about to sort the CSS stuff, and try to organize it in a efficiency way. How do you do this ? ...
I got a main.css which should store all stuff which is used more then once in different files
One css file for each page in case that I have to edit some stuff written in main.css
but what if I got the CSS tag input { width: 150px; } in main.css, and input { width: 100px; } in idontknow.css. It works (that on idontknow.html the input is 100 isntead of 150 px, but is it a way modern web-developers do?
What about having a central point for maintenance which could mean placing all stuff in one CSS file?
First of all, if you want to build a modern website from my points of view, you should definitely use CSS Preprocessors like SASS or LESS.
I suggest you to use Foundation Zurb Responsive framework. It's mobile first, because every single modern website should be responsive. It uses SASS and there are 3 ways of getting started using it.
SASS allows you to create and separate your styles for each page, without messing them together. So basically you will have _home.scss, _header.scss, _footer.scss, but when you compile - you will have everything created in one style file. Additionally CSS and JS can by minified as well.
I suggest you to start with - SASS
After that to get yourself familiar with Foundation
You could use something like SASS/SCSS (http://sass-lang.com/) to work organized with your stylesheet files, and compile them into a single main.css for the production site.
In development, it is not necessary to have quick loading times, but on the production site, a single CSS file will speed up the loading process of the page.
You could use SASS.
But...
Have you heard about web components or Polymer-project?
https://www.polymer-project.org
The main idea is make use of styles and scripts inside each component, so that you could have the right place to put your styles and also, for the purpose of web components, reuse your components (new html elements in Polymer) anywhere in your html files.
And of course you could have a main.css for the whole page.
You should try to have only one Stylesheet in the end. It´s just the best for the performance of your website because it saves one request.
You can achieve that by using classes and IDs. As Pete mentioned you can also target body-elements with a class or an ID. And you can also give Elements multiple Classes.
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 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
Use case:
I have main stylesheet - main.less and another one for particular section of site - app.less.
Also I use Twitter Bootstrap. And for example in main.less I have several overrides for bootstrap, and in app.less I want to mixin Bootstap class into my own one (lets take - .clearfix) - for more DRYness of my code. So I will import bootstrap.css in it and mixin needed class. On web-page at first I will include Bootstrap and other libs, then main.less and then app.less. And that will make overrides in main.less cleared, and all becomes to be messy!
How to correctly do such imports? Is it possible at all with any CSS preprocessors, not only LESS?
Is including bootstrap into the less files an option for you, like you do in development?
My approach in SCSS is like that:
style.scss (doesnt have any own declarations)
imports bootstrap.scss first
then imports site specific .scss files, which may contain overrides.
By doing that I can fully control the order of the files and therefore the order of declarations in the generated css file.
Of course one has to decide to trade in the ability to let Bootstrap load via CDN when included, but in my case I use a very down narrowed version of Bootstrap anyway.
Bootstrap is not meant to be used like that. I mean if you use the compiled version, you should not override it. The idea is to use the less files and modify them. The approach which you are using is kinda messy and I think that there is no elegant way. I'll suggest to avoid including of compiled bootstrap.css and checkout the pure less version.
Do you know a source for pure CSS Templates? After setting up a simple Web Project I always wish to have a CSS file to:
Set reasonable font settings for paragraphs and headers
Polish my anchor tags
Style my forms (if I have to touch the HTML for this one - no problem)
Style my tables (I use headers and footers etc) using even & odd
Maybe give me some handy classes for error boxes, etc.
So if I Google for a such CSS file I find CSS Homepage Templates with HTML Structure and massive CSS which I can't use without changing much. I find CSS examples for perfect tables, other examples for perfect forms but what I don't find is a single CSS File which when loaded in a properly formatted HTML website will make it look "okay" instead of the pure HTML look.
Do you get me?
Does anybody have a hint for me?
Twitter Bootstrap might interested you but I believe it has a bit of javascript in it as well.
Edit: As mentioned in comment you can use many of the Bootstrap features without using any javascript.
I've personally used bootstrap and I love it. I've also bookmarked few others to play with when bandwidth permits.
Bootstrap
Blueprint
960 Grid
Update: On related matter, I would also checkout CSS Preprocessors such as Sass and LESS that could help in writing better CSS and build up a custom library to use across projects.
Perhaps try the CSS off of Twitter Bootstrap. Provides all sorts of consistent styling that's simple but elegant, in addition to some fancier element behaviors.
Update:
Adding to Yonix's related list, the following are alternative CSS preprocessors, which makes working with CSS a little more digestible:
Compass
Stylus
There's a bit of a learning curve when teaching yourself CSS, but some basic CSS is easier than you think.
For quick prototyping/wireframing and pre-made HTML templates, I use Zurb Foundation, as compared to Twitter Bootstrap. My advice is to familiarize yourself with their online documentation and delve into the main CSS file (foundation.css). You can build on top of that CSS file with the provided app.css file.
It comes with a lot of pre-made styles (buttons, forms, etc) and everything is responsive (fits on any size screen). You can choose to include all the plugins, or just the HTML and CSS. It also has an option to download the HTML templates, which come with a variety a layouts, such as a blog or a basic structure. I absolutely love it!
I want to edit a html template to create a simple version for my need. I delete some ; but is there a tool to remove unused classes from CSS or I need to remove the manually?
For example, <div class="something"> is not used in my html; but still I have .something {} in my css file and make my css heavy. Currently, I delete unused classes from CSS one by one manually. I wonder if there is a way to delete any class in CSS which is not referenced in html!
Check out something like http://unused-css.com/. If you pay for it, you get to have it crawl your site and create a clean version for the entire site.
If you want a browser-based solution, try the Firefox plugin CSS Usage. You can open up Firebug, click on the CSS Usage tab, click on "Autoscan", then navigate your website a few times (be sure to hit every page). It will keep track of which classes are used and you can export a "cleaned" version. This requires more manual work and may be subject to broken styles, but if you are careful, it should work fine.
The answer is not really, due to the fact a CSS file can be used across a magnitude of HTML pages.
I'm sure some people might have made a tool that parses all their own specific HTML pages and creates a list of 'unused' css classes, but it'd be likely to be very bespoke to their needs (also if the HTML pages render out different things due to a user's choices, how'd you know that the CSS class is or isn't used?)