CSSKarma

Modular vs. Singular CSS

Friday, November 30th, 2007

I posted this to the regular site too, but wanted to open it up for comments

Modular

There’s a software development principle that has grabbed my attention lately that I wanted to talk about. Most of the developers I interact with are heavy in software & PHP/MySQL, rather than web so naturally they have a hardcore programmer mentality. The principle that I’ve had drilled into my head has been keep things modular.

So we take what’s been drilled into our heads and apply it as we can; I did it with my CSS (keeping it modular) with using a master style sheet with import rules

CSS: master.css

@import url("reset.css");
@import url("global.css");
@import url("layout.css");
@import url("nav.css");

Something like that.

Up side

Keeping your CSS modular like that is fantastic for maintenance. You can split it up into as many pieces and you want, and update the live site however you want. I like doing this to release a site upgrade is sections rather than in one large chunk.

Down side

The down side to using a modular CSS file structure design is that every URL you import to the master.css file is another HTTP request you have to make to the server, and that will have negative effects on site performance. So you have to balance your ease of updating with how well you want your site to perform. The same principle can be applied to JavaScript

Singular

Keeping all your CSS (or JS) in one large file is pretty self-explanatory so I’ll just get right to it…

Up side

This will cut down on your HTTP requests, hence speeding up your page. Also the 1 CSS file is usually a little smaller than the combination of all the imported ones plus the master.css

Down side

The down side to this is that it makes it tougher to maintain, but as long as you comment you code you shouldn’t have a huge problem

My personal preference to this issue is to keep things modular while I’m in development and then switching to a singular style sheet right before a launch. I do think it’s important to take site performance into consideration. Since 80%-90% of the load time on a page comes from the front end, things like optizing images, compression and semantic XHTML are very important.

Site optimization tools

• CSS Validator
• XHTML Validator
• Speed report
• Clean CSS

OK, that’s all I have for now

with ease,
tim

Posted in Web Development | 1 Comment »

Web Directions North 2008

Wednesday, November 28th, 2007

After a smash hit first year in Canada, following several years of great success in Australia, Web Directions North returns to Vancouver, with two days of workshops, a two day conference featuring renowned, inspiring expert speakers from across the globe, and the now legendary post conference trip to Whistler.

Web Directions speakers are real world experts bringing insights, experience and expertise you’ll go a long way to get anywhere else. Our speakers walk the walk, not just talk the talk. You’ll also get the chance to meet, exchange ideas, and network with your peers from across Canada, North America and the World. Web Directions is a must for all designers, developers, product managers, and anyone who works with the web.

Speakers:

Topics:

• 3 Stages of Dynamic Systems
• Ajax Security
• Bedroom to Boardroom
• Closing Keynote
• Composition Tools for Web Type
• Developing with AIR and Silverlight
• Future of Web Interfaces
• Government 2.0
• Information Visualization as a Medium
• Innovation is Overrated
• Mobile Web Design & Development
• Plays Well with Others
• Real World Accessibility
• Return of the King of Web Standards
• Serious Business
• Visions for the Web’s Future
• What Makes a Design Seem Intuitive?
• Where’s Your Web At?
• The Why and How
• Working with Ajax Frameworks

Posted in Web Development | 1 Comment »

Thanksgiving

Thursday, November 22nd, 2007

so it’s thanksgiving night and i’m hanging out, watching ‘weeds’ and reading some stuff. I came across a good article on javascript accessibility: http://www.unintentionallyblank.co.uk/2007/10/18/web-accessibility-javascript

The rest of the site is really good too. I highly recommend perusing it if you have the time.

Posted in Web Development | No Comments »