Lazy Seminar: ClassName's long name VS. Short naming

From the 2009.11.26 lazy session of the PK Hall, a lot of harvest, pretending to this record.

PPT Links

To tell you the truth, I think there is something to discuss when I see this topic, which is certainly a one-sided discussion. Because individuals tend to be short named, simple and elegant, may be due to the programmer's cleanliness, can not tolerate any redundant things. (And I think a person should not be a minority.

====

Let's look at the definition of long and short names:

<!--long name: A CSS naming method that reflects the context environment by prefix. -->
<div class= "category" >
        <div class= "CATEGORY-HD" ></div>
        <div class= " CATEGORY-BD "></div>
        <div class=" category-ft "></div>
</div>

<!-- Short-lived name: A CSS naming method that inherits the context of the environment. -->
<div class= "category" >
        <div class= "HD" ></div>
        <div class= "BD" ></div >
        <div class= "FT" ></div>
</div>

====

At the meeting, we first gave each side a pile of advantages and disadvantages, the results are comparable.

Then there is a detailed debate on performance and maintainability.

Performance is divided into download performance (speed) and rendering performance, we think:

1. 1. Download performance may be a short named slightly, because the file will be slightly smaller;
2. 2. Rendering performance is better than long naming, since CSS is usually short named we use similar. box. HD {} to define styles, while long naming directly is. BOX-HD {},pagespeed considers the selector length to affect rendering performance.

(Note: In fact, the work of these two points will be ignored.) Gzip can further reduce the gap between the first problem and the resulting rendering performance is negligible.

Then we discussed the maintainability, and there were more people who supported the long name.

1. 1. Long naming gives people a more reliable feeling;
2. 2. Long naming a shorter naming conflict has a much lower probability;
3. 3. Reusable content through a short naming definition, undisputed;
4. ...

The last is the use of the scene, Yuber borrowed Yahoo Home example lead, we discuss, summed up as follows: (mainly based on maintainability)

1. 1. Frame-level style with short naming, such as box model, grid;
2. 2. General style with short name, such as. hidden, clearfix;
3. 3. Application-level style with long name, such as Amoy Rivers and lakes Project general style all add "SNS" prefix (have. Sns-avatar, Sns-box, etc.);
4. 4. Page-level style with long name, such as the class of the module, may contain CATEGORY-HD, CATEGORY-BD, category-bd-tips, etc.;
5. 5. Embedded applications are long named because they may be embedded in any complex environment, such as the Open source Editor, Google's various applications (map, adsence, Gmail ...)

The above conclusion has a premise: is the page is many people (including later maintenance staff) collaboration, a person's page (such as blog) is not considered within the scope.

====

Welcome to the question.