웹 프론트엔드 HTML 튜토리얼 DIV+CSS:有效的编写代码_html/css_WEB-ITnose

DIV+CSS:有效的编写代码_html/css_WEB-ITnose

Jun 24, 2016 pm 12:29 PM

转自: http://blog.onlygrape.com/divcss/377

 

如何编写CSS代码才能更有效率?这是许多网页制作者与开发者都关心的问题。大概没有什么魔法,可以保证一下就把你的样式表缩小到百分之多少,但合理的 CSS 编码与组织技巧,的确能够帮助你的更有效率地写出更清晰高效的代码,自然,样式表大小的缩减还能减少下载的时间。


一、排版:

1、关键词和操作符之间加适当的空格。

2、相对独立的程序块与块之间加空行

3、较长的语句、表达式等要分成多行书写。

4、划分出的新行要进行适应的缩进,使排版整齐,语句可读。

5、长表达式要在低优先级操作符处划分新行,操作符放在新行之首。

6、循环、判断等语句中若有较长的表达式或语句,则要进行适应的划分。

7、若函数或过程中的参数较长,则要进行适当的划分。

8、不允许把多个短语句写在一行中,即一行只写一条语句。

9、函数或过程的开始、结构的定义及循环、判断等语句中的代码都要采用缩进风格。

10、C/C++语言是用大括号‘{’和‘}’界定一段程序块的,编写程序块时‘{’和‘}’应各独占一行并且位于同一列,同时与引用它们的语句左对齐。在函数体的开始、类的定义、结构的定义、枚举的定义以及if、for、do、while、switch、case语句中的程序都要采用如上的缩进方式。


二、注释

1、注释要简单明了。

2、边写代码边注释,修改代码同时修改相应的注释,以保证注释与代码的一致性。

3、在必要的地方注释,注释量要适中。注释的内容要清楚、明了,含义准确,防止注释二义性。保持注释与其描述的代码相邻,即注释的就近原则。

4、对代码的注释应放在其上方相邻位置,不可放在下面。

5、对数据结构的注释应放在其上方相邻位置,不可放在下面;对结构中的每个域的注释应放在此域的右方;同一结构中不同域的注释要对齐。

6、变量、常量的注释应放在其上方相邻位置或右方。

7、全局变量要有较详细的注释,包括对其功能、取值范围、哪些函数或过程存取它以及存取时注意事项等的说明。

8、在每个源文件的头部要有必要的注释信息,包括:文件名;版本号;作者;生成日期;模块功能描述(如功能、主要算法、内部各部分之间的关系、该文件与其它文件关系等);主要函数或过程清单及本文件历史修改记录等。

9、在每个函数或过程的前面要有必要的注释信息,包括:函数或过程名称;功能描述;输入、输出及返回值说明;调用关系及被调用关系说明等。


三、命名

1、较短的单词可通过去掉“元音”形成缩写;

2、较长的单词可取单词的头几发符的优先级,并用括号明确表达式的操作顺序,避免使用默认优先级。

3、使用匈牙利表示法


四、可读性

1、避免使用不易理解的数字,用有意义的标识来替代。

2、不要使用难懂的技巧性很高的语句。

3、源程序中关系较为紧密的代码应尽可能相邻。


五、变量

1、去掉没必要的公共变量。

2、构造仅有一个模块或函数可以修改、创建,而其余有关模块或函数只访问的公共变量,防止多个不同模块或函数都可以修改、创建同一公共变量的现象。

3、仔细定义并明确公共变量的含义、作用、取值范围及公共变量间的关系。

4、明确公共变量与操作此公共变量的函数或过程的关系,如访问、修改及创建等。

5、当向公共变量传递数据时,要十分小心,防止赋与不合理的值或越界等现象发生。

6、防止局部变量与公共变量同名。

7、仔细设计结构中元素的布局与排列顺序,使结构容易理解、节省占用空间,并减少引起误用现象。

8、结构的设计要尽量考虑向前兼容和以后的版本升级,并为某些未来可能的应用保留余地(如预留一些空间等)。

9、留心具体语言及编译器处理不同数据类型的原则及有关细节。

10、严禁使用未经初始化的变量。声明变量的同时对变量进行初始化。

11、编程时,要注意数据类型的强制转换。


六、函数、过程

1、函数的规模尽量限制在200行以内。

2、一个函数最好仅完成一件功能。

3、为简单功能编写函数。

