0

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?

Yaerox
  • 608
  • 2
  • 11
  • 27
  • 1
    You can either do that, or you could give your page body an id and then target the inputs on that page only - eg if you gave the body an id of `idontknow`, then you could target `#idontknow input {}` - this way you can make one less request (and also minify your main.css file) which will slightly improve performance. Or you could use a css compiiler. Also tables should only be used for tabular data, if you are wanting to use it for layout, then use the css property display:table – Pete Jan 22 '15 at 09:00
  • 1
    Would this be something your looking for? http://stackoverflow.com/questions/2253110/managing-css-explosion – Persijn Jan 22 '15 at 09:06
  • @Persijn in some way yes. There are some basic information I alreay know, but some people talked about CSS Conventions / Code Layout Models and that's what could be interesting for me too. – Yaerox Jan 22 '15 at 09:30
  • some sites still use tables just depends how and where you're going to use it. But I use div 100% of the time really as I find it a little less confusing but that's just me. Would also use CSS pre-processor like Sass/Compass like many people have suggested already. This will make your CSS well written and easy to read and definitely less confusing. You can centralised your CSS easily if you use Sass/Less or any preferred CSS pre-processor. – nCore Jan 22 '15 at 09:40
  • @nCore for me it is important to use tag's for what they are for. For me a table is no tag to structure a page with. But if I need an login, for a form with 3 lines 2 rows, I feel okay by using tables. That's how I actual build my websites. – Yaerox Jan 22 '15 at 09:57
  • @Mike tags? you meant class tags? Thought you can put class/id in tables. Last time I created a login form I used divs. I think its whatever you're comfortable using with then I guess its not a bad thing. Just tables can be a little tedious sometimes. But as I said whatever works best then "thumbs up". – nCore Jan 22 '15 at 10:03

4 Answers4

1

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.

pensan
  • 420
  • 8
  • 11
  • I don't know SASS, I'll have a look at it soon. For the first it would take it to far right now. A single file speeding up the loading process would mean I take a look on my files and what @Pete said. – Yaerox Jan 22 '15 at 09:07
1

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.

Hugo Hernani
  • 165
  • 1
  • 10
  • Didn't heard about Polymer-project yet. Looks great, but it looks a way to special. I mean I guess more expert people can do the same with simple CSS and HTML, and it's probably more understandable for everyone. I'm always trying to keep on modern trends but staying on the origin side as much as possible. – Yaerox Jan 22 '15 at 09:29
1

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
ummahusla
  • 2,043
  • 3
  • 28
  • 42
  • I'm actual trying to get into SASS, but you talked about a great topic. Responsive websites. One of my aims at the start was using bootstrap. When building the homepage, I felt like I don't know how to use bootstrap on my personal homepage structure. So I left it, and now there are some last problems with CSS when re-sizing the window. Unfortunately I'm not in the workflow of responsive websites yet. I'd like to make this .. – Yaerox Jan 22 '15 at 10:03
  • 1
    Use their examples first then play with it then once you get the hang of it then rip them apart and put them back together in your own way. Sass will be your best friend when building websites nowadays specially when building responsive sites. You don't necessary have to use Foundation/Bootstap but its a way to go specially when you're new to Responsive Design. I used Foundation Zurb for my website and speed-prototyping a design. – nCore Jan 22 '15 at 10:06
  • 1
    If you know `HTML` and `CSS`, you can start re-building your current project to use in Foundation Grid (docs/grid) and making it responsive. Foundation provides a lot of ready templates, all you need is to understand the grid, all other things are easy. In addition use SASS, after 1 project on building a Responsive website using modern technologies you will get more experience, neither then building 10-15 non-responsive websites. Good luck. – ummahusla Jan 22 '15 at 10:08
  • I think I'll finishing the "version 1" for the first by sorting CSS code only. Then I'll start a version 2 using SASS and at the end a version 3 doing this in framework. I just hope I get enough time to get into those ^^ – Yaerox Jan 22 '15 at 10:23
  • @Mike version 2 and 3 should be done in 1 step, because foundation is using SASS and there is no points to use pure CSS. You will need to push yourself and make it, it will be hard at the begging, but you will get a huge experience. – ummahusla Jan 22 '15 at 10:33
  • @Melvin Okay, then I'll do it this way ;-) – Yaerox Jan 22 '15 at 10:57
  • @Melvin Finally My main problem while building responsive websites is that the basic homepage I wanna code is a simple layout. header { width: 100%; height: 200px }, then we have 2 parts, navbar { width: 150px; height: 100% } and the content { width: calc(100% - 150px); height: 100% } but all responsive sites I see starting "in the middle of the screen". My homepage should still start left/top and the responsive should be done if I size the window less then XYZ width. Any idea how to go on? Ive no ideas how to build it ... – Yaerox Jan 22 '15 at 12:48
  • @Mike http://www.codecademy.com/learn - I strongly suggest you to start with something basic. Go through HTML/CSS course. PS It's free. – ummahusla Jan 22 '15 at 14:19
  • @Melvin I think I got this now and I'm getting in better. Still thanks for the link, I'll take a look at it. – Yaerox Jan 22 '15 at 15:16
0

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.