What is the best way to use CSS? (NOT *learn* but really *use*) [closed]

As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance. Closed 9 years ago.

I know CSS and I'm learning more and more common pattern. However, I always feel like I'm hacking instead of doing it the right way.

For instance, some people I respect tell me that using css reset is unnecessary while others live for it. Also, there are so many great css framework (for grids, etc.) that even thought I understand them, I never really know when to use the开发者_JAVA百科m.

So, basically, my question is: Once you understand how CSS work, is there a recognized "best" approach used by excellent web developer? As in python, one should try to use the common pattern and read PEP 8. Or, in C++, after understanding the syntax, reading the effective serie by Meyer is an excellent "second" read.

Sorry for taking that long to explain.. I just didn't want to have answer like: Read "Beginning CSS" which explain how to change the background or how to set font. I'm really looking for a good standard approach.

• Should we use reset?
• Should we use only one file per site? One for homepage and one for the rest? One basic file and once different for every big sections?
• Is it bad to have a 2k+ css files? Does it mean it should have been refactored and that it contain to much duplicate?
• Should I define parent at the top for normal font, color, h1, etc., and then, when it's different change it per sections.. or instead always use the standard one and redefine each and every section.
• Should I use .class and #id a little bit everywhere, or should I try to minimize them and instead use long descriptor such as:

  .content .main tr td span a 
  or
  span.classname a 

Thank you!

tl/dr:

What's the best "second" read once you already understand CSS but would like to use it in a clean/professional way?

[EDIT]

Thanks all for your answer. I know I asked quite a lot of questions.. but they were only examples for the real question which is: What is the best "second" read once you already understand CSS but would like to use it in a clean/professional way. I.e., I was hoping to read a book explaining the examples I proposed.. but also would explain lots of other things that aren't css-syntax but more css-best-professional-use.

---

People will have a range of answers for these questions, but here are the approaches I would take:

Resetting

If you're working on a fragile layout -- one that could easily break if a few pixels aren't where you expect them to be -- consider using a reset. I would look into normalize.css. Instead of completely overwriting browser defaults, it smooths out the differences between browsers.

You could also consider resetting specific elements if you find yourself adding a lot of margin: 0; to your stylesheets.

Splitting up CSS documents

• Google recommends splitting them up so that individual pages aren't forcing users to download lots and lots of stylesheet rules that aren't actually used on the page that they're visiting.
• Yahoo recommends combining files to minimize the number of HTTP requestion
• Obviously, finding a balance is important, and this SO question weighs some of the pros and cons.

Classes and IDs or long chains of selectors?

I try to keep classes and IDs to a minimum (in both my HTML and my CSS). They tend to be more fragile when you're building pages that others will update with WYSIWYG editors. I add a few IDs or classes to large blocks of the page, then use CSS to target specific elements within those blocks. This is easier if you avoid deep nesting in your HTML as much as possible.

Working with a CSS preprocessor such as LESS or SASS can help you write more readable stylesheets. The ability to nest style rules in both LESS and SASS has helped me avoid a lot of specificity-related issues.

Still, specificity is a good CSS topic to be familiar with:

• CSS-tricks has a good article covering specificity
• The W3C's own documentation is worth reading.

Additional Resources

As far as additional reading is concerned...

• SitePoint's collection of articles and tutorials on CSS is a great resource for more advanced CSS tutorials, and they also feature some good articles covering CSS issues that are more advanced than what you'd find in many beginner-level books.

---

• Resets: I think yes, some dislike them, so it's up to you to figure out which one you like
• Split vs. Unified files: Depends. There are advantages to both (chorus: advantages, advantages!) One CSS file is easier to browse, and you can clearly find relationships in a single file. Then again, if you have planned the structure of your site, are developing compartmentalized widgets, or have lots of people working on the CSS committing files, a decentralized method might benefit you. With multiple CSS files, you can always use a compressor to serve them to the client as a single file, so it's more of a maintenence question.
• Large Files / Line Count: Are you saying you have 2,000 CSS files (holy crap!) or 2,000 line CSS files? Both aren't great, although the latter can be managed quite easily in an IDE that provides outlines and handles inheritance for you.The former...well, at least you have job security.
• Parent Definitions: Again, no right answer. The CSS rules for a small site will vary greatly from an enterprise level site. A good starting point might be checking out how jQueryUI handles styles and then forming your own opinion from there.
• Correct Selectors: Steve Souders talked about optimizing CSS selectors, coming to the conclusion that's it not worth it for your average site. So ignoring CSS optimization and based on your example, I'd say the second one is waaaay easier to maintain and ultimately far more predictable. If you HTML changes even slightly, the first one will break quickly. The second won't, and is far more portable.