4、函数的功能应该是可以预测的,也就是只要输入数据相同就应产生同样的输出。

5、尽量不要编写依赖于其他函数内部实现的函数。

6、避免设计多参数函数,不使用的参数从接口中去掉。

7、用注释详细说明每个参数的作用、取值范围及参数间的关系。

8、检查函数所有参数输入的有效性。

9、检查函数所有非参数输入的有效性,如数据文件、公共变量等。

10、函数名应准确描述函数的功能。

11、避免使用无意义或含义不清的动词为函数命名

12、函数的返回值要清楚、明了,让使用者不容易忽视错误情况。

13、明确函数功能,精确(而不是近似)地实现函数设计。

14、减少函数本身或函数间的递归调用。

15、编写可重入函数时,若使用全局变量,则应通过关中断、信号量(即P、V操作)等手段对其加以保护。


七、可测性

1、在编写代码之前,应预先设计好程序调试与测试的方法和手段,并设计好各种调测开关及相应测试代码如打印函数等。

2、在进行集成测试/系统联调之前,要构造好测试环境、测试项目及测试用例,同时仔细分析并优化测试用例,以提高测试效率。


八、程序效率

1、编程时要经常注意代码的效率。

2、在保证软件系统的正确性、稳定性、可读性及可测性的前提下,提高代码效率。

3、不能一味地追求代码效率,而对软件的正确性、稳定性、可读性及可测性造成影响。

4、编程时,要随时留心代码效率;优化代码时,要考虑周全。

5、要仔细地构造或直接用汇编编写调用频繁或性能要求极高的函数。

6、通过对系统数据结构划分与组织的改进,以及对程序算法的优化来提高空间效率。

7、在多重循环中,应将最忙的循环放在最内层。

8、尽量减少循环嵌套层次。

9、避免循环体内含判断语句,应将循环语句置于判断语句的代码块之中。

10、尽量用乘法或其它方法代替除法,特别是浮点运算中的除法。


九、质量保证

1、在软件设计过程中构筑软件质量。代码质量保证优先原则

(1)正确性,指程序要实现设计要求的功能。

(2)稳定性、安全性,指程序稳定、可靠、安全。

(3)可测试性,指程序要具有良好的可测试性。

(4)规范/可读性,指程序书写风格、命名规则等要符合规范。

(5)全局效率,指软件系统的整体效率。

(6)局部效率,指某个模块/子模块/函数的本身效率。

(7)个人表达方式/个人方便性,指个人编程习惯。

2、只引用属于自己的存贮空间。

3、防止引用已经释放的内存空间。

4、过程/函数中分配的内存,在过程/函数退出之前要释放。

5、过程/函数中申请的(为打开文件而使用的)文件句柄,在过程/函数退出前要关闭。

6、防止内存操作越界。

7、时刻注意表达式是否会上溢、下溢。

8、认真处理程序所能遇到的各种出错情况。

9、系统运行之初,要初始化有关变量及运行环境,防止未经初始化的变量被引用。

10、系统运行之初,要对加载到系统中的数据进行一致性检查。

11、严禁随意更改其它模块或系统的有关设置和配置。

12、不能随意改变与其它模块的接口。

13、充分了解系统的接口之后,再使用系统提供的功能。

14、要时刻注意易混淆的操作符。当编完程序后,应从头至尾检查一遍这些操作符。

15、不使用与硬件或操作系统关系很大的语句,而使用建议的标准语句。

16、建议:使用第三方提供的软件开发工具包或控件时,要注意以下几点:

(1)充分了解应用接口、使用环境及使用时注意事项。

(2)不能过分相信其正确性。

(3)除非必要,不要使用不熟悉的第三方工具包与控件。


十、代码编译

1、编写代码时要注意随时保存,并定期备份,防止由于断电、硬盘损坏等原因造成代码丢失。

2、同一项目组内,最好使用相同的编辑器,并使用相同的设置选项。

3、合理地设计软件系统目录,方便开发人员使用。

4、打开编译器的所有告警开关对程序进行编译。

5、在同一项目组或产品组中,要统一编译开关选项。

6、使用工具软件(如Visual SourceSafe)对代码版本进行维护。


十一、代码测试、维护

1、单元测试要求至少达到语句覆盖。

2、单元测试开始要跟踪每一条语句,并观察数据流及变量的变化。

3、清理、整理或优化后的代码要经过审查及测试。

