CSS modular thinking (1) Naming is a technical activity_html/css_WEB-ITnose

Introduction:

Girls all like to buy clothes, and I am no exception. However, my wallet is too thin and I cannot afford high-end customization. I can only buy casual clothes with a high matching rate. But for For me, I am still happy. After all, buying clothes is not only about clothes, but also a mood. In the world of web front-end, CSS is also full of the art of life. It is said that art comes from life, but is higher than life. It is a sublimation of life. So in CSS, is it better to customize it or customize it? How about modular mass production? This depends on each project. This is a trade-off. Everything is inseparable from a degree. There is no best in the world, only the one that suits you best. The same is true in the world of web front-end.

If you are just running a small blog of your own now, then you need to have your own personality, because the blog is equivalent to your personal endorsement, so many of them are personalized, and you need to be alone and slowly Create a style that suits you. However, most of the time it is at work. For work, we need to consider two words - cooperation. When faced with a project that requires everyone to cooperate to complete it as soon as possible, this requires modular thinking. Everyone needs a common The standard has a shared library, which is no longer personalized code, but elegant code that is easy for team members to read and maintain. Since CSS modularity involves all aspects, I will unveil its mystery little by little! In this article, let’s talk about naming first.

Main article:

What is CSS modularity? (what)

In order to understand the idea of ​​CSS modularity, we first understand what modularity is. The explanation on Baidu Encyclopedia is that in the structure of the system, modules are units that can be combined, decomposed and replaced. . Modularization is a way of dealing with the decomposition of complex systems into better manageable modules. It can handle complex and large-scale software by setting different functions in different components and decomposing a problem into multiple small, independent, interacting components. After seeing the modularity, you have a visual feeling like a puzzle. You can divide the big picture into small pictures, and then assemble the small pictures into a big picture, creating an artistic sense of division and combination. Then the CSS modular idea is to use the modular idea in the CSS writing environment to decompose a large project into independent components. Different components are responsible for different functions. Finally, the modules are assembled and we have Project to be completed.

Why is CSS modularization needed? (why)

Consider it a big project and several people work together to develop it. As a result, they can’t understand each other’s code. What should I do? Face to face with the fact that predecessors have already written Good code needs to be modified, but there is nowhere to start. What should I do? What should I do when the code is coupled and modification is time-consuming and laborious? What should I do when iteration is needed and the huge code is faced with a tragic moment that affects the whole body? What should I do? At this time, the module Thinking is the savior. The CSS writing method is particularly flexible, and because of its flexibility, it is easy to couple together. At this time, modular separation is needed. Then CSS modularization has many benefits, some of which are listed below:

Improve code reuse rate

Improve development efficiency and reduce communication costs

Improve page fault tolerance

Reduce coupling

Reduce release risk

Reduce bug location time and Fix costs

Better achieve rapid iteration

Convenient code maintenance

. . . . . .

How to implement css modularization? (how)

There are many steps required to achieve CSS modularization. Today we will talk about the first step, naming.

Looking at other people’s codes is like entering the other party’s military base. If you want to use the weapons inside with ease, you must first know the name of each weapon. If your weapons are all chosen carefully, , then even if you come to the base, you probably won’t dare to use your weapons, let alone fight. Therefore, we must standardize our naming in CSS and try to make it easy for team members to understand it at a glance.

The optimization of css naming can be divided into the naming of css file names and the naming of css selectors.

css style file name:

1)

Main master.css
layout, layout.css
Columns columns.css
Text font.css
Print style print.css
Theme themes.css

2)

reset.css // Reset the browser’s default style
layout .css // Management page layout
typeset.css // Arrangement of graphics and text
color.css // Unified management of color combinations
print.css // Printing effect style
ie.css // Separate hacks for IE

3)

reset.css
header.css // All styles of the header
container.css // Except the header /Middle area style outside the bottom
footer.css // Bottom style
print.css
ie.css

4)

reset.css /*Page style recharge*/
header.css /*Site-wide header style*/
footer.css /*Site-wide footer style*/
public.css /* Public module style for the entire site*/
index.css /*Homepage-specific style*/
container.css /*Main style for secondary level and below*/
print.css /*Print style*/
ie.css /*IE hack*/

Wait

Again, there is no best naming method, only the most appropriate naming method. Mainly from the perspective of html structure and quick location of bugs and the convenience of modification by other members.

If your website is a news portal, then the structure of HTML is mainly layout, layout.css, columns.css, text font.css, and print style print.css are more suitable. Because it is very consistent with html and fits well.

If it is an official website of a company, the general html structure has a standard head and tail, so the third type is the most suitable for the html structure. At the same time, we can optimize the third type and add it in the container. Classification, divided into common and layout, facilitates further modification. As for common, you can put some common styles such as font and color.

There is no perfect life, and there are no perfect people, so there is no perfect file naming. You can only try to fit in with the html layout, and then focus on introspection and summary from each project. There are many roads. As a rule of thumb, a cat that can catch mice is a good cat.

Naming of css selectors:

Standardizing the naming of css selectors is a commonplace issue. Standardizing it is not only a part of modular implementation, It facilitates team development and also avoids some compatibility troubles. Because each browser, IE, Firefox, Google, safari

, each browser, IE product, Firefox, safari, coogle Chrome, will produce different styles due to irregular naming..

