background preloader

CSS Style Guides

CSS Style Guides
As we wrap up our recent poll on ordering CSS properties, it brings up the larger issue of CSS style guides. Ordering properties is just one choice you have to make that makes up a complete styling strategy. Naming is a part of it. Let's round up some existing ones. But first... I love pattern libraries. The List I'll list some excerpts from each that I like below. GitHub GitHub CSS Style Guide → As a rule of thumb, don't nest further than 3 levels deep. Unit-less line-height is preferred because it does not inherit a percentage value of its parent element, but instead is based on a multiplier of the font-size. Google Google HTML/CSS Style Guide → Use ID and class names that are as short as possible but as long as necessary. E.g. Do not concatenate words and abbreviations in selectors by any characters (including none at all) other than hyphens, in order to improve understanding and scannability. E.g. .demo-image not .demoimage or .demo_image Idiomatic CSS Nicolas Gallagher's Idiomatic CSS → More?

web services - Understanding REST: Verbs, error codes, and authentication How to Customize Browser Scrollbars Using CSS We`re all using web browsers to navigate on internet. Most of you(to be more specific, 65% according to my analytics) are using Chrome and Safari to navigate through this website. These 2 browsers have something in common: they are both built on the WebKit platform, or in other words, they are WebKit browsers. Did you know that you can customize the way a scrollbar looks? Customizing scrollbars is easy, being based on a pure CSS solution, but there`s a glitch: custom scrollbars works only for WebKit browsers. Let`s write some code: As you noticed already, each element has the custom prefix ::-webkit-.

transform-function The <transform-function> CSS data type denotes a function to apply to an element's representation in order to modify it. Usually such transform may be expressed by matrices and the resulting images can be determined using matrix multiplication on each point. Coordinates for 2D graphics There are several coordinates model used when describing transformation. Cartesian coordinates In Cartesian coordinates each point of the Euclidian space is described using two values, the abscissa and the ordinate. Each linear function is described using a 2x2 matrix like: Applying the transformation consists in doing, for each point, the matrix multiplication between both: It is possible to apply several transformation in a raw: With this notation, it is possible to describe, and therefore composite, most usual transformations: rotations, scaling or skewing. Coordinates for 3D graphics Functions defining transformations matrix() Gecko (Firefox) accepts a <length> value for and . Syntax Values [a b c d tx ty]

Object Oriented CSS · stubbornella/oocss Wiki RESTful Web services: The basics The basics REST defines a set of architectural principles by which you can design Web services that focus on a system's resources, including how resource states are addressed and transferred over HTTP by a wide range of clients written in different languages. If measured by the number of Web services that use it, REST has emerged in the last few years alone as a predominant Web service design model. REST didn't attract this much attention when it was first introduced in 2000 by Roy Fielding at the University of California, Irvine, in his academic dissertation, "Architectural Styles and the Design of Network-based Software Architectures," which analyzes a set of software architecture principles that use the Web as a platform for distributed computing (see Resources for a link to this dissertation). This article suggests that in its purest form today, when it's attracting this much attention, a concrete implementation of a REST Web service follows four basic design principles: Back to top

Performance & Organization - An Advanced Guide to HTML & CSS Having the ability to write HTML and CSS with a solid understanding is a great expertise to have. As a website’s code base and traffic grows, a new skill set comes into play, one that is extremely important to both development time and user experience. Knowing the fundamentals of website performance and organization can go a long way. The organization and architecture of a code base can greatly affect not only the speed of development, but also the speed at which pages render. Both of which can be sizeable concerns not only for developers but also users. Additionally, taking a few small steps to improve the performance of a website can pay off in dividends. Strategy & Structure The first part to improving a website’s performance and organization revolves around identifying a good strategy and structure for developing the code base. Style Architecture The architecture outlined above includes three directories, all with individual groups of styles. Object Oriented CSS Choosing a Methodology

CSS drop-shadows without images Drop-shadows are easy enough to create using pseudo-elements. It’s a nice and robust way to progressively enhance a design. This post is a summary of the technique and some of the possible appearances. Demo: CSS drop-shadows without images Known support: Firefox 3.5+, Chrome 5+, Safari 5+, Opera 10.6+, IE 9+ I’ll be looking mainly at a few details involved in making this effect more robust. After a bit of back-and-forth on Twitter with Simurai, and proposing a couple of additions to Divya’s and Matt’s demos using jsbin, I felt like documenting and explaining the parts that make up this technique. The basic technique There is no need for extra markup, the effect can be applied to a single element. The pseudo-elements need to be positioned and given explicit or implicit dimensions. The next step is to add a CSS3 box-shadow and apply CSS3 transforms. One of the pseudo-elements then needs to be positioned on the other side of the element and rotated in the opposite direction.

CSS Specificity Some people are confused by CSS Specificity, especially with all of the (not-so) new CSS3 Selectors. The image below may help make sense of CSS Specificity. Download the PDF Legend: X-0-0: The number of ID selectors, represented by Sharks0-Y-0: The number of class selectors, attributes selectors, and pseudo-classes, represented by Fish 0-0-Z: The number of type selectors and pseudo-elements, represented by Plankton a la Spongebob*: The universal selector has no value +, >, ~: combinators, although they allow for more specific targeting of elements, they do not increase specificity values:not(x): The negation selector has no value, but the argument passed increases specificity CSS SpeciFISHity You can download the PDF of fishy CSS specificity here Specificity determines which CSS property declaration is applied when two or more declarations apply to the same element with competing property declarations. With CSS3 Selectors, order is even more important, as is understanding specificity: !

Related: