좋은 CSS 코드 작성을 위한 13가지 팁

CSS는 배우기 어렵지 않지만 대규모 프로젝트에서는 관리하기가 어려워집니다. 특히 CSS에서 사람마다 작성 스타일이 조금씩 다를 경우 팀 내에서 의사소통이 더욱 어려워집니다. 효율적이고 깔끔한 방법을 달성하려면:

1. 재설정을 사용하지만 전역 재설정은 사용하지 않음

다양한 브라우저 요소의 기본 속성은 다릅니다. 브라우저 호환성을 확보하기 위해 브라우저 요소의 일부 기본 속성을 재설정하려면 재설정을 사용하세요. 그러나 전역 재설정을 사용하지 마십시오:

*{ margin:0; padding:0; }

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

/** 清除内外边距 **/
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>

문제는 원본 빨간색 글꼴을 모두 파란색으로 변경해야 하는 경우 스타일이

.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;}

와 같이 방금 이름을 지정할 때 언급한 상황에 대해 걱정할 필요가 없습니다. ​그래서 그런 문단은

아아아아

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

3. 코드 약어

CSS 코드 약어는 코드 작성 속도를 높이고 코드 양을 단순화할 수 있습니다. 여백, 패딩, 테두리, 글꼴, 배경 및 색상 값 등을 포함하여 CSS에서 축약할 수 있는 많은 속성이 있습니다. 코드를 축약하는 방법을 배우면 원본 코드는 다음과 같습니다.

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

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

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

4. CSS 상속 사용

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

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

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

로 축약할 수 있습니다. 5. 멀티셀렉터 이용

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

아아아아

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

로 병합 가능 6. 적절한 코드 주석

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

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; }

7. CSS 코드 주문

코드의 속성을 알파벳순으로 정렬할 수 있으면 찾고 수정하는 것이 더 빠릅니다.

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

8. CSS를 읽기 쉽게 유지

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

아아아아

스타일 속성이 더 적은 일부 선택기를 처리할 때 다음 줄을 작성하겠습니다.

/***    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; }

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

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

CSS의 일부 속성은 다른 속성 값을 사용합니다. 효과는 유사하지만

과 같이 성능에는 차이가 있습니다.

　　区别在于border:0把border设为0px，虽然在页面上看不见，但按border默认值理解，浏览器依然对border-width/border-color进行了渲染，即已经占用了内存值。

　　而border:none把border设为“none”即没有，浏览器解析“none”时将不作出渲染动作，即不会消耗内存值。所以建议使用border:none;

　　同样的，display:none隐藏对象浏览器不作渲染，不占用内存。而visibility:hidden则会。

　　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代码，减少文件大小，以获得更高的加载速度。

　　14. 总结

　　在本文中，我力图更详尽的总结书写更高效的CSS代码的原则，但鉴于本人见识和精力有限，我还是希望这些原则能帮助您更好的书写和管理您的CSS代码，不知您又是如何书写CSS的，是否也有一些想要分享的技巧？给我留言吧谢谢~

위 내용은 좋은 CSS 코드 작성을 위한 13가지 팁의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!