CSS 코드 사양 공유

CSS를 배우는 과정에서 CSS를 배우는 것은 어렵지 않지만 대규모 프로젝트에서는 관리하기가 어려워진다는 것을 알게 될 것입니다. 프로그래머마다 글쓰기 스타일이 매우 다르기 때문에 팀으로 작업할 때 의사소통이 어려울 수 있습니다. 따라서 CSS 코드 작성 표준이 있습니다.

1. 전역 재설정이 아닌 재설정을 사용하세요

브라우저 호환성을 확보하기 위해 브라우저 요소의 일부 기본 속성을 재설정하려면 재설정을 사용하세요. 하지만 전역 재설정을 사용하지 마세요.

*{ margin:0; padding:0; }

이는 느리고 비효율적인 방법일 뿐만 아니라 일부 불필요한 요소가 여백과 패딩도 재설정하게 만들기 때문입니다. YUI Reset과 Eric Meyer의 사례를 참고하는 것이 좋습니다. 나는 Eric Meyer와 같은 견해를 공유합니다. 재설정은 정적이지 않습니다. 브라우저 호환성과 운영 편의성을 달성하려면 프로젝트의 다양한 요구에 따라 적절한 수정이 이루어져야 합니다. 내가 사용하는 재설정은 다음과 같습니다.

