LESS - Leaner CSS Home - Scalable and Modular Architecture for CSS 960 Grid System Book - Scalable and Modular Architecture for CSS I have long lost count of how many web sites I’ve built. You would think after having built a few hundred of them I would have discovered the “one true way” of doing it. I don’t think there is one true way. I have been analyzing my process (and the process of those around me) and figuring out how best to structure code for projects on a larger scale. SMACSS (pronounced “smacks”) is more style guide than rigid framework. Inspiration In trying to learn more about what does and doesn't work in maintaining larger projects, I looked at how others were trying to solve similar problems. What’s in here? My thoughts have been compartmentalized around a number of topics related to CSS architecture. Now get started and dive in!
CSS Tools: Reset CSS The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on. The general reasoning behind this was discussed in a May 2007 post, if you're interested. Reset styles quite often appear in CSS frameworks, and the original "meyerweb reset" found its way into Blueprint, among others. The reset styles given here are intentionally very generic. In other words, this is a starting point, not a self-contained black box of no-touchiness. If you want to use my reset styles, then feel free! Previous Versions v1.0 (200802) Acknowledgments Thanks to Paul Chaplin for the blockquote / q rules.
l Everything You Need To Know About CSS Selector Specificity There's an obscure topic of CSS that I think many people aren't aware of. It's called 'specificity'. I suppose it's not as glamorous as rounded corners, drop shadows or animations but it's still just as important in your day to day work as any other part of CSS. So what is CSS specificity? It's a weighted value system for all of your selectors. Essentially, each piece of your selector has a value applied to it. IDs IDs are the most powerful type of selector you can use. The first example below has a point value of 100, while the second example has a point value of 300. #content { }#content #aside #caption { } Classes Your second most important type is the class selector. The two selectors below are of equal value. #caption { }.content-highlight .aside-type .float .bold .uppercase .quote .featured .etc .etc .etc { } Elements Last but least are elements. Again, both selectors below have the same point value. .uppercase { }html body div div blockquote span span span b i { } Odds & Ends Resources
La gestion des couleurs avec Sass & Compass. Enfin ! Je prends enfin le temps de rédiger un article sur mon outil favori du moment, le couple : Sass & Compass. Dans ce micro-tutoriel je vais vous montrer comment modifier la palette de couleur de votre site en ne modifiant qu’une seule valeur. Tant que j’y suis je vous recommande une fois de plus l’utilisation de Zen-Coding. Comment faire ? En consultant la doc de Sass & la doc de Compass… Mais comme je suis gentil je vous donne la solution pour cette fois, mais pensez à la consulter la doc, ces deux outils sont des véritables trésors qui vont vous faciliter la vie dans votre quotidien d’intégrateur. Le « moteur » Le concept consiste à générer de multiples palettes de couleurs en ne se basant que sur une seule couleur d’origine, un peu à la manière de Color Scheme Designer mais entièrement en css. $fond:#222; $texte:#AAA; $base_color: #48A3E9; Démonstration & téléchargement Vous pouvez voir un exemple de rendu compilé avec la couleur #48A3E9 sur cette page.
Blog Archive » Object Oriented CSS, Grids on Github How do you scale CSS for millions of visitors or thousands of pages? Object Oriented CSS allows you to write fast, maintainable, standards-based front end code. It adds much needed predictability to CSS so that even beginners can participate in writing beautiful websites. I recently presented Object Oriented CSS for high performance web applications and sites at Web Directions North 2009. Object Oriented CSS: Two main principles 1. I’m writing a framework to demonstrate the technique, but more than anything, Object Oriented CSS is a different way of approaching CSS and the cascade. The answer, for most sites, is that it grows out of control and becomes an unmaintainable tangle of spaghetti code. Current methods for writing CSS require expert level ability just to get started. We don’t trust each others code Imagine a JavaScript developer wrote a function to return area, and every now and then it randomly returned the diameter instead. What not to do #myModule h2{...} What’s up next?
Methodology Usually the website development process is based on the assumption that design and technical requirements will not change. A designer, a front-end developer and a programmer work each in their field, often without interfering each other: A designer creates a site design in the form of design layout Front-end developer create static HTML/CSS pages based on the design layout Programmer creates templates from these static pages and then writes some JavaScript Such an approach works well only in the case if the website design remains the same all the time of his life and the changes only add more content. But usually that is not happening. If the website source code is not following the defined structure, if its development is not based on fixes rules, it gradually becomes more and more difficult to maintain. The conditions of the methodology emergence BEM-methodology was developed at Yandex while workig on a large number of web services, and is aimed to achieve following: