Home Web Front-end CSS Tutorial css code specification sharing

css code specification sharing

Feb 03, 2021 am 11:40 AM
css specification

css code specification sharing

In the process of learning CSS, we will find that CSS is not difficult to learn, but in large projects, it will become difficult to manage. Different programmers have very different writing styles, which can make communication difficult when working in a team. Therefore, there are css code writing standards.

1. Use Reset but not global Reset

The default attributes of elements in different browsers are different. Use Reset to reset some default attributes of browser elements to achieve browser compatibility. . But it should be noted that please do not use global Reset:

*{ margin:0; padding:0; }
Copy after login

This is not only because it is a slow and inefficient method, but also causes some unnecessary elements to also reset their margins and padding. distance. It is recommended to refer to the practices of YUI Reset and Eric Meyer. I share the same view as Eric Meyer. Reset is not static. Appropriate modifications need to be made according to the different needs of the project to achieve browser compatibility and operational convenience. The Reset I use is as follows:

/** 清除内外边距 **/
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; }
Copy after login

2. Good naming habits

No doubt messy or unsemantically named code will drive anyone crazy. Just like this code:

.aaabb{margin:2px;color:red;}
Copy after login

I think even a beginner would not name a class like this in an actual project, but have you ever thought that such a code is also very problematic:

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

The problem is that if you need to change all the original red fonts to blue, then the style will become:

.red{color:bule;}
Copy after login

Such naming will be very complicated It is puzzling that the same sidebar named .leftBar will be very troublesome if it needs to be modified into a right sidebar. Therefore, please do not use the characteristics of the element (color, position, size, etc.) to name a class or id. You can choose meaningful naming such as: #navigation{...}, .sidebar{...}, .postwrap{ ...}

In this way, no matter how you modify the styles that define these classes or ids, the connection between them and HTML elements will not be affected.

There is another situation. Some fixed styles will not be modified after they are defined. Then you don’t have to worry about the situation just mentioned when naming, such as

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

Then for Such a paragraph

<p class="alignleft">我是一个段落!</p>
Copy after login

If you need to change this paragraph from the original left alignment to right alignment, then you only need to modify its className to alignright.

3. Code abbreviation

CSS code abbreviation can improve the speed of writing code and streamline the amount of code. There are many properties that can be abbreviated in CSS, including margin, padding, border, font, background and color values. If you learn code abbreviation, the original code like this:

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

can be abbreviated to:

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

If you want to know more about how to abbreviate these attributes, you can refer to "Common CSS Abbreviation Syntax Summary" or download CSS-Shorthand-Cheat-Sheet.pdf.

4. Use CSS inheritance

If multiple child elements of the parent element on the page use the same style, it is best to define their same styles on their parent elements and let them inherit these CSS styles. This way you can maintain your code well and reduce the amount of code. Then the original code like this:

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

can be abbreviated as:

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

5. Using multiple selectors

You can merge multiple CSS selectors into one, if they If there is a common style. Doing so not only keeps the code concise but also saves you time and space. For example:

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; }
Copy after login

can be merged into

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

6. Appropriate code comments

Code comments can make it easier for others to read your code and organize code comments reasonably. , which can make the structure clearer. You can choose to add a directory at the beginning of the style sheet:

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

This way the structure of your code will be clear at a glance, and you can easily find and modify the code.

The main content of the code should also be divided appropriately, and the code should even be commented where necessary, which is also conducive to team development:

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

7. Sort your CSS code

If the properties in the code can be sorted alphabetically, it will be faster to find modifications:

/*** 样式属性按字母排序 ***/
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;
}
Copy after login

8. Keep CSS readable

Writing readable CSS will make it easier to find and modify styles. I think it's self-explanatory which of the following two cases is more readable.

/*** 每个样式属性写一行 ***/
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; }
Copy after login

When it comes to some selectors with fewer style attributes, I will write a line:

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

There is no hard and fast rule for this rule, but no matter which way you use it, my suggestion is Always keep your code consistent. If there are many attributes, write them in separate lines. If there are less than 3 attributes, you can write one line.

9. Choose better style attribute values

