CSS Development Framework Technology OOCSS How to write and manage CSS

Currently the most popular CSS development framework technology is OOCSS, although there are other similar technologies (such as BEM). These methods attempt to adopt object-oriented programming principles for CSS. There are some problems in the concept between the style language and the object-oriented design principle. Inexperienced people may not notice these subtle things. Having a way to write and manage CSS is better than anything else. Some development practices are not conducive to semantic quality and long-term maintainability. Discusses some of the "CSS framework approach" issues that are advocated. How to better solve these problems.

Semantically there are only two hard things in computer science, cache invalidation and named events.

When writing HTML, there are three main ways to express the semantics of content, web interface, or application: the template of the element type used by the content, the use of ID to identify a unique, single element, and a class name to classify a group of elements.

The most important thing is to let front-end developers through a CSS framework technology to solve a Web site of repeated CSS code is the first things.

(1) <div class= "Box-standard box-special" > here is a special box! </div> it is advisable to add two class names to the template in this way to reduce duplication of code, while the two class names also convey specific semantics.

Developers here really need a "mix" and "extension", which are available in a variety of CSS preprocessor, such as less or sass.

A simple example of mixin in the SCSS syntax: px; , ; } div.news {@include news-item (blue),} div.breaking {@include news-item (red); font-weight:bold;} class= "Breaking" > Here is a breaking news item! </div>

Style styles that change mixin are always implemented by div.breaking and are not coupled to the template as much as possible. The ability to define mixin in CSS is the feature he has always wanted (this functionality is eventually implemented in the preprocessor.) If you want to be a professional CSS developer, you have no good reason not to use the CSS preprocessor.

In the blindly pursuit of "modular". This avoids the duplication of code in the CSS, but moves to the template, causing the side effects that are the tight coupling of templates and styles.

(2) Another goal is to provide high performance. This depends on many factors, such as the type of client access to a Web page, whether their connection speed and content are cached, and other factors. At the most basic level there are three things that have the most obvious impact on CSS performance: (the number of HTTP requests required to cache the state document size).

The first two areas of consideration can take the CSS framework approach, and the third is to use the class name to resolve reuse: The goal is that, by declaring as few styles as possible, the more likely the CSS file is to be smaller.