Hi Walt,
I just did a quick scan of your CSS Code, no thorough review, but some
things I did notice (and just as an aside, my findings are based on my
interpretation(!) of OOCSS and how to write good/clean CSS):
- you have a class blkbrd (which is a 1px black border). I think the
name blkbrd is just a shorthand for what your CSS does. What are you
going to do if you decide that it should be a blue border? Having a
class blkbrd which actually makes a blue border would be confusing
indeed.
- same goes for your fontsize classes (e.g. .f125). Again, I get the
idea, but as soon as you change the font sizes just slightly your
naming convention will fall.
- You give a better example of how if should be done as well. The
class name (thintop) is not optimal (because again it implies how the
result of your class should look) but its not as specific as blkbrd.
- you seem to be a fan of descriptive class names..I just found "p15",
which gives a 15px padding. I won't go into detail with every finding,
you get the idea. Try to prevent using classnames that hint at how the
element should look. Use more generic classnames (like "sommers" or
"glow" from OOCSS).
-just found this selector: ".nav li a.current". I bet you only ever
assign "current" to the anchor tags, no to the list items, so
".nav .current" would do
- by the by, why are you using a .nav wrapper element anyways? You
only set the margin, which could easily be done using only the ul.
Were you using HTML5, you would be using the <nav> element, but since
you are not, you could just drop the wrapping div and assign the
".nav" class to the <ul> directly
- all your headings are bold, but you repeat the declaration for every
selector. Using "h1, .h1, h2, .h2, h3, ..., .h5 {font-weight: bold}"
would do the trick and is in my opinion a little cleaner when setting
defaults.
- I see that you are setting "h1, h2, h3, h4, h5, h6, ul, ol, dl, p,
blockquote" to "padding: 10px"...but then on most elements you take
the top and the left padding away again. In that case you should think
about whether or not setting the padding to 10px on all sides for all
those elements really is a sensible default.
- ".callout span.quot"...is the "span" really necessary in that
selector? It's one more element that needs to be validated before the
browser can apply the style....
- ".media .img img"...quite a funny selector, don't you think? ;)
Scanning your HTML:
- found a div that has those classes: "unit size1of3 mr30"...where
mr30 gives a 30px margin to the right. I think using a pixel margin on
an element that is part of the OOCSS grid (size1of3) is very
dangerous. Sometimes it won't even work (as you probably figured out
by yourself...you have a div with "unit size2of3 lastUnit mr30", in
which case the mr30 has no effect at all). I would try to stay away
from assigning anything but the width to the grid elements, and rather
set the margin or padding to the elements inside that grid element.
- one thing CSS unrelated...beneath your "Daily Headlines" (although
not just there) you are listing a lot of subheadlines; have you
thought about using an ordered list for that? In effect this is what
you are doing...
- in your head you are using the class "unit size1of6"....size1of6 is
not defined anywhere ;)
- what are your reasons for using display: inline on the <li> elements
for your navigation? Problem with that is that your <li> elements are
basically outside the <ul> box, which will make the styling a bit odd.
Using float would work just as well...but I guess that's just personal
preference...
- I was about to congratulate you for your use of the standard module
format (huge fan right here)...then I realized that you are using CSS3
for "mod littlered"'s rounded corners ;) If you are going to use CSS3
with no IE fallback, using the standard module format will probably be
overweight (in my experience). I would however make perfect sense if
you included the rounded corners per image only in the IE
stylesheet...did you do that? I didn't check, but if you did, I owe
you a brownie. (matter of fact, I just checked and you don't have an
IE stylesheet ;) But using the mod format for IE only and CSS3 for the
rest would make perfect sense. I strongly recommend SASS and Compass
to you, maintaining separate stylesheets is amazingly simple with
those).
Anyway, I hope that was of some help. Your CSS all in all looks pretty
lean so far, I have seen far worse ;)
On Sep 29, 5:29 pm, Walt <
w...@schmidty.com> wrote:
> OK, maybe this will sound like a stupid question, but I would
> appreciate the feedback. Here's my first stab at OOCSS -
http://66.94.67.189/v2