Some attributes in CSS use different attribute values. Although the effects are similar, there are differences in performance, such as

The difference is that border:0 sets the border to 0px. Although it is not visible on the page, according to the default value of the border, the browser still renders the border-width/border-color, that is, the memory value has been occupied.

And border:none sets the border to "none", that is, there is none. When the browser parses "none", it will not perform rendering action, that is, it will not consume memory values. Therefore, it is recommended to use border:none;

Similarly, display:none hides the object browser and does not render it and does not occupy memory. And visibility:hidden will.

10. 使用代替@import

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

11. 使用外部样式表

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

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

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

而是使用导入外部样式表:

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

12. 避免使用CSS表达式(Expression)

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

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

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

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

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

13. 代码压缩

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

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

相关推荐:CSS教程

The above is the detailed content of css code specification sharing. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
2 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
Repo: How To Revive Teammates
4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: How To Get Giant Seeds
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

What does placeholder mean in vue What does placeholder mean in vue May 07, 2024 am 09:57 AM

In Vue.js, the placeholder attribute specifies the placeholder text of the input element, which is displayed when the user has not entered content, provides input tips or examples, and improves form accessibility. Its usage is to set the placeholder attribute on the input element and customize the appearance using CSS. Best practices include being relevant to the input, being short and clear, avoiding default text, and considering accessibility.

What does span mean in js What does span mean in js May 06, 2024 am 11:42 AM

The span tag can add styles, attributes, or behaviors to text. It is used to: add styles, such as color and font size. Set attributes such as id, class, etc. Associated behaviors such as clicks, hovers, etc. Mark text for further processing or citation.

What does rem mean in js What does rem mean in js May 06, 2024 am 11:30 AM

REM in CSS is a relative unit relative to the font size of the root element (html). It has the following characteristics: relative to the root element font size, not affected by the parent element. When the root element's font size changes, elements using REM will adjust accordingly. Can be used with any CSS property. Advantages of using REM include: Responsiveness: Keep text readable on different devices and screen sizes. Consistency: Make sure font sizes are consistent throughout your website. Scalability: Easily change the global font size by adjusting the root element font size.

How to introduce images into vue How to introduce images into vue May 02, 2024 pm 10:48 PM

There are five ways to introduce images in Vue: through URL, require function, static file, v-bind directive and CSS background image. Dynamic images can be handled in Vue's computed properties or listeners, and bundled tools can be used to optimize image loading. Make sure the path is correct otherwise a loading error will appear.

What is the function of span tag What is the function of span tag Apr 30, 2024 pm 01:54 PM

The SPAN tag is an inline HTML tag that is used to highlight text by applying attributes such as style, color, and font size. This includes emphasizing text, grouping text, adding hover effects, and dynamically updating content. It is used by placing <span> and </span> tags around the text you want to emphasize, and is manipulated via CSS styling or JavaScript. The benefits of SPAN tags include semantic clarity, styling flexibility, and ease of maintenance.

How to wrap prompt in js How to wrap prompt in js May 01, 2024 am 06:24 AM

When using the prompt() method in JavaScript, you can achieve line breaks through the following three methods: 1. Insert the "\n" character at the position where you want to break the line; 2. Use the line break character in the prompt text; 3. Use CSS's "white" -space: pre" style forces line breaks.

What language is the browser plug-in written in? What language is the browser plug-in written in? May 08, 2024 pm 09:36 PM

Browser plug-ins are usually written in the following languages: Front-end languages: JavaScript, HTML, CSS Back-end languages: C++, Rust, WebAssembly Other languages: Python, Java

What is node in js What is node in js May 07, 2024 pm 09:06 PM

Nodes are entities in the JavaScript DOM that represent HTML elements. They represent a specific element in the page and can be used to access and manipulate that element. Common node types include element nodes, text nodes, comment nodes, and document nodes. Through DOM methods such as getElementById(), you can access nodes and operate on them, including modifying properties, adding/removing child nodes, inserting/replacing nodes, and cloning nodes. Node traversal helps navigate within the DOM structure. Nodes are useful for dynamically creating page content, event handling, animation, and data binding.

See all articles