Flying_D
Member
Hi there,
I created a child theme www.ojas.kamst.com
I noticed there was a lot of redundance and overruling going on so I copied all the rules from the different css-files (which are originally imported) into one single css-file so I could see all the rules in one file. I have 2 questions:
1. Is it good practice to merge all files together in one or what is the advantage of keeping them apart?
2. Is it a good idea to delete all redundant rules?
Thanks in advance for your answers
Marcel
the reason they are separate is to (in theory) make them more modular. so it's easier to swap out say... the typography.css (which are mostly from blueprint) and swap in say the rules from baselinecss.com or something.
as far as website performance, it absolutely makes sense to serve the fewest and smallest stylesheets you can get away with.
Flying_D
Member
Thank you for that quick answer! Your support is awesome!
Okay, I understand the modular approach but it does not seem that important to me at the moment. Of course it would make changes of whole colour schemes etc. a lot easier.
For now I'll be using the 'big sheet' as a guideline to learn from but as soon as I feel I've got the design nailed down I'll do some serious cleaning-up ;-) I think I like the minimal approach the best.
The "do some serious cleaning-up" part of combining CSS and removing redundant code is actually a fairly massive task. I recently did it since I needed a stripped down starting point for child themes. It took me about 5 days.... hehe, was a pain.
While this theme is primarily for responsive sites, if you needed a stripped down style sheet (also removes a lot of default styling provided by thematic), check out the Responsive Base child theme
Hi -
* Scott... good to see you are on the "responsive" CSS thing -- thanks for that theme. We will review it over at http://thematicmondo.com/directory/child-theme-showcase/
* Kathy (Helga) and I were just talking about how the next upgrade of Thematic must incorporate "responsive" and "adaptive" design, so your timing is great. Hey... maybe you would like to help out the team on this?
* Flying_D - I agree with my colleagues on stripping down to one base Style.css sheet, but find myself now also adding a call to "Normalize" CSS (see: http://necolas.github.com/normalize.css/) by including their latest file in the child theme folder. I do not add it into the main child theme CSS file because I want to be able to easily update it as they make changes, and because it is in the same folder and pretty lightweight, the call does not drain resources too much.
- Scott
A review could be pretty funny since there isn't anything aesthetically pleasing about the child theme. It truly is just a gutted Thematic, nothing special other than some best practices collected through creating sites.
Currently I have been a little busy, but I have a SASS/Compass child theme that will be available soon that is based off that Responsive Base theme, it will have a few more styles to make it look decent, but now that I use SASS (cause it owns) it will be my new base theme.
There is technically another mobile-first responsive theme for Thematic out there, but I think it is a POS. Their theme is a perfect example of what not to do with a child theme (especially one released as a base/starter theme). Tons of bad practices and won't even load on the newest Thematic SVN version, hehe. ;)
As far as being involved, I was planning on it, just have been super busy. I think I have finally learned GitHub, but now I am going to Vegas for a week. Just no time yet... :P
@sfrangos- the structure of scott's responsive base theme actually was inspirational for the new typography i've been working on.
@scottnix - SASS owns? is this something i should learn? have you used LESS? how does it compare? are they similar? so easy to get busy isn't it? i just got back from minneapolis and now i can't move my arm over my head...
enjoy vegas!!
I will stick with your "@" format. :)
@helgatheviking- I keep hearing about SASS and how once people use it, they love it. I decided to convert one CSS file to try it out and I don't think I will go back. I picked SASS because people say it is the more robust than LESS (more options) and heard more "bad ass" front-end devs mentioning SASS, so I ran with that.
What I like most, less coding for CSS, nested structure for visual effect and it compiles in different formats so if someone doesn't know SCSS syntax, or doesn't want to use it, they can just use the compiled CSS. You can go back to using @imports in CSS since SASS will compile them all into one style sheet (modular approach, but done right). Also the output of the CSS can be changed to Normal, Nested (looks fancy), All on One Line, or Compressed, obviously you can just spit out compressed CSS for production which is easy since it is done for you on save.
You can leave comments with "\\" like PHP for internal comments that won't display in the CSS files, so you can go wild with commenting code which in a big project would be a killer feature.
Basically you already know SASS for the most part, it is just a little modification to the way you write the CSS structure.
Compass is a little different, it is a companion add on to SASS and adds a bunch of functionality for CSS3 and some crazier things I don't know yet, but at the least with it you won't have to do vendor prefixes ever again.
I would suggest just converting a CSS file you are really familiar with (makes it a easier) to SASS only (forget Compass for now) and by the time you are done, you will like it too. ;P
i had to use @ b/c you are both named scott! will check sass out. i know twitter bootstrap is using LESS, you make a good point for using SASS
Hi Thematic Colleagues -
Helga/Kathy... beware of guys named Scott.
Scott... your review is here: http://thematicmondo.com/thematic-child-theme-responsive-base/
We made sure to let people know it is a "base" for development, and don't sell yourself short -- the media queries and other CSS3 you used are very helpful. Thanks. If you have a finished site built with it, send it along and we will review that too.
Great Helga that we are all on the same wavelength about making Thematic and child themes ready for CSS3 and mobile/tablet formats. Looking forward to working with you all to keep the ball rolling.
- Scott
Thanks for the review! Sorry about the delay also, I have been out of town (no internets).
This minimalistic template might not offer much in out-of-the-box style, but it isn’t meant to. Instead, it offers an incredibly flexible and mobile-friendly theme with a serious foundation on which to build.
Careful, stuff like that will give me a big ego. I recently created another theme based on Responsive Base to stress test and maybe find a few ways to tighten it up, so I will be updating a few (really minor) fixes to help it be a little more bulletproof on managing more complex content.
I really want to convert the CSS to SASS, but that may add another layer of complexity to it by just looking more intimidating (more files). Still pondering that one.
Thanks again, I appreciate it.
Flying_D
Member
Hi everyone,
I didn't expect further reactions therefor and because I had to take a break from typing my answer comes rather late. Thank you all for your contributions to my question!
Scottnix, I figured it was going to be a massive task cleaning up the css-file but 5 days really intimidates me. Thanks for offering your responsive Base child-theme. It looks great and I may use it (with credits) in the future for other projects.
Sfrangos, I understand that keeping an extra base-file with, as it says, basic rules which you probably weren't going to change anyway makes sense from an organisational point of view. Maybe I'll go for your approach.
Thanks again folks!
Marcel
@marcel - please note that the thematic has moved to www.thematictheme.com
Flying_D
Member
@marcel - please note that the thematic has moved to www.thematictheme.com
Thanks, I've already registered - see you over there!
This topic has been closed to new replies.
