If we don’t adhere to the SRP then we are likely to end up with code which does more than it should, this means that altering one part of that code could negatively impact a seemingly unrelated part of the same snippet. It also makes our code a lot less flexible in that we find our code is trying to do too much; it is too specific in its job to be portable and reusable. Abstracting chunks of functionality into several responsibilities means we can reuse a lot more of our code and recombine it over and over with other similarly abstracted chunks.

Ha ha, can't believe I just found this.

W3Schools
An Intervention
Are you using? Abusing? We are here to help.

I once wrote that there was no need to use a CSS pre-processor like LESS or Sass. I was wrong. Very sorry.

A collection of thoughts, experiences, ideas that I like, and ideas that I have been experimenting with over the last year. It covers HTML semantics, components and approaches to front-end architecture, class naming patterns, and HTTP compression.

Cassette automatically sorts, concatenates, minifies, caches and versions all your JavaScript, CoffeeScript, CSS, LESS and HTML templates.

It's flexible, extensible and optimized for developer happiness.

Pears are common patterns of markup & style

Look up HTML5, CSS3, etc features, know if they are ready for use, and if so find out how you should use them – with polyfills, fallbacks or as they are.

Expressive, dynamic, robust CSS

Bootstrap is a toolkit from Twitter designed to kickstart development of webapps and sites.
It includes base CSS and HTML for typography, forms, buttons, tables, grids, navigation, and more.

Zen Coding is an editor plugin for high-speed HTML, XML, XSL (or any other structured code format) coding and editing. The core of this plugin is a powerful abbreviation engine which allows you to expand expressions—similar to CSS selectors—into HTML code.

When working in teams or when people are able to publish add-on components for your project, it becomes very cumbersome to try to ensure that you are not loading duplicate JavaScript files or CSS Stylesheets. It would be much nicer to just tag your control as being dependent on specific client files and not worrying about if they've already been included with a page or other files. This was the primary reason why the ASP.Net ClientDependency framework was created. ClientDependency also manages all of the script/style file compression, combination, minification and persistence for you. It will even detect and process script/styles that aren't registered with the framework and other requests such as json that can be minified/compressed. All of this is fully configurable if you need to modify the default behavior.

Like a lot of developers, we start every HTML project with the same set of HTML and CSS templates. We've been using these files for a long time and we've progressively added bits and pieces to them as our own personal best practices have evolved.

Now that modern browsers are starting to support some of the really useful parts of HTML5 and CSS3, it's time for an update, and we thought we'd put it out there for everyone to use. By no means do we see this as the end-all and beat-all, but we think it's a fairly good starting place that anyone can take and make their own.

The happy & awesome way to build fluid grid based websites.

How do I not already have this bookmarked?

Compatibility tables for features in HTML5, CSS3, SVG and other upcoming web technologies

Background images make pages look good, but also make them slower. Each background image is an extra HTTP request. There's a fix: combine background images into a CSS sprite. But creating sprites is hard, requiring arcane knowledge and lots of trial and error. SpriteMe removes the hassles with the click of a button.

surprised I don't have this bookmarked already

For one, SenCSs isn’t a framework like other CSS frameworks. It doesn't include a layout system, and I'm actually not sure it should be called a "framework" — But I'll go with it until I find a better term.

Now, if not a layout system littered with silly classes and pre-set grids, what does SenCSs do for you? SenCSs does everything else: baseline, fonts, paddings, margins, tables, lists, headers, blockquotes, forms and more. All the stuff that's almost the same in every project, but that you keep writing again and again …and again. SenCSs handles that for you. And nothing more.

I needed a middle ground. Images were necessary to pull off things like bevels and rounded corners and gradients and all those effects that make a button look like a button. But I needed HTML text to allow for easy button creation, and preferably in a way that would allow me to use both anchors and buttons interchangeably.

This site is here to highlight leading edge stuff that people are doing with Mozilla Firefox and the open web. The web is accelerating with the rise of modern browsers and Firefox is leading the pack - both in terms of adoption by end users and the technology itself. Adoption of technology landing in browsers usually takes a couple of years as ideas and interfaces spread from browser to browser and then is picked up by developers. Exploring what’s possible helps drive adoption and interest both on the parts of developers and browser builders. This site is here to help show what’s possible at the edges of web technology.

Use a space instead of a dot to prevent breaking layouts
Add a zero font-size property to make it all smooth

Float is a CSS positioning property. If you are familiar with print design, you can think of it like an image in a layout where the text wraps around it as necessary. In web design, an image that is floated remains a part of the flow of a web page. That means that if it changes in size or if the elements around it change, the page will automatically adjust (reflow). This differs from page elements that are absolutely positioned. Absolutely positioned page elements are removed from the flow of a web page. Absolutely positioned page elements will not affect any other page elements, whether they touch each other or not.

Flexible Web Design
Creating Liquid and Elastic Layouts with CSS

tables vs CSS - dated, but the fundamentals still apply

ideas for table design

How to Size Text in CSS
by Richard Rutter

Blueprint is a CSS framework, which aims to cut down on your development time. It gives you a solid foundation to build your project on top of, with an easy-to-use grid, sensible typography, useful plugins, and even a stylesheet for printing.

The above is, of course, a starting point: there are myriad other challenges that face the liquid web designer, most of which arise when you introduce fixed content (such as images, Flash, and so forth) into a fluid framework. I’ve been experimenting with a few possible solutions on my blog, but other, better workarounds are still out there.

A full featured and beautiful CSS (Cascading Style Sheets) framework which combined the best of Blueprint, Tripoli (hence the name), Hartija's print stylesheet, 960.gs's simplicity, and Elements' icons, and has now found a life of its own.

As one of the original authors of Blueprint CSS I've decided to re-factor my ideas into a stripped down framework which provides the bare essentials to begin any project. This framework will be lite and strive not to suggest un-semantic naming conventions. You're the designer and your craft is important.

Eric Meyer talk transcript