For a bunch of historical reasons I use Dreamwidth to read RSS/Atom feeds.(0) A lot of the Dreamwidth styles -- and particularly the "Basic" one I randomly picked as "good enough", with a bunch of modules turned off, some years back -- have a lot of... clutter around the intended text. Quite a bit of the clutter can be turned off with Dreamwidth's Customize Style (only works if you're logged in to Dreamwidth :-) ), but not all of it. For years I tolerated the rest of the clutter as "not too annoying" -- but it was always "tolerated".

Recently I was inspired to try to reduce the clutter a bit further, after having some success fixing a couple of feed-induced formatting issues by using Dreamwidth's Custom CSS feature (also requires being logged into Dreamwidth!).(1)

Conveniently Dreamwidth S2 styles provide a lot of CSS hooks, and there is a fairly detailed list of ids and classes which is a useful reference for targetting custom formatting. (Mozilla also have a handy list of CSS selectors supported by Firefox; and (Mobile) Safari coverage is fairly similar. There is a handy list of useful CSS selectors.)

The most useful discovery is that all "feed" entries are wrapped in a div with the class journal-type-Y (amongst other classes)(2); this allows targetting changes to just affect feed posts, which means we can be more assertive in what we hide -- including hiding elements that would be useful on an actual Dreamwidth-based post.

For "feed" posts, the Dreamwidth-specific entry management/interaction options are not very useful: if there are any comments they should be on the original blog post, not on Dreamwidth's (temporary) copy of it. So those are an obvious choice to hide:

div.journal-type-Y ul.entry-management-links {
  display:    none;
}

div.journal-type-Y ul.entry-interaction-links {
  display:    none;
}

The display: none tells the browser to pretend the content is not in the page (ie, it doesn't even take up space; see display:none vs visibility:hidden for details; cf Now You See Me for the impact on screen readers, so display:none shouldn't, eg, be used to to hide text replaced by images that screen readers might need to read).

Once those are hidden, we don't need any extra padding at the bottom of the entry, so we can eliminate that too:

div.journal-type-Y div.entry-content {
  padding-bottom: 0px;
}

The "original post link(s)" on feed posts are repeated at the top and the bottom (no idea why). We do not need two copies (especially on tiny blog posts like many Metafilter many of which are one link long). Since we're tidying up the bottom already, let's eliminate the bottom copy of the links. This is a bit tricky because there may be more than one "original post link" on a post (especially if it goes through a feed aggregator like feedburner). In order to do it we need to use a more advanced (CSS3) selector to target syndication links after something that is not a syndication link:

div.journal-type-Y p.ljsyndicationlink ~ :not(.ljsyndicationlink) ~ p.ljsyndicationlink {
   display:    none;
}

(The tilde (~) means "at the same nesting level as this other element", as opposed to plus (+) which means "adjacent sibling".)

Certain feed sources (particularly Wordpress) include various links in their posts, including some hardcoded formatting (eg, br tags), which now unnecessarily take up space (there is nothing after them). So we can tell the browser to ignore those too:

div.journal-type-Y div.feedflare br:last-of-type {
  display:    none;
}

(where feedflare is the class that Wordpress puts on these extra elements).

Having sorted out the bottom of each entry, we can then move our focus to the top of the entries. We want to see most of the items included, but the default formatting takes a lot of space -- both by putting each item on its own line, even the image, and also including lots of white space. The original posting date/time is small enough to be easily tucked away on the right:

div.journal-type-Y span.datetime {
  float:       right;
}

and we can tell the feed "icon" to float to the left and allow text next to it, so that we can put the feed name next to it:

div.journal-type-Y span.ljuser img {
  padding-top:   5px;
  padding-right: 3px;
  float:         left;
}

div.journal-type-Y span.ljuser a b {
  margin-left:   2px;
  position:      relative;
  bottom:        -3px;
}

There isn't really anywhere obvious to put the "syndication author", but for most of my feeds there is only one author anyway -- and for the few where there are multiple posters, I only very infrequently care who posted it (and then I can click through to the original blog post). So we can tell the browser to eliminate the author name:

div.journal-type-Y p.syndicationauthor {
  display:       none;
}

That leaves the syndication link(s) at the top (we eliminated the links at the bottom above). There's a lot of extra space above them, which we want to eliminate so that they effectively float up towards the line with the feed name and date/time:

div.journal-type-Y div.entry-content p.ljsyndicationlink {
  position:      relative;
  top:           -1.3em;
  padding-top:    1px;
  padding-bottom: 2px;
  padding-left:   2px;
}

Having done that, they're now long as visually distinct which makes the feed post header a bit difficult to skim, so we can put a box around them. The Deamwidth "Basic" style includes alternating colour boxes around the entries, including around the titles of the entries, so it is visually pleasing to replicate that. (Unfortunately I couldn't find a way to do this without replicating the literal colour values from my specific style configuration -- ideally there'd be some way to reference the existing colours, but it is not obvious how.)

