Re: [WSG] style sheet set up
Recently a CSS compressor utility has been making its rounds on the del.icio.us/Furl bookmark sites (and the like). Removing whitespace and comments from stylesheets, cramming them all into one file, and similar naive approaches to improving a site's response time are far less effective strategies than: 1. Selecting a high quality hosting company 2. Selecting the correct Web server software 3. Learning how to correctly configure your Web server 4. Making use of browser cache and expires headers 5. Using keep-alives and timeouts correctly 6. Using http compression 7. Using proxies By following these guidelines, you can eliminate all arguments about using multiple/modular CSS stylesheets. And in the process improve your own productivity, which is another expense that is so often overlooked. Web hosting companies are in the business of making money, and their business model is based on charging by bandwidth -- which is why they thrive on inefficiency, and why they don't want you to know about mod_gzip or even charge you extra to enable it. If, after following these steps and your site still loads slowly then the culprit is still mostly likely not multiple stylesheets, with or without comments in them. The top reasons include: 1. An overloaded shared host 2. A host that is lacking in a key resource such as memory 3. A poorly designed or unmanaged database 4. Poorly designed software such as scripting I have, from my own personal experience with sites that have all of the above issues, actually increased by far the size and number of CSS files that form the design of the site, and yet decreased the load time of the site by many orders of magnitude. I simply do not understand this argument that large, complex stylesheets are somehow to blame for sites that load slowly. I could also reduce bandwidth by eliminating the DOCTYPE declaration from the markup, and sending tag soup that doesn't close element tags or use quotes around attribute values. The browser doesn't care, right? And we all know the user doesn't care how the page is built as long as it loads, and they can find what they're looking for. As far as the scant few users out there with version 4 browsers, good luck with any major Web site these days. As far as dial-up users go, you have my sympathies. -- Douglas Clifton [EMAIL PROTECTED] http://loadaveragezero.com/ ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] style sheet set up - ADMIN
ADMIN
Please remember a few basic guidelines:
http://webstandardsgroup.org/mail/guidelines.cfm
- Trim replies where possible
- Code samples are fine, but not full pages of html or css code - much
better to link to these items
The last post was a prime candidate for trimming AND linking!
Russ
/*STYLE RULES FOR HOME PAGE...*/
html
{height: 100%;
margin-bottom: 1px;}
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
RE: [WSG] style sheet set up
FWIW, my personal preference within a CSS file is to group all the properties relating to a particular selector into a single declaration. I've seen many people declare properties for, say, p in multiple locations. That makes it difficult to get a complete picture of the styles applied for p. I also tend to group together all variants on p, eg. p#first, p.second, even div#third p. hth, RI Richard Ishida W3C contact info: http://www.w3.org/People/Ishida/ W3C Internationalization: http://www.w3.org/International/ Publication blog: http://people.w3.org/rishida/blog/ -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Bruce Gilbert Sent: 28 May 2005 17:10 To: wsg@webstandardsgroup.org Subject: [WSG] style sheet set up is there any standard way to set up the flow of a style sheet? I usually try and use just one style sheet and start with global elements such as body, p, table, li etc. followed by elements as they flow on a page from header to footer. I use one stylesheet even though with a large site, this can become quite large. Looking for suggestions/thoughts on what others do such as multiple stylesheets vs. one big one, layout of styles, etc. thanks in advance, -- ::Bruce:: ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help ** ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] style sheet set up
SAUD _ [EMAIL PROTECTED] wrote: [EMAIL PROTECTED] wrote: what on earth I will fuck you soon I am sorry Do You Yahoo!? Yahoo! Small Business - Try our new Resources site!
Re: [WSG] style sheet set up
Hi, Pardon me if I'm missing the joke. But I get enough junk mail, so I can do without obscenities coming from sources I rely on as support for my livelihood. Thank You On May 30, 2005, at 2:41 PM, SAUD _ wrote: SAUD _ [EMAIL PROTECTED] wrote: [EMAIL PROTECTED] wrote: what on earth I will fuck you soon I am sorry ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] style sheet set up - THREAD CLOSED
ADMIN THREAD CLOSED This list does not allow swearing - as clearly indicated in the guidelines. The offender was unsubscribed and blocked. Please do not reply to this or other obscene messages onlist. If you have a problem with a post or a closed thread, please email [EMAIL PROTECTED] - do not take out your anger or frustration on 1900 innocent people. Thanks Russ ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] style sheet set up
I may be a little late to reply but hopefully this will help you all as much as it helped me. A lot of scalable programming is done using a framework of some sort (a set of prewritten bits of code aka modules) but a lot of designers are afraid, or confused by that pure geek way of thinking (i know I was one of them). I read up about OOP (Object Oriented Programming), frameworks, APIs and the like - mainly to improve on my Javascript and PHP skills - but on top of that I started to think about code snippets and modularization as a way to simplify more than just my scripting. So how do you apply this to you stylesheets I hear you say...well recently I came across a couple articles about CSS modularization and CSS frameworks that totally changed my front-end development life: http://www.contentwithstyle.co.uk/Articles/12/modular-css http://www.contentwithstyle.co.uk/Articles/17/a-css-framework Mike Stenhouse from contentwithstyle explains it way better than I could! Hope that helps Cheers D On 5/29/05, Bruce Gilbert [EMAIL PROTECTED] wrote: is there any standard way to set up the flow of a style sheet? I usually try and use just one style sheet and start with global elements such as body, p, table, li etc. followed by elements as they flow on a page from header to footer. I use one stylesheet even though with a large site, this can become quite large. Looking for suggestions/thoughts on what others do such as multiple stylesheets vs. one big one, layout of styles, etc. thanks in advance, -- ::Bruce:: ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help ** ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] style sheet set up
G'day http://www.contentwithstyle.co.uk/Articles/12/modular-css http://www.contentwithstyle.co.uk/Articles/17/a-css-framework Mike Stenhouse from contentwithstyle explains it way better than I could! The biggest problem, and perhaps the biggest difference between the web and program(mer)s is that all these extra documents are extra hits on the server every time someone visits the site for the first time. Taking the first link above as an example, there's a LOT of CSS (and images) being loaded and a lot of it probably isn't used. I'm on ADSL now, and it took close to 10 seconds for the page to finish loading and rendering, probably partly because of all the HTTP requests. I'd hate to see what it would be like on dial-up. Unlike programs, Web pages are not compiled. According to websiteoptimization.com (which might be wrong, but I haven't got time to look at it the code in detail), this particular page has 39 http requests, 315008 bytes to load, over half of it being CSS and the rest being mostly css images. Modularization is fine, but this seems over the top. Comments in CSS and HTML (which this site uses a lot of) are great for developers too, but why feed it to every visitor? Regards -- Bert Doorn, Better Web Design http://www.betterwebdesign.com.au/ Fast-loading, user-friendly websites ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
[WSG] style sheet set up
is there any standard way to set up the flow of a style sheet? I usually try and use just one style sheet and start with global elements such as body, p, table, li etc. followed by elements as they flow on a page from header to footer. I use one stylesheet even though with a large site, this can become quite large. Looking for suggestions/thoughts on what others do such as multiple stylesheets vs. one big one, layout of styles, etc. thanks in advance, -- ::Bruce:: ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] style sheet set up
I tend to divide my style sheets into smaller files. For example, I usually put only basic layout in one file, i.e. layout.css, the general text formatting styles in another, and then the colors for the entire site in a colors.css file. On 5/28/05, Bruce Gilbert [EMAIL PROTECTED] wrote: is there any standard way to set up the flow of a style sheet? I usually try and use just one style sheet and start with global elements such as body, p, table, li etc. followed by elements as they flow on a page from header to footer. I use one stylesheet even though with a large site, this can become quite large. Looking for suggestions/thoughts on what others do such as multiple stylesheets vs. one big one, layout of styles, etc. thanks in advance, -- ::Bruce:: ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help ** ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] style sheet set up
I tend to clear all the browser defaulted styles at the top in one
large grouped rule.
I then set out all the divisions with their ID's, in the order they
appear in the xhtml eg:
div#top {
}
div#middle {
}
div#bottom {
}
Underneath this I would work though all the rules focusing within one
specific division eg:
div#top h1 {
}
div#top p {
}
div#top ul {
}
div#top li {
}
It's a neat order, keeps the cascade flowing and easy to change the
visual layout of the page relatively quickly
--
Dave O'Brien
Venting my spleen at:
http://www.ventingspleen.co.uk
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] style sheet set up
On Sat, 28 May 2005 17:10:14 +0100, Bruce Gilbert [EMAIL PROTECTED] wrote: is there any standard way to set up the flow of a style sheet? I usually try and use just one style sheet and start with global elements such as body, p, table, li etc. followed by elements as they flow on a page from header to footer. I use one stylesheet even though with a large site, this can become quite large. Looking for suggestions/thoughts on what others do such as multiple stylesheets vs. one big one, layout of styles, etc. Typical mistake is just to split that one huge stylesheet into several by rules' function, not pages where they're used. If you make separate stylesheets for: layout, colors, widgets, etc -- you'll have to attach all of them every time, so you won't save a bit and clients will have even more files to download. It's wiser to find minimal set of rules that are used on home page (and maybe 1-2 other most used pages on your site) and make it main stylesheet. Then add secondary stylesheet(s) on pages, which need them (styles for forms, gallery and alike). Stylesheets compress wonderfully. Enable gzip transfer encoding for them (but if you do it in PHP or alike, you'll have to send cache headers and implement cache validators, otherwise clients will re-download stylesheets). -- regards, Kornel Lesiski ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] style sheet set up
Hi Dave,
Quick question. Is there a reason for naming your selector div#top instead
of #top?
Please advise...
Kind regards,
Mario S. Cisneros
I tend to clear all the browser defaulted styles at the top in one large
grouped rule.
I then set out all the divisions with their ID's, in the order they
appear in the xhtml eg:
div#top {
}
div#middle {
}
div#bottom {
}
Underneath this I would work though all the rules focusing within one
specific division eg:
div#top h1 {
}
div#top p {
}
div#top ul {
}
div#top li {
}
It's a neat order, keeps the cascade flowing and easy to change the
visual layout of the page relatively quickly
--
Dave O'Brien
Venting my spleen at:
http://www.ventingspleen.co.uk
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] style sheet set up
I completely concur Kornel.
Also, I prefer to use one master.css file to control my entire site, and
create additional stylesheets that based on a pages specific requirements
(i.e. print-friendly, forms, etc.).
In addition, I use comments in my master.css file extensively and divide
my master file into homepage rules and rules for interior pages.
Please see attached for review...
Respectfully sibmitted,
Mario S. Cisneros
On Sat, 28 May 2005 17:10:14 +0100, Bruce Gilbert [EMAIL PROTECTED]
wrote:
is there any standard way to set up the flow of a style sheet? I
usually try and use just one style sheet and start with global
elements such as body, p, table, li etc. followed by elements as they
flow on a page from header to footer. I use one stylesheet even though
with a large site, this can become quite large. Looking for
suggestions/thoughts on what others do such as multiple stylesheets
vs. one big one, layout of styles, etc.
Typical mistake is just to split that one huge stylesheet into several
by rules' function, not pages where they're used.
If you make separate stylesheets for: layout, colors, widgets, etc --
you'll have to attach all of them every time, so you won't save a bit
and clients will have even more files to download.
It's wiser to find minimal set of rules that are used on home page (and
maybe 1-2 other most used pages on your site) and make it main
stylesheet.
Then add secondary stylesheet(s) on pages, which need them (styles for
forms, gallery and alike).
Stylesheets compress wonderfully. Enable gzip transfer encoding for them
(but if you do it in PHP or alike, you'll have to send cache headers
and implement cache validators, otherwise clients will re-download
stylesheets).
--
regards, Kornel Lesiñski
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
/*STYLE RULES FOR HOME PAGE...*/
html
{height: 100%;
margin-bottom: 1px;}
body
{margin: 0 auto;
padding: 0;
text-align: center;
background: #DCD8CF;}
#container
{position: relative;
width: 760px;
margin: 0 auto;
font: normal 12px/14pt verdana, arial, sans-serif;
background: #fff;}
.grad-cap
{background-image: url(../images/grad-cap.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 120% 43%;}
/*global tab navigation bar*/
#tabnav
{font: bold 12px trebuchet ms, serif;
text-transform: uppercase;
text-align: center;
color: #7B012A;
background-color: #DCD8CF;
border-top: 1px #000 solid;
border-bottom: 1px #7B012A solid;
padding: 5px;
margin-top: -4px;
margin-bottom: 15px;}
#tabnav a:link, #tabnav a:visited
{color: #000;
text-decoration: underline;
padding: 5px;}
#tabnav a:hover
{color: #7B012A;
text-decoration: none;
padding: 5px;}
h1
{font: bold 14px helvetica, arial, sans-serif;
text-align: left;
text-transform: uppercase;
color: #7B012A;
border-bottom: 1px solid #000;
margin: 0;
padding: 0;}
/*2 column layout*/
#leftcolumn
{width: 150px;
float: left;
font-size: 10px;
background: #fff;
padding: 0px 5px;}
#rightcolumn
{width: 585px;
float: right;
text-align: justify;
padding: 0 5px;}
#clear
{clear: both;
height: 1px;
overflow: hidden;}
.img
{border: 1px solid #000;}
#article
{width: 140px;
border: 1px solid #000;
padding: 5px;
text-align: left;
margin-top: 5px;
background-color: #ddd;}
#article p
{margin: 5px 0 0 0;
padding: 0;}
/*bullet items in services section*/
.programs ul
{float: left;
text-align: left;
width: 260px;
height: 95px;
margin: 20px 0;
padding: 0 15px;
background: #EBE9E2;
border-left: 1px dashed #7B012A;
border-right: 1px dashed #7B012A;}
.programs ul li
{display: block;
list-style-type: square;
list-style-position: inside;}
a.programs:link {color: #000; background-color: transparent; font-weight: normal;}
a.programs:visited {color: #000; background-color: transparent; font-weight: normal;}
a.programs:hover {color: #00f; background-color: transparent; font-weight: normal; text-decoration: none;}
/*homepage footer*/
#footer
{font: normal 10px verdana, arial, helvetica, sans-serif;
text-transform: uppercase;
color: #fff;
margin-top: 15px;
padding: 5px 0px;
background: #7B012A;
width: 100%;}
a.footer:link { color: #fff; background-color: transparent; font-weight: normal;}
a.footer:visited { color: #fff; background-color: transparent; font-weight: normal;}
a.footer:hover { color: #DCD8CF; background-color: transparent; text-decoration: none; font-weight: normal; }
#webnet
{padding-left: 30%;}
/*STYLE RULES FOR INTERIOR PAGES...*/
#content
{margin: 10px;
text-align: justify;}
h2
{font: bold 14px trebuchet ms, serif;
text-align: left;
text-transform: uppercase;
color: #000;
margin: 0;
Re: [WSG] style sheet set up
Hi Kornel, Stylesheets compress wonderfully. Enable gzip transfer encoding for them (but if you do it in PHP or alike, you'll have to send cache headers and implement cache validators, otherwise clients will re-download stylesheets). How do you do that? Kim ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] style sheet set up
http://www.scriptygoddess.com/archives/2003/03/28/compressing-webpages-for-fun-and-profit/ On 5/28/05, Kim Kruse [EMAIL PROTECTED] wrote: Hi Kornel, Stylesheets compress wonderfully. Enable gzip transfer encoding for them (but if you do it in PHP or alike, you'll have to send cache headers and implement cache validators, otherwise clients will re-download stylesheets). How do you do that? Kim ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help ** ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
