Some Thoughts on CSS

Some thoughts about CSS

Many of us, who work with enterprise frameworks like .NET or Java, have our strengths in languages which feature strong typing and object oriented programming. Well, that`s somehow understandable because this is the core concept we use in all projects. In web applications generally, code reviews target the server-side code. Client-side coding quality (CSS, JavaScript and HTML) is sometimes put aside.

Due to lack of time, learning client-side coding in-depth is often put off. Quick tutorials and Google searches are quite popular when solving something that comes up in a project. Some developers actually claim that they know JavaScript or CSS quite well because they managed to solve all the problems they had faced until now (no matter how). And the project grows in size, team members come and go. The client-side related files become a huge melting pot of different coding styles, practices and hacks to support different browsers. Actually, they become quite hard to manage.

I`ve recently searched for useful reading on this subject. My focus was on CSS. Blissfully, I came across several interesting articles.

A List Apart is often considered a top CSS learning website. I will mention some articles just for the sake of example. To overcome headaches related to some basic Рand at the same time, crucial Рissues, I recommend reading about positioning and floats  which are often misunderstood and misused. The article about standards is a bit old, but most of the parts are still not outdated.

There is an easy-to-read free book called Scalable and Modular Architecture for CSS. It has a premium version, too, which of course, is more thorough. It starts with the basics and it also covers some HTML 5-related topics.

A controversial subject is resetting CSS. The goal of a reset style sheet is to reduce browser inconsistencies in things like default line heights, margins, heading font sizes, and so on. Among the pioneers of this method, Eric Meyer, created a reset style sheet that is still in use on millions of websites today.

The object oriented programming approach has a great success nowadays. Why not apply it in style sheets too? The truth is that some styles can be reused in many places. One of my favourite web sites, Smashing Magazine, has a good article on object-oriented CSS. Useful references to other object-oriented CSS related sites can be found in the article. CSS lint takes care of the object-oriented coding and, of course, also enforces other best practices.

Semantic naming is essential everywhere, including CSS. A newbie on a project would understand the usage of a class name like “outgoing-url” rather than “red-text-link” – that is, what a class is used for, instead of how what an element looks like.

CSS files tend to increase in size and complexity for large projects. Among other things, CSS lacks the concepts of constants or variables. Either newer, smarter CSS syntax rules or some tools are needed to make style sheets easier to manage. The first approach is quite difficult and relatively much time has to pass in order to gain browser support. So a tool called SASS (Syntactically Awesome Style Sheets) has been created, which is an extension for CSS3. Furthermore, an open source CSS authoring framework called Compass has been built which is based on SASS.

There are so many approaches and best practices out there – and I just mentioned some of them. Of course, it is impossible to adopt all of them for a single project or solution. We should find what really suits our needs and then tailor some rules and checklists. …And of course, they should always be respected!

How do you feel about this subject as a developer (not necessarily a front-end guru)?

image source

Tags: ,

2 comments

more on OOcss by Nicole Sullivan (stubbornella) here: http://oocss.org/

Sass, like Less is a precompiler. You write “pseudo-css” (i.e. scss/sass, less), which it compiles to css; it’s not an extension, it’s a tool (like coffeescript is for javascript). But since it’s so much easier (think variables, functions), it might be a good start for beginners.

how does compass compare to, e.g. less elements? i prefer it, since i can see the code.

SASS is a meta language – that is, a kind of a new language. Compass is an authoring framework (not a language), which enables you to easily compile your SASS code, have some configuration (like storing the paths to images or other scripts in a single place) etc. They can be hand in glove in a project to make development easier. I let this artice explain more on this topic.

Leave a Reply

Your email address will not be published. Required fields are marked *