CSS Development Framework Technology OOCSS the method of writing and managing CSS

The most popular CSS development framework technology is currently OOCSS, although there are other similar technologies (such as BEM). These methods attempt to adopt object-oriented programming principles for CSS. Style language and object-oriented design principles have certain problems between concepts. Those who lack experience may not notice these subtleties. 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. Discuss some of the "CSS framework methods" that are being promoted. How to better solve these problems.

Semantics 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 interfaces, or applications: templates for element types used by content; use IDs to identify a unique, single element; classify a group of elements with class names .

The most important thing is to let front-end developers solve the repeated CSS code in a website through a CSS framework technology is the first thing.

(1) <div class="box-standard box-special"> Here is a special box! </div> It is advisable to add two class names to the template to reduce duplicate code in this way, and this The two class names also convey specific semantics.

Developers here really need a "mix" and "extension", which are available in various CSS preprocessors, such as LESS or Sass.

A simple example of mixin in 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>

Changing the style of a mixin is always done with div.breaking and is not coupled to the template as much as possible. The ability to define a mixin in CSS is what he has always wanted (this feature is ultimately implemented in the preprocessor.) If you want to be a professional CSS developer, you have no good reason not to use CSS preprocessors.

In the blind pursuit of "modularization." This avoids duplicate code in CSS, but the side effect of moving to the template is 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 web page a client accesses, the speed of their connection and whether the content is cached, and other factors. At the most basic level, there are three things that most significantly affect CSS performance: (required number of HTTP requests, cache state, document size).

The first two considerations can be based on the CSS framework approach, and the third is to resolve reuse by class name: the goal is that by declaring as few styles as possible, the CSS file is likely to be smaller.