Patterns, breakfast of champions. Creating a website these days is a piece of cake, as simple as a bowl of cereal. It really is. A custom built enterprise behemoth of a web application, however, is a completely different kettle of fish. Each seemingly innocuous decision you make impacts the next and eventually becomes an avalanche of shortsightedness that kills you and the entire village. So, if you’re (un)fortunate enough to be involved a such a large project, watch your step. Getting the basics right might just save you and your kin. Now don’t go thinking I’m being hysterical, I’ve seen the carnage with my own eyes. What you, as a front-end developer, want need is HTML to be resistant to change. Making a durable and maintainable web site can really be less painless than it usually is.
Structural patterns Generic: HTML & JavaScript: Specific: JavaScript: require(['jquery','jquery-ui','validation'],function(){ … }); Generic: HTML & CSS: Specific: CSS: @import .. Preprocessors are well suited for this type of concatenation.
Scalable and Maintainable CSS Approaches | Medium Equals Message. Blog Archive » Visual Semantics in HTML and CSS. The web stack (simplified) between you and your users On the last day of TXJS, a developer asked me: Doesn’t Object Oriented CSS leave you with a pile of presentation based class names? Each layer in the web stack has its own architecture. You wouldn’t expect the DB schema to be used to architect the PHP middleware, and yet people expect that of the HTML and CSS. HTML needs to be written with a sense of the meaning of the data or content, something I call code semantics. Code semantics are incredibly important in the HTML for both portability and accessibility. Visual semantics describe all the repeating patterns in the design of the page. Separating Template Architecture From Styles Similarly, many PHP developers are tempted to match the CSS and HTML architecture to the PHP.
Shoehorning CSS and HTML into PHP abstractions prevents the code from being DRY and ultimately leads to code bloat, because, the CSS and HTML require a far more granular object structure than the PHP. An Introduction To Object Oriented CSS (OOCSS) Blog Archive » The media object saves hundreds of lines of code. What is the internet made of? At least the UI layer is mainly composed of media blocks. I talked about the Facebook stream story before, and all the tiny objects of which it is composed. For the most part, the stream story is made up of the media object repeated over and over. The media object is an image to the left, with descriptive content to the right, like this Facebook story: The media object The content area on the right can contain any other objects. Variations on the media object Sometimes the image is a tiny icon, a large video, or an avatar, but it is the same basic object.
What do we know? Can be nested Optional right button Must clearfix What have we decided *not* to know? It is equally important to define what is flexible, or unknown, about a new object. Image width, margins, and decoration vary Right content is unknown Width unknown.
BEM. Sass. OOCSS for JavaScript Pirates jQcon Boston. DRY.