There are things you can do in CSS to make your life easier. I highly recommend using a grid system for layout (blueprint, 960GS, etc). I personally like using a reset since it makes pixel perfect designs easier to manage. Other than that, research what people like Eric Meyers or site likes alistapart.com or smashingmagazine.com have to say on the topic.

tl;dr - there is no right answer, but definitely some good options

---

I can answer your questions based on my own experience, not necessarily the best practices out there.

• I reset certain tags, but not all the tags like the "CSS purists" do. Keep in mind that if you are using certain CSS libraries, like JQuery UI, Superfish menu, etc.. resetting the tags can really mess up these libraries UIs.
• I usually have one general layout/configuration CSS file and every complicated page has its own CSS file. So, every page includes these 2 CSS files plus my UI library files (JQuery UI, etc). This makes it easier for me to pin point and maintain it.
• 2K+?? Yes, very bad in fact. If you have file that big, you should really use YSlow to see how long it takes to load that file. The longer you page takes to load, the faster you users leave your webpage, unless they are forced to use it. :D
• I always like to "scope" my CSS, by prefixing with say #app. This ensures my global setting only affects my page content and layout, and they do not override the UI libraries.
• Use .class and #id in whatever way it makes sense to you. If you know this tag exists only one time, then use #id. If you know it might occur more than one time in the page, then the only option is to use .class.

---

As with many things there aren't really rights and wrongs, it's more about prefernce and manageability.

I use CSS Reset on some elements, I prefer the blank canvas start instead of finding a load of unknown defaults.

I don't think file size is really an issue, again what is easiest to manage is really more important. Split the file if it logical to do so.

Give some thought to optimisation and try to avoid unnecessary duplication. I like to define a parent font/styles as you call it for the most commonly used style, then just define the others as required.

Personally I like to define some common classes, i'm not sure if it's optimal but it's very usable, such as:

.bold {font-weight: bold}
.clear {clear: both}
.red {color: red}

If you do this for common requirements you can then simply use code like

<p class="bold red"></p>
<h2 class="red"></h2>
<br class="clear" />

Simples!

---

Use tabs. Makes it easier to see. Also i rather use .classname than #id. Example of a piece of css of one of my websites:

body {
                font-family: Arial,Helvetica,sans-serif;
                font-size: 11px;
                background-color: #99D9EA;
            }

            .lcategorie {
                background-image: url('http://images.alphenweer.nl/i/gradient-menu-left.png');
                background-repeat: no-repeat;
                padding-left: 2px;
                text-align: left;
                color: #FFFF00;
                font-weight:bold;
                width:200px;
                height:20px;
                display:block;
                cursor:pointer;
            }

            .rcategorie {
                background-image: url('http://images.alphenweer.nl/i/gradient-menu-right.png');
                background-repeat: no-repeat;
                padding-right: 2px;
                text-align: right;
                font-weight:bold;
                color: #FFFF00;
                width:200px;
                height:20px;
                display:block;
                cursor:pointer
            }

---

In addition to the good answers above, what you just described in your question is also otherwise called as Learning Curve.

We all go through it. It is inevitable, according to me.

The best approach probably is to make the best use of the vast resources available and then filter them out. Which is a knack developed only over time.

I don't think there are shortcuts. Although, I do agree, it would be nice to have a guiding hand to help us avoid pitfalls and time-wasters and tell us about all the best-practices.

But even those are available out there thanks to some really passionate, expert-in-their-field bloggers.

So explore-away is what I'd suggest.

---

If your lucky enough to have a Mac or a Hackintosh... then I highly recommend CSSEDIT (unfortunately only available on Macs). It will allow you to rapidly develop your understanding of CSS. I realize this doesn't answer your question, but if you try it, you'll understand why it is so important to the learning curve. Sadly, nothing else on windows comes close. I use windows 99% of the time and switch to my mac for CSSEDIT.