Build Atomic Design Systems. Book - Scalable and Modular Architecture for CSS. As briefly mentioned in the previous section, a Module is a more discrete component of the page.
It is your navigation bars and your carousels and your dialogs and your widgets and so on. This is the meat of the page. Modules sit inside Layout components. Modules can sometimes sit within other Modules, too. Each Module should be designed to exist as a standalone component. When defining the rule set for a module, avoid using IDs and element selectors, sticking only to class names.
Module example Avoid element selectors Use child or descendant selectors with element selectors if the element selectors will and can be predictable. Styling with generic element The problem is that as a project grows in complexity, the more likely that you will need to expand a component’s functionality and the more limited you will be in having used such a generic element within your rule.
<div class="fld"><span>Folder Name</span><span>(32 items)</span></div> Now we are in a pickle. New Contexts Subclassing. What is OOCSS? Before I get started, I just want to make it clear that this review of OOCSS is simply my take on the methodology and my method of comprehending it.
Separating structure from skin means to abstract the structure and positioning styles of an object from the presentational styles, or skin. CSS, Sass, SCSS, Compass, Less, BEM, SMACSS, OOCSS, ACSS, CCSS, WTFSS? I’ve been thinking a lot about my CSS authoring, its current state and how it has changed over the years.
Typically when I start a new project I’ll use my own framework Motherplate. It uses SCSS and Compass. Most of the class names were’t originally based on any other framework. Not deliberately anyway. Most developers I know now use Bootstrap. Most projects I work on I typically "own" the CSS. With the rise of Bootstrap, BEM, SMACCs and other frameworks and methodologies, there are common best practice recommendations when it comes to naming your elements. CSS (Cascading Style Sheets) Cascading Style Sheets (CSS) is a style sheet language used for describing the look and formatting of a document written in a markup language. — Wikipedia Back to basics.
Sass/SCSS (Syntactically Awesome Style Sheets) Sass is the most mature, stable, and powerful professional grade CSS extension language in the world. — Sass-Lang In 2007 along came Sass. Sass (Syntactically Awesome Style Sheets) came first. OOCSS/Atomic CSS are Responsive Web Design 'anti-patterns' For many months now, in response to many failed attempts to find a suitable approach to scaling the CSS on the projects I work on, I have been using ‘ECSS’, my own Frankenstein approach to large-scale CSS architecture.
It’s detailed more fully in the post, Enduring CSS: writing style sheets for rapidly changing, long-lived projects. Subsequently, in this post, I’m about to argue that an OOCSS architectural approach to a large scale, rapidly changing responsive web site or application is an ‘anti-pattern’. With such a ‘link-bait’ title I need to get some caveats out of the way first: This isn’t an attack on OOCSS, Atomic CSS or any related single responsibility principle (SRP) approaches.
It’s merely my argument that a different approach, depending upon your goals can offer a preferential outcome.I’m not suggesting that the approach I advocate is a panacea to all CSS scaling problems. Writing CSS is easy. It’s therefore important to consider the problems that you have. LESS CSS – Beginner’s Guide - Hongkiat.
CSS Pre-processor has now become a staple in web development.
10 LESS CSS Examples You Should Steal for Your Projects. LESS, Sass and other CSS preprocessors represent an awesome way to extend CSS to be everything a programmer ever wanted.
Variables, mathematical operations, mixins and a lot more make these tools invaluable to coders who can appreciate the benefits of typing less while accomplishing more. One of the most major hurdles to getting started with these tools is simply figuring out just what the heck you’re going to do with them. We’ll help you out in a big way today by hooking you up with ten incredibly useful LESS snippets that you can drop into your projects today.