Object Oriented CSS · stubbornella/oocss Wiki. 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. What I have discovered are techniques that can keep CSS more organized and more structured, leading to code that is easier to build and easier to maintain. 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! 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: Build a Street Fighter Demo with CSS Animations and JavaScript. I recently learned a cool technique from Simurai about how to animate PNG sprites with the CSS3 animations' steps() property. The main idea in this technique is to "recreate" some kind of animated GIF but with the tiles of a PNG sprite. As with everyone I know, I played to Street Fighter in my childhood and when I saw this ... guess what popped in my head? If the pen doesn't render above, click here to see it in action. Let's Create the First CSS Move We'll start with the punch (see in the sprite bellow it's the third one).
First we need to open Photoshop to create the sprite. Then we need to set up a DIV for Ken which will receive our punch move (and all our other future moves): Let's assume vendor prefixes are implicitly working. What we just did is apply an animation (punch) to a class name (.punch) which basically animates background-position from 0px to -280px (on x axis). Finally we need a way to add/remove the .punch class name on DIV.ken when another key is pressed. What's Next? CSS Border Radius Generator. CSS Lint. CSS3 Please! The Cross-Browser CSS3 Rule Generator. Collections de polices «standard» pour le Web. Cette page permet de tester la présence de différentes polices de caractères listées. Si une police est absente, le navigateur utilisera à la place une police de style opposé: sans-serif pour les serif et inversement; serif pour les monospace.
Collections de polices testées Test des polices Notez que la citation dans le texte d’exemple utlise deux espaces fines insécables (entité HTML  ), après les guillemets ouvrant et avant les guillemets fermant. Référence du texte de démonstration: Philippe Jaccottet, Ce peu de bruits, Gallimard, 2008, p. 50. Code smells in CSS. 20 November, 2012 Chris Coyier recently answered someone’s question: How can you tell if your CSS code smells?
What are the signs that the code is sub-optional, or that the developer hasn’t done a good job? What do you look for in the code to determine how good or bad it is? I thought I would extend Chris’ great answer with my own, additional take on things… My day-to-day life is spent working in-house at BSkyB… I work on big websites, the last of which took me over a year to build the front-end for (and it’s still ongoing). I’m going to share just a few things (there will, no doubt, be things that I have missed) that I look out for in CSS that will give you and idea as to its quality, its maintainability and its integrity… Undoing styles Any CSS that unsets styles (apart from in a reset) should start ringing alarm bells right away. Any CSS declarations like these: border-bottom:none; padding:0; float:none; margin-left:0; …are typically bad news.
Magic numbers Qualified selectors Brute forcing ! !