div.entry-wrapper-odd p.ljsyndicationlink {
  background-color: #cfe0e6;
  border: solid 1px #739adf;
}

div.entry-wrapper-even p.ljsyndicationlink {
  background-color: #ffdfbf;
  border: solid 1px #fc7f3f;
}

With all of that done, the last wide-spread visual problems are a bunch of unnecessary white space. Firstly between the syndication links (which we moved upwards) and the post content. I couldn't find the source of this white space, so I ended up hacking around it by targetting the "first element after the syndication links", and moving it upwards. (Unfortunately this only works if the blog feed includes HTML tags like p around their content; otherwise there is no "next element" to match.)

p.ljsyndicationlink + :not(.ljsyndicationlink) {
  margin-top: -20px;
}

Secondly there's a whole bunch of white space between individual posts. I was also unable to figure out where this was coming from (even Firefox Web Developer Inspector didn't show me anything containing it). So I ended up with a hack to counteract the extra space:

div.entry-wrapper {
  margin-top: -60px;
}

(The 60px value there is tuned by eye, but appears to be consistent across the devices I have looked at.)

Certain feeds also include content from their pages which is targetted by custom CSS on their pages, but comes out poorly rendered in another environment (because of the default formatting of the tags they used for structuring the content). For instance StuckInCustoms includes photo information as an overlay on their website, but it renders as long, partly empty lists, in the feeds. We can simply hide it in the feed display by targetting their CSS class:

/* Don't show StuckInCustoms "overlay" UL lists below photos */
div.daily-overlay {
  display:    none;
}

(leaving the option of clicking through to the actual feed post if I want to see the details; obviously this is only easy for the feeds that include classes on their unwanted content).

The overall result is much tidier than when I started, with the majority of the visible items being the "meat" of the feed posts.

(0) The short version is that I started using LiveJournal to read feeds, a decade or so when most of the things I followed were on LiveJournal, and a few others could be syndicated in. LiveJournal is "mostly empty" now, and I've moved most of my syndicated feeds over to Dreamwidth for a better run hosting of the same software base.

(1) The first two issues were overly wide embedded images, and overly wide text in pre-tags (typically URLs in fixed-width email to feeds like Risks Digest). In both cases the fix is to limit the maximum width that will be displayed for something injected by a feed. This can be done with something like:

/* Avoid large images adding insane scroll bars */
div.hfeed img {
  display:    block;
  max-width:  850px;
  max-height: 850px;
  height:     auto;
  width:      auto;
}

/* Avoid super-wide lines in pre tags causing insane scroll bars */
pre {
   max-width:  900px;
   overflow:   hidden;
}

pre:hover {
   position:   relative;
   max-width:  900px;
   overflow:   auto;
   z-index:    99;
}

where the arbitrary widths suit my usual browser windows on most of my devices (single-user use cases are easier :-) ). (For reference, the "pre" solution was inspired by Perfect Pre Tags, although isn't identical to any solution there. My version auto-adds scroll bars if and only if you hover over it, which works well with a mouse that allows horizontal scrolling easily; otherwise it just truncates the text which is okay for this use case.)

(2) Before I found div.journal-type-Y as the magic class for a feed (which is not particularly obvious at first glance!), I was assuming I'd need to match on the class names that are named after the feed account, all of which end in "_feed".
CSS3 Selectors allow doing a partial string match (optionally anchored to start/end) on attributes of elements, such as the class. For instance:

div[class*="_feed "] ul.entry-management-links {
    display:    none;
}

(where we deliberately include a trailing space, to match "end of class name".)

ETA, 2014-05-20: The ability to target the feed name (eg, div.journal-FOO_feed) is very useful for hiding special annoyances only in a single feed, or eliminating stray white space that cannot otherwise be targetted. For instance:

/* Metafilter has no paragraph tags at the top of entries */
div.journal-metafilter_feed p.ljsyndicationlink {
  margin-bottom: -8px;
}

(the lack of paragraph tags means that some of the other formatting to reduce the top-of-entry white space don't match.) And:

/* Financial Crypto has no tags inside content, and only */
/* one ljsyndicationlink tag per post so we special case */
/* it, to only show the first ljsyndication link */
div.journal-financialcrypto_feed p.ljsyndicationlink ~ p.ljsyndicationlink {
  display: none;
}

div.journal-financialcrypto_feed p.ljsyndicationlink {
  margin-bottom: -8px;
}

These are minor one-off tweaks. But if I do them as I spot them, for the more prolific posting feeds with special cases that I follow then the whole page becomes even less cluttered. Win.