Sent by Zoe M. Gillenwater on 22 March 2007 14:02
OOzy Pal wrote:
> Dears,
>
> Every time I start developing a site I start with small css file and
> after I am done the .css file gets bigger and out of control.
>
Don't feel too bad. Although I wouldn't say my recent style sheets are
out of control, they are doubtless a little bigger and more complex than
they ought to be. Even really experienced CSS developers should revisit
their style sheets from time to time and do a little cleanup.
> I am sure that I am doing something wrong. I am sure that I am
> duplicating and adding items that I don't need. I mean items that can
> inherit their style from their parent selectors.
>
> My concern is how do I start? How can I track my selectors? Is there a
> program (Linux or Windows) that can track my selectors?
>
I'm not really sure what you mean by track your selectors. Do you mean
evaluate which selectors aren't actually being used anywhere in the
pages themselves? I believe TopStyle has a tool to do this, but I
haven't used it for a very long time, nor any other CSS editors, so I'm
not sure.
If you mean more broadly that you want to be able to evaluate what
declarations are applying to each element, get rid of duplicate or
unnecessary ones, and change others to produce the same effect with less
declarations, there are a number of tools that can help you. The Web
Developer and Firebug extensions are both very good for this, as others
have mentioned. If you use Dreamweaver 8, you can also use the CSS panel
in a similar way.
Much of this just comes down to practice. As you work with CSS more, you
will get better at accomplishing what you want to do with both leaner
markup and CSS. There's not much that can be taught for all style sheets
in general, but the basic ideas of keeping things lean include:
-- Using valid and semantic markup to provide you with hooks for styling
and the ability to use type selectors instead of classes and ids.
-- Creating a consistent visual look across a site in order to
necessitate less classes and ids. Write out a style guide if this helps
keep you or your client from making exceptions to the visual style
willy-nilly.
-- Being less concerned with pixel perfection and trying to make things
look the same for all users. When you try to fight the flexible and
user-controlled nature of the web, you often end writing way too many
styles in your quest for control.
-- Using grouped selectors in the style sheet when logical.
-- Using shorthand properties in the style sheet.
-- Relying on both inheritance and the cascade as much as possible,
instead of classes.
To get practice in recognizing these areas where you can improve your
CSS efficiency, I recommend asking for an evaluation of a style sheet
you are concerned about on this list, or from any colleagues or mentors
you know who are CSS experts. We can provide you with suggestions for
your specific issues that will hopefully give you insight into how
experienced CSS developers approach writing styles and how you can keep
things leaner in the future. There's only so much help we can give you
with generalities. Real world examples are much better teaching tools.
> What is things that you guys/gals start with when you develop a new
> site? For example do you do this
>
> *{padding:0; margin:0;border:0;}
>
Nope, I don't. Lots of others do. I don't find that it really saves you
anything. You still end up writing lots of rules adding margins back in
for elements. Overriding margins and padding as needed -- the opposite
approach -- gives you about the same amount of rules. So just use
whichever one makes more sense to you and for your site.
Zoe
--
Zoe M. Gillenwater
Design Services Manager
UNC Highway Safety Research Center
http://www.hsrc.unc.edu
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