/** 清除内外边距 **/
body, h1, h2, h3, h4, h5, h6, hr, p,
blockquote, /* structural elements 结构元素 */
dl, dt, dd, ul, ol, li, /* list elements 列表元素 */
pre, /* text formatting elements 文本格式元素 */
form, fieldset, legend, button, input, textarea, /* form elements 表单元素 */
th, td, /* table elements 表格元素 */
img/* img elements 图片元素 */{
  border:medium none;
  margin: 0;
  padding: 0;
}
/** 设置默认字体 **/
body,button, input, select, textarea {
  font: 12px/1.5 '宋体',tahoma, Srial, helvetica, sans-serif;
}
h1, h2, h3, h4, h5, h6 { font-size: 100%; }
em{font-style:normal;}
/** 重置列表元素 **/
ul, ol { list-style: none; }
/** 重置超链接元素 **/
a { text-decoration: none; color:#333;}
a:hover { text-decoration: underline; color:#F40; }
/** 重置图片元素 **/
img{ border:0px;}
/** 重置表格元素 **/
table { border-collapse: collapse; border-spacing: 0; }

2. 좋은 이름 지정 습관

분명히 지저분하거나 의미가 없는 이름의 코드는 누구든 미치게 만들 것입니다. 다음 코드와 같습니다:

.aaabb{margin:2px;color:red;}

실제 프로젝트에서는 초보자도 클래스 이름을 이렇게 지정하지 않을 것 같지만, 이런 코드도 매우 문제가 있다고 생각한 적이 있습니까?

<h1>My name is <span class="red blod">Wiky</span></h1>

문제는 If you need to 입니다. 원래 빨간색 글꼴을 모두 파란색으로 변경하면 스타일은 다음과 같습니다.

.red{color:bule;}

이러한 이름 지정은 매우 혼란스러울 것입니다. .leftBar라는 이름의 동일한 사이드바가 필요한 경우 오른쪽 사이드바로 변경하는 것도 번거로울 것입니다. 따라서 클래스나 ID의 이름을 지정하는 데 요소의 특성(색상, 위치, 크기 등)을 사용하지 마십시오. #navigation{...}, .sidebar{... }, .postwrap{ ...}

이러한 방식으로 이러한 클래스나 ID를 정의하는 스타일을 어떻게 수정하더라도 HTML 요소와의 연결에는 영향을 미치지 않습니다.

또 다른 상황이 있습니다. 일부 고정 스타일은 정의된 후에 수정되지 않습니다. 그러면

.alignleft{float:left;margin-right:20px;}
.alignright{float:right;text-align:right;margin-left:20px;}
.clear{clear:both;text-indent:-9999px;}

와 같이 이름을 지정할 때 방금 언급한 상황에 대해 걱정할 필요가 없습니다. 그런 다음 그러한 단락에 대해

<p class="alignleft">我是一个段落！</p>

If If 이 단락을 원래 왼쪽 정렬에서 오른쪽 정렬로 변경해야 하며, className을 alignright로 변경하기만 하면 됩니다.

3. 코드 약어

CSS 코드 약어는 코드 작성 속도를 향상시키고 코드 양을 간소화할 수 있습니다. 여백, 패딩, 테두리, 글꼴, 배경 및 색상 값을 포함하여 CSS에서 축약할 수 있는 속성이 많이 있습니다. 코드 약어를 배우면 원래 코드는 다음과 같이 축약될 수 있습니다.

li{
    font-family:Arial, Helvetica, sans-serif;
    font-size: 1.2em;
    line-height: 1.4em;
    padding-top:5px;
    padding-bottom:10px;
    padding-left:5px;
}

:

li{
    font: 1.2em/1.4em Arial, Helvetica, sans-serif;
    padding:5px 0 10px 5px;
}

If 이러한 속성을 축약하는 방법에 대해 더 알고 싶으면 "일반적인 CSS 약어 구문 요약"을 참조하거나 CSS-Shorthand-Cheat-Sheet.pdf를 다운로드하세요.

4. CSS 상속 사용

페이지에 있는 상위 요소의 여러 하위 요소가 동일한 스타일을 사용하는 경우 상위 요소에 동일한 스타일을 정의하고 이러한 CSS 스타일을 상속하도록 하는 것이 가장 좋습니다. 이렇게 하면 코드를 잘 유지하고 코드 양을 줄일 수 있습니다. 그런 다음 원래 코드는

#container li{ font-family:Georgia, serif; }
#container p{ font-family:Georgia, serif; }
#container h1{font-family:Georgia, serif; }

를

#container{ font-family:Georgia, serif; }

5로 축약할 수 있습니다. 여러 선택기

를 사용하면 공통 스타일이 있는 경우 여러 CSS 선택기를 하나로 병합할 수 있습니다. 이렇게 하면 코드가 간결해질 뿐만 아니라 시간과 공간도 절약됩니다. 예:

h1{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; }
h2{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; }
h3{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; }

는

h1, h2, h3{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; }

6으로 병합될 수 있습니다. 적절한 코드 주석

코드 주석을 사용하면 다른 사람이 코드를 더 쉽게 읽을 수 있으며 코드 주석을 합리적으로 구성하면 구조가 더 명확해집니다. 스타일 시트 시작 부분에 디렉토리를 추가하도록 선택할 수 있습니다.

/*------------------------------------
    1. Reset
    2. Header
    3. Content
    4. SideBar
    5. Footer
  ----------------------------------- */

이렇게 하면 코드 구조가 한눈에 명확해지고 코드를 쉽게 찾고 수정할 수 있습니다.

코드의 주요 내용도 적절하게 나누어야 하며 필요한 경우 코드에 주석을 달아야 합니다. 이는 팀 개발에도 도움이 됩니다.

/***    Header  ***/
#header{ height:145px; position:relative; }
#header h1{ width:324px; margin:45px 0 0 20px; float:left;  height:72px;}
 
/***    Content ***/
#content{ background:#fff; width:650px; float:left; min-height:600px; overflow:hidden;}
#content h1{color:#F00}/* 设置字体颜色 */
#content .posts{ overflow:hidden; }
#content .recent{ margin-bottom:20px; border-bottom:1px solid #f3f3f3; position:relative; overflow:hidden; }
 
/***    Footer  ***/
#footer{ clear:both; padding:50px 5px 0; overflow:hidden;}
#footer h4{ color:#b99d7f; font-family:Arial, Helvetica, sans-serif; font-size:1.1em; }

7. CSS 코드 정렬

알파벳순으로 정렬할 수 있으므로 찾아서 수정하는 것이 더 빠릅니다:

/*** 样式属性按字母排序 ***/
div{
    background-color:#3399cc;
    color:#666;
    font:1.2em/1.4em Arial, Helvetica, sans-serif;
    height:300px;
    margin:10px 5px;
    padding:5px 0 10px 5px;
    width:30%;
    z-index:10;
}

8. CSS를 읽기 쉽게 유지하세요

읽기 쉬운 CSS를 작성하면 스타일을 더 쉽게 찾고 수정할 수 있습니다. 다음 두 가지 경우 중 어느 경우가 더 읽기 쉬운지는 자명하다고 생각합니다.

/*** 每个样式属性写一行 ***/
div{
    background-color:#3399cc;
    color:#666;
    font: 1.2em/1.4em Arial, Helvetica, sans-serif;
    height:300px;
    margin:10px 5px;
    padding:5px 0 10px 5px;
    width:30%;
    z-index:10;
}
 
/*** 所有的样式属性写在同一行 ***/
div{ background-color:#3399cc; color:#666; font: 1.2em/1.4em Arial, Helvetica, sans-serif;  height:300px; margin:10px 5px; padding:5px 0 10px 5px; width:30%; z-index:10; }

스타일 속성이 더 적은 일부 선택기에 대해서는 다음과 같이 작성하겠습니다.

/*** 选择器属性少的写在同一行 ***/
div{ background-color:#3399cc; color:#666;}

이 규칙에 대한 엄격하고 빠른 규칙은 없지만 어떤 방식으로 작성하든 항상 다음을 유지하는 것이 좋습니다. 코드 일관성. 속성이 많은 경우 별도의 줄에 작성하세요. 속성이 3개 미만인 경우 한 줄로 작성하시면 됩니다.

9. 더 나은 스타일 속성 값 선택 ​​

CSS의 일부 속성은 효과는 비슷하지만 성능에는 차이가 있습니다. 예를 들어

차이점은 border:0 을 0px 로 설정한다는 것입니다. 페이지에는 표시되지 않지만 border의 기본값에 따라 브라우저는 여전히 border-width/border-color를 렌더링합니다. 즉, 메모리 값이 사용됩니다.

그리고 border:none은 테두리를 "none"으로 설정합니다. 즉, 브라우저가 "none"을 구문 분석할 때 렌더링 작업을 수행하지 않습니다. 즉, 메모리 값을 소비하지 않습니다. 따라서 border:none;을 사용하는 것이 좋습니다.

마찬가지로 display:none은 렌더링하지 않고 개체 브라우저를 숨기고 메모리를 차지하지 않습니다. 그리고 가시성:숨겨진 의지.

10. 使用2cdf5bf648cf2f33323966d7f58a7f3f代替@import

首先，@import不属于XHTML标签，也不是Web标准的一部分，它对于较早期的浏览器兼容也不高，并且对于网站的性能有某些负面的影响。具体可以参考《高性能网站设计：不要使用@import》。所以，请避免使用@import

11. 使用外部样式表

这个原则始终是一个很好的设计实践。不单可以更易于维护修改，更重要的是使用外部文件可以提高页面速度，因为CSS文件都能在浏览器中产生缓存。内置在HTML文档中的CSS则会在每次请求中随HTML文档重新下载。所以，在实际应用中，没有必要把CSS代码内置在HTML文档中：

<style type="text/css" >
    #container{ .. }
    #sidebar{ .. }
</style>

或

<li style="font-family:Arial, helvetica, sans-serif; color:#666; " >

而是使用2cdf5bf648cf2f33323966d7f58a7f3f导入外部样式表：

<link rel="stylesheet" type="text/css" href="css/styles.css" />

12. 避免使用CSS表达式（Expression）

CSS表达式是动态设置CSS属性的强大（但危险）方法。Internet Explorer从第5个版本开始支持CSS表达式。下面的例子中，使用CSS表达式可以实现隔一个小时切换一次背景颜色：

background-color: expression( (new Date()).getHours()%2 ? "#B8D4FF" : "#F08A00" );

如上所示，expression中使用了JavaScript表达式。CSS属性根据JavaScript表达式的计算结果来设置。

表达式的问题就在于它的计算频率要比我们想象的多。不仅仅是在页面显示和缩放时，就是在页面滚动、乃至移动鼠标时都会要重新计算一次。给CSS表达式增加一个计数器可以跟踪表达式的计算频率。在页面中随便移动鼠标都可以轻松达到10000次以上的计算量。

如果必须使用CSS表达式，一定要记住它们要计算成千上万次并且可能会对你页面的性能产生影响。所以，在非不得已，请避免使用CSS表达式。

13. 代码压缩

当你决定把网站项目部署到网络上，那你就要考虑对CSS进行压缩，出去注释和空格，以使得网页加载得更快。压缩您的代码，可以采用一些工具，如YUI Compressor

利用它可精简CSS代码，减少文件大小，以获得更高的加载速度。

相关推荐：CSS教程

위 내용은 CSS 코드 사양 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!