All CSS syntax is case-insensitive within the ASCII range (i.e., [a-z] and [A-Z] are equivalent), except for parts that are not under the control of CSS. For example, the case-sensitive attributes "ID", font name and "class" in HTML, and URIs are within the scope of this specification. Please note in particular that element names are case-insensitive in HTML, but case-sensitive in XML.
In CSS, identifiers (including element names, categories, and IDs in selections) can only contain the characters [A-ZA-Z0-9] and the ISO 10646 characters U 00A0 high, plus the hyphen (-) and underscore (_); they cannot begin with a digit, two hyphens, or a hyphen followed by a digit. Identifiers can also contain escape characters and any ISO 10646 character as a numeric code (see below). For example, the identifier "B&W?" could be written as "B&W?" or "B 26W¯¯ 3F". Please refer to Section 4.1.3 of W3C CSS2.1, link address: http://www.w3.org/TR/CSS21/syndata.html#characters

Pass the following code:

The results in each browser are as follows:

ie6:

ie7

ie8

Firefox38.0.1

360 results, Google Chrome, safari, opera results are consistent as follows:

From the above, we can intuitively understand that the support of selector naming is different in various browsers. Therefore, if the naming of the selector is not standardized, it will affect the rendering effect under various browsers. In order to be compatible with the above browsers and save trouble, we try to name them starting with a letter. All are guaranteed to be compatible.

Common css naming rules

Header: header

Content: content/container

Tail: footer

Navigation: nav

Sidebar: sidebar

Column: column

Page peripheral control overall layout width: wrapper

left right center: left right center

Login bar: loginbar

Logo: logo

Advertising: banner

Page body: main

Hotspot: hot

News: news

Download: download

Subnav: subnav

Menu: menu

Submenu: submenu

Search: search

Friendly link: friendlink

Footer: footer

Copyright: copyright

Scroll: scroll

Content: content

Tab page: tab

Article list: list

Prompt message: msg

Tips: tips

Column title: title

Join: joinus

Guide: guild

Service: service

Registration: regsiter

Status: status

Vote:vote

Partner: partner

(2) Comment writing:

/* Header */ 内容区 /* End Header */ 

(3) ID naming:

( 1) Page structure

Container: container

Header: header

Content: content/container

Page body: main

Footer: footer

Navigation: nav

Sidebar: sidebar

Column: column

Page peripheral control overall layout width: wrapper

Left right center

(2) Navigation

Navigation: nav

Main navigation: mainbav

Sub navigation: subnav

Top navigation: topnav

Side navigation: sidebar

Left navigation: leftsidebar

Right navigation: rightsidebar

Menu: menu

Submenu: submenu

标题: title

摘要: summary

(3)功能

标志：logo

广告：banner

登陆：login

登录条：loginbar

注册：register

搜索：search

功能区：shop

标题：title

加入：joinus

状态：status

按钮：btn

滚动：scroll

标签页：tab

文章列表：list

提示信息：msg

当前的: current

小技巧：tips

图标: icon

注释：note

指南：guild

服务：service

热点：hot

新闻：news

下载：download

投票：vote

合作伙伴：partner

友情链接：link

版权：copyright

(四)class的命名:

(1)颜色:使用颜色的名称或者16进制代码,如

.red { color: red; } .f60 { color: #f60; } .ff8600 { color: #ff8600; } 

（2）字体大小,直接使用”font+字体大小”作为名称,如

.font10px { font-size: 10px; } .font6pt {font-size: 6pt; } 

(3)对齐样式,使用对齐目标的英文名称,如

.left { float:left; } .bottom { float:bottom; } 

(4)标题栏样式,使用”类别+功能”的方式命名,如

.barnews { } .barproduct { } 

注意事项::

1. 一律小写;
2. 尽量用英文;
3. 不加中杠和下划线;
4. 尽量不缩写；

我比较喜欢bootstrap的简洁优雅的风格。所以css命名也可以参考一下。

 

特别是class命名：

 

class 名称中只能出现小写字符和破折号（dashe）（不是下划线，也不是驼峰命名法）。破折号应当用于相关 class 的命名（类似于命名空间）（例如，.btn 和 .btn-danger）。

避免过度任意的简写。.btn 代表 button，但是 .s 不能表达任何意思。

class 名称应当尽可能短，并且意义明确。

使用有意义的名称。使用有组织的或目的明确的名称，不要使用表现形式（presentational）的名称。

基于最近的父 class 或基本（base） class 作为新 class 的前缀。

使用 .js-* class 来标识行为（与样式相对），并且不要将这些 class 包含到 CSS 文件中。

 

选择器

对于通用元素使用 class ，这样利于渲染性能的优化。

对于经常出现的组件，避免使用属性选择器（例如，[class^="..."]）。浏览器的性能会受到这些因素的影响。

选择器要尽可能短，并且尽量限制组成选择器的元素个数，建议不要超过 3 。

只有在必要的时候才将 class 限制在最近的父元素内（也就是后代选择器）（例如，不使用带前缀的 class 时 -- 前缀类似于命名空间）。

 

css编码规范可以参考http://codeguide.bootcss.com/

 

非常高兴能跟大家一起分享，一起学习，今天就写到这里了，因为本人水平有限，有错误的地方，欢迎指正，谢谢啦！---妙瞳。