CSS

Really interesting piece by Adam Morse: CSS and Scalability

I also started to think about communication and how it moves in multiple directions. If I’m reading html, I want to know what the css is going to do. If I’m reading css I want to know what will happen if I apply it to a block of html. In a great system there is a two way street of information. If you look at the CSS, you can tell what will happen. If you look at the html, you know what the code will do.

Along with some great tools

And also an older one from August 2014: Good CSS

On kinda the same topic by Jonathan Snook: Scalable and Modular Architecture for CSS

and in the same vein but about HTML Semantics by Nicolas Gallagher from March 2012.

Speaking of Semantics here is a tool – Outline Audit – a small JavaScript program that analyses the document outline of the current page, and emits warnings in the developer console when something looks odd.

Organizing your CSS file:

Why is this so hard: Vertical Centering with CSS

It’s the declared height issue that messes me up every time.

Absolute Horizontal And Vertical Centering In CSS

We’ve all seen margin: 0 auto; for horizontal centering, but margin: auto; has refused to work for vertical centering… until now! But actually (spoiler alert!) absolute centering only requires a declared height* and these styles

.Absolute-Center {
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}

Organizing CSS

Not yet into css pre-processors (I know, I know) but interesting organization structure and language none-the-less.

The “Other” Interface: Atomic Design With Sass

By Robin Rendle August 2nd, 2013

As front-end developers and designers, we’re constantly refining two interfaces simultaneously: one for visitors who load the website, the other for developers who have to tackle the code in the future, when adjustments or full-scale redesigns must be made. Yet we tend to assign the role of “user” to the first group, often forgetting that the code we write must work for developers in a similar way. We shouldn’t forget that developers are users, too.

Semantic CSS With Intelligent Selectors

With the advent of object-oriented CSS (OOCSS), it has become increasingly fashionable to “decouple presentation semantics from document semantics.” By leveraging the undesignated meanings of classes, it is possible to manage one’s document and the appearance of one’s document as curiously separate concerns.

In this article, we will explore an alternative approach to styling Web documents, one that marries document semantics to visual design wherever possible. With the use of “intelligent” selectors, we’ll cover how to query the extant, functional nature of semantic HTML in such a way as to reward well-formed markup. If you code it right, you’ll get the design you were hoping for.