+- MacResource (https://forums.macresource.com)
+-- Forum: My Category (https://forums.macresource.com/forumdisplay.php?fid=1)
+--- Forum: Tips and Deals (https://forums.macresource.com/forumdisplay.php?fid=3)
+--- Thread: I don't understand why people write CSS this way... (/showthread.php?tid=39800)
Pages:
1
2
I don't understand why people write CSS this way... - M A V I C - 09-13-2007
Here's two examples:
Example #1
h1 { font-size: 20px; }
h2 { font-size: 16px; }
h3 { font-size: 12px; }
h4 { font-size: 11px; }
h1, h2, h3, h4 {
color: #000;
line-height: 1.1;
font-family: Arial, Verdana, sans-serif;
font-weight: bold;
text-transform: lowercase;
letter-spacing: 1px;
}
Example #2
h1 { font-size: 20px;
color: #000;
line-height: 1.1;
font-family: Arial, Verdana, sans-serif;
font-weight: bold;
text-transform: lowercase;
letter-spacing: 1px;
}
h2 { font-size: 16px;
color: #000;
line-height: 1.1;
font-family: Arial, Verdana, sans-serif;
font-weight: bold;
text-transform: lowercase;
letter-spacing: 1px;
}
h3 { font-size: 12px;
color: #000;
line-height: 1.1;
font-family: Arial, Verdana, sans-serif;
font-weight: bold;
text-transform: lowercase;
letter-spacing: 1px;
}
h4 { font-size: 11px;
color: #000;
line-height: 1.1;
font-family: Arial, Verdana, sans-serif;
font-weight: bold;
text-transform: lowercase;
letter-spacing: 1px;
}
The only difference between each class is the font size. Example #1 is more simple and utilizes less lines of code. However, Example #2 is much easier to fine tune each class, easier to debug, easier for new people to come in and edit the code and easier to control each piece of content.
I also can't stand em's because they're relative to what's around them. So if I decide to change whatever they're nested in, it also changes that object size.
Is there some reason why so many people seem to like Example #1?
Re: I don't understand why people write CSS this way... - BigGuynRusty - 09-13-2007
It is cooler.
BGnR
Re: I don't understand why people write CSS this way... - anonymouse1 - 09-13-2007
I'd go with two if I thought I'd be changing the layout, and the specifics of those fonts. On one of my business websites (which is not CSS yet....), I adjusted h1, h2, etc. many times. It was my first website; what can I say? Anyway, the lesson I learned from that is to keep my global specifications separate, rather than lumped together.
Re: I don't understand why people write CSS this way... - M A V I C - 09-13-2007
And my example is rather simplistic. I know some people who basically write their CSS around the attribute qualities. So anything that has a font size of 10 gets lumped together. And anything that has 11... and anything that has a left margin of 5px... and so on.
If suddenly we decide one box on a page needs a bit more priority, it's nice to know where all the code is for that box, and not have to search through the page and move stuff around... eg, now H2 goes in the 18px category instead of the 16px category...
[quote anonymouse1]I'd go with two if I thought I'd be changing the layout, and the specifics of those fonts.
My thing on that is, when does someone know for sure they will not be making changes to the CSS? It's so rare that changes aren't made. I can't think of a single site I've built in the last many years where there wasn't adjustments to be made from the original spec.
Re: I don't understand why people write CSS this way... - ka jowct - 09-13-2007
It depends on how well you have thought out the appearance of the site and how efficient you want your code to be. I much prefer the first way of doing things: combining whatever CAN be combined into a single rule.
Also, I never, ever set type sizes in px anymore, unless I am asked to do so by a client who does not know much about CSS. Otherwise, I always use ems. It's more flexible and fluid. That way of setting type sizes (relative rather than fixed) is recommended by people like Dan Cederholm and Charles Wyke-Smith, among others, and it works very nicely if done correctly.
Re: I don't understand why people write CSS this way... - M A V I C - 09-13-2007
[quote ka jowct]It depends on how well you have thought out the appearance of the site and how efficient you want your code to be. I much prefer the first way of doing things: combining whatever CAN be combined into a single rule.
Funny that we think so differently.
On this one, I guess it depends on what the site is for. I do a lot of ecommerce & promotional sites. There's always a different push, so that means there will always be changes. I find Example #1 to be extremely inefficient because it takes a lot of time to make changes or to get a new person familiar with the code (or even to remind myself how it was written.)
Also, I never, ever set type sizes in px anymore, unless I am asked to do so by a client who does not know much about CSS. Otherwise, I always use ems. It's more flexible and fluid. That way of setting type sizes (relative rather than fixed) is recommended by people like Dan Cederholm and Charles Wyke-Smith, among others, and it works very nicely if done correctly.
I always use px. It ensures that the design & layout of the site remain intact. The purpose of the sites (at least that I typically work on) is to convey a message to the user. Losing control of how the typography flows can completely change the message. I will provide a method for users to adjust type sizes on the site - still using px - before I'll allow a browser to miscommunicate my message.
Re: I don't understand why people write CSS this way... - vision63 - 09-13-2007
Most css today isn't written, it's generated.
Re: I don't understand why people write CSS this way... - macnut - 09-13-2007
The nice thing about CSS is that it gives the designer(s) a choice depending on their plans for making global changes to the site, while keeping markup lean and clean instead of opaque and bloated. Every site should have a plan and comments interspersed ihn the markup relevant to that plan. What is more appropriate for one site is not necessarily so for another. Depends on what you are going and what you expect may change.
Re: I don't understand why people write CSS this way... - Seacrest - 09-13-2007
DRY principle.
Re: I don't understand why people write CSS this way... - M A V I C - 09-13-2007
[quote Seacrest]DRY principle.
Both examples repeat themselves. One repeats selectors, the other repeats attributes.