10

Ask DN: Where can I find examples of beautiful, maintainable CSS code to learn from?

almost 10 years ago from , Web Developer

The CSS code would preferably come complete with the website it belongs to and the website would have a responsive design (fluid grids, media queries, etc.). I imagine a well-designed open-source website meeting my criteria.

9 comments

  • Marc EdwardsMarc Edwards, almost 10 years ago (edited almost 10 years ago )

    Might be worth taking a look at this as well: http://mvcss.github.io

    I think a big part of ensuring things are maintainable comes from breaking out your CSS into smaller, modular files. Things like your reset, grid, base styles, navigation and then page specific stuff can be separated in such a way that it lets you start new projects or make large changes easily.

    Using something like Sass lets you not only do this, but compile to a really tiny, single CSS file. Sass also lets you keep all your colours in a single variables file that your other files reference.

    Disclaimer: I’m far from an expert at this stuff.

    3 points
    • Matt EMatt E, almost 10 years ago

      I'm in total agreement with the tips you've mentioned and I too found MVCSS on the front-page. What I'm looking for are code examples and I'm just about to check out the ones recommended in this thread. Thanks for commenting.

      0 points
  • Marc BodmerMarc Bodmer, almost 10 years ago

    Try looking at Bootstrap source code: https://github.com/twbs/bootstrap/tree/master/less

    0 points
    • Matt EMatt E, almost 10 years ago

      Awesome, so instead of a library I was looking more for a website, but I've got one now. Thanks for sharing.

      (By the way I love 500px's new sign at the front of their new building.)

      1 point
  • Alexander DinerAlexander Diner, almost 10 years ago

    Inspecting websites will only show you production code, while most developers use some sort of CSS preprocessing these days. I would find a good open source project on GitHub and check out their SASS or LESS files, how they structure them, importing schemes, &c.

    0 points