4、代码版本升级要经过严格测试。

 

본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

인기 기사

R.E.P.O. 에너지 결정과 그들이하는 일 (노란색 크리스탈)
3 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. 최고의 그래픽 설정
3 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. 아무도들을 수없는 경우 오디오를 수정하는 방법
3 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25 : Myrise에서 모든 것을 잠금 해제하는 방법
4 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌

뜨거운 도구

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

& lt; Progress & Gt의 목적은 무엇입니까? 요소? & lt; Progress & Gt의 목적은 무엇입니까? 요소? Mar 21, 2025 pm 12:34 PM

이 기사는 HTML & lt; Progress & Gt에 대해 설명합니다. 요소, 그 목적, 스타일 및 & lt; meter & gt의 차이; 요소. 주요 초점은 & lt; progress & gt; 작업 완료 및 & lt; meter & gt; Stati의 경우

& lt; datalist & gt의 목적은 무엇입니까? 요소? & lt; datalist & gt의 목적은 무엇입니까? 요소? Mar 21, 2025 pm 12:33 PM

이 기사는 HTML & LT; Datalist & GT에 대해 논의합니다. 자동 완성 제안을 제공하고, 사용자 경험을 향상시키고, 오류를 줄임으로써 양식을 향상시키는 요소. 문자 수 : 159

HTML5의 크로스 브라우저 호환성에 대한 모범 사례는 무엇입니까? HTML5의 크로스 브라우저 호환성에 대한 모범 사례는 무엇입니까? Mar 17, 2025 pm 12:20 PM

기사는 HTML5 크로스 브라우저 호환성을 보장하기위한 모범 사례에 대해 논의하고 기능 감지, 점진적 향상 및 테스트 방법에 중점을 둡니다.

& lt; meter & gt의 목적은 무엇입니까? 요소? & lt; meter & gt의 목적은 무엇입니까? 요소? Mar 21, 2025 pm 12:35 PM

이 기사는 HTML & lt; meter & gt에 대해 설명합니다. 범위 내에 스칼라 또는 분수 값을 표시하는 데 사용되는 요소 및 웹 개발의 일반적인 응용 프로그램. & lt; meter & gt; & lt; Progress & Gt; 그리고 Ex

html5 & lt; time & gt; 의미 적으로 날짜와 시간을 나타내는 요소? html5 & lt; time & gt; 의미 적으로 날짜와 시간을 나타내는 요소? Mar 12, 2025 pm 04:05 PM

이 기사는 html5 & lt; time & gt; 시맨틱 날짜/시간 표현 요소. 인간이 읽을 수있는 텍스트와 함께 기계 가독성 (ISO 8601 형식)에 대한 DateTime 속성의 중요성을 강조하여 Accessibilit를 향상시킵니다.

HTML5 양식 유효성 검사 속성을 사용하여 사용자 입력을 유효성있게하려면 어떻게합니까? HTML5 양식 유효성 검사 속성을 사용하여 사용자 입력을 유효성있게하려면 어떻게합니까? Mar 17, 2025 pm 12:27 PM

이 기사에서는 브라우저에서 직접 사용자 입력을 검증하기 위해 필요한, Pattern, Min, Max 및 Length 한계와 같은 HTML5 양식 검증 속성을 사용하는 것에 대해 설명합니다.

뷰포트 메타 태그는 무엇입니까? 반응 형 디자인에 중요한 이유는 무엇입니까? 뷰포트 메타 태그는 무엇입니까? 반응 형 디자인에 중요한 이유는 무엇입니까? Mar 20, 2025 pm 05:56 PM

이 기사는 모바일 장치의 반응 형 웹 디자인에 필수적인 Viewport Meta Tag에 대해 설명합니다. 적절한 사용이 최적의 컨텐츠 스케일링 및 사용자 상호 작용을 보장하는 방법을 설명하는 반면, 오용은 설계 및 접근성 문제로 이어질 수 있습니다.

& lt; iframe & gt; 꼬리표? 보안을 사용할 때 보안 고려 사항은 무엇입니까? & lt; iframe & gt; 꼬리표? 보안을 사용할 때 보안 고려 사항은 무엇입니까? Mar 20, 2025 pm 06:05 PM

이 기사는 & lt; iframe & gt; 외부 컨텐츠를 웹 페이지, 공통 용도, 보안 위험 및 객체 태그 및 API와 같은 대안을 포함시키는 태그의 목적.

See all articles