Review of CSS on Nieman Lab site

Screen Shot 2015-03-04 at 10.58.40 PMLast spring, I was elected to be ONA Mizzou’s social media coordinator. As part of my position, I maintain ONA Mizzou’s Twitter and Facebook, and I regularly search the web for interesting articles on digital media. Every week, I always find myself on Nieman Lab’s site. The site, based out of Harvard, always has current and interesting articles on new media. I enjoy reading Nieman Lab’s content, and I also think the website’s design is effective.

Although Nieman Lab publishes a slew of daily content, the breathable design of the website makes articles easy to read. I wanted to inspect the site’s CSS elements to see if I could use some techniques from the site. The first thing I noticed about Nieman Lab’s site is its use of inline styling. I opened the external stylesheet for the site and found style rules for only seven classes. I also found a stylesheet for the site’s type, filled with a series of crazy long URLs. The rest of the site’s style elements are found in the HTML code.

Screen Shot 2015-03-04 at 11.10.25 PM

Screen Shot 2015-03-04 at 11.17.29 PM
This is terrifying

For example, I inspected the orange pull quote box at the top right of the homepage and found CSS code for the element on the same line as the element’s class. Simple CSS like background color and padding was used to style this element. I found this same approach to styling in other elements. I scrolled down the page  and inspected an image with a headline and sub headline underneath it. The image was floated left and given a width of 100%, relative to the other objects on the page.

The more I inspected the website, the more confused I became. One style rule is written as style=”color:white !important;”. Many CSS styles were repeated for each element. Each different class had to repeat style rules like font family and color. Large sections of the site’s code were commented out. Overall, it seems that the website is unnecessarily weighed down in code. Although the design works in practice, the code could be simplified on the backend with one cohesive stylesheet. Unfortunately, I didn’t gain many CSS ideas from this site because I was so confused by the CSS setup. However, I have learned a few examples of things to avoid when trying to create a site that is light in code.

Advertisements

3 thoughts on “Review of CSS on Nieman Lab site

  1. Ah yes, !important. My old frenemy.

    !important will essentially move any CSS rule to a spot where it’s going to override anything else in the stylesheet. It can be used to test things, but you really don’t want to deploy code with !important in it, because what that means is that you don’t fully understand your stylesheet and how items are inheriting from one another.

    Like

  2. On the crazy long URL: I completely agree that it’s terrifying. On what Rob said about !important: I find it interesting that Nieman Lab is using something that’s not the best to deploy. I’m kind of surprised the CSS for this website isn’t as clean/efficient as I would expect.

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s