最近考虑到对网站的样式部分进行统一管理,遂写出本文,供大家参详,不妥之处,欢迎补充【这只是一点点想法,希望大家一起完善】:
以前在程序中,有美工设计好了静态页面,而我们程序员将其整理成动态页面(例如jsp页面),一般程序员是不会管像图片、样式这样的东西,直接拿来就用了。这时可能出现下面几个问题:
1 修改过几次后,会出现无用的样式或者图片;
2 不同页面所用的样式可能在一个css文件中,查找起来非常的麻烦。
3 没有良好的结构,对以后的扩展(例如换肤)非常不利
4 样式或者图片名称起的很随意或者不符合实际要求,对理解有一定的影响。
下面是总结的一些css使用约定:
1尽量使用外部链接的方式引入css
示例详见:demo2.html
2 css文件开发版本中尽量加入样式注释
示例详见:demo2.css
3 css命名规则:
css文件名称建议具有实际意义,例如,公用css可以命名为cmm.css、邮件专用css可以命名为:mail.css
4 css样式命名规则:
样式命名建议根据实际用途进行命名,例如,用于标题的样式可以.title{};
尽可能的保证不同css中定义的样式不会发生命名上的冲突,以免造成不必要的相互影响
5 css用到的图片放置规则:
Css用到的图片,主要是背景。可以按照如下规则去做:
在css文件相同目录下建立文件夹images.在images下新建与css同名的文件夹(不带.css后缀名称),css文件的图片均放在这里面,demo3.html
详见示例:demo3.html
6建议将布局css与皮肤css分开编写。
布局Css即那些对网站骨骼结构产生影响的css,比如宽高、border、margin等等。
皮肤CSS指的是诸如颜色、背景图片这样的,不会对页面骨骼结构产生影响的css。这里分开,主要是为了以后的换肤功能,如不实现换肤的话,可以写在一起。
7布局css如果只用到一次(在一个页面中的一处地方使用),可以写在页面中,甚至直接写在html元素中,如果用到2次以上(同一页面或者不同页面中),必须归纳出来形成独立的css。
PS:如果需要文中提及的示例,请联系我。
分享到:
相关推荐
以下是一些关于CSS约定写法和利用扩展的具体实践建议: 1. **外部链接引入CSS**: 为减少HTTP请求次数并提高页面加载速度,应尽量将所有样式集中到外部CSS文件中,而不是内联在HTML中。这样也方便代码管理和后期...
《MooCSS:模块化面向对象的CSS写法详解》 在现代Web开发中,CSS已经从简单的样式语言发展为复杂、高效的样式管理系统。MooCSS(Module-Oriented Object CSS)是一种基于模块化和面向对象思想的CSS编写方式,旨在...
在CSS(层叠样式表)编码中,属性分组是一种优化和提高代码可读性的技巧。...同时,结合其他最佳实践,如使用CSS预处理器(如Sass或Less)、模块化CSS(如BEM)以及遵循一定的命名约定,可以使CSS代码更加有序和高效。
HTML 代码写法规范是指编写 HTML 代码时需要遵守的一些规则和约定,以确保代码的可读性、可维护性和可扩展性。本文档总结了 HTML 代码写法规范的主要内容,涵盖了页面内码标识顺序、标题命名、背景色属性、引号的...
约定的语法规范:并集选择器约定竖着写 最后一个选择器不需要加逗号, (4)交集选择器 语法 选择器1选择器2选择器3{ 属性: 属性值; } 用选择器1选择元素集合A,用选择器2在A中选择元素 标签名只能写...
不要使用冗余和低效的CSS写法,如 `ul li a span { … }`,这会导致不必要的计算和渲染负担。 7. **使用!important谨慎**: `!important` 应谨慎使用,因为它可以打破样式优先级的正常流程,使得调试变得困难。 ...
在CSS中,使用驼峰命名法(CamelCase)是一种常见的命名约定。这种方式不仅提高了代码的可读性,也使得CSS类名更具描述性。 - **示例:** - `myName` - `searchInput` - `searchIcon` - `searchBtn` **2. 常用...
总的来说,提高CSS的可阅读性涉及多个方面:规范化属性顺序、合理缩进、使用注释、模块化设计、命名约定以及利用预处理器。通过这些实践,可以显著提升代码质量,让CSS代码更易于理解和维护,从而促进团队协作效率的...
在代码示例中,`.t10`到`.t90`的宽度定义展示了另一种写法,这种写法更适合创建一系列相似的样式,如响应式布局中的百分比宽度。尽管它们被写在一行内,但每个选择器都是独立的,便于快速复制和修改。 理解并遵循...
首先,我们可以看到一组常用的基础命名约定,这些约定用于描述网页的不同部分: 1. **头部(Header)**:通常使用`header`作为类或ID名称。 2. **内容区域(Content)**:可以是`content`或`container`,表示页面的...
手册还提到了一些CSS3的新特性,比如`text-shadow`和`box-shadow`属性,以及针对旧版浏览器(如IE6)的兼容性写法。 在JavaScript方面,文档指出JavaScript代码的规范性,包括函数、对象、变量命名规则和一些特定的...
- **Less**:与Sass类似,提供了编程式的CSS写法,如变量、嵌套和运算符。 4. **CSS响应式设计**: - **媒体查询(Media Queries)**:根据设备特性(如视口宽度)应用不同的CSS样式,实现跨设备兼容性。 - **...
### 前端面试题详解 ...实践中,可以采用CSS Modules或使用命名约定如BEM。 **29、元素竖向的百分比设定是相对于容器的高度吗?** - 是的,百分比高度通常是相对于最近的具有百分比值的祖先元素的高度。 **30、...
其次,Stylelint是一个强大的CSS linter,它可以检查你的CSS、SCSS或Less代码,找出潜在的错误和不符合规范的写法。通过配置stylelint的规则,你可以设定代码质量的标准,比如禁止使用特定的属性或者强制某种命名...
首先,CSS的语法结构是严谨的,任何不符合规则的写法都可能导致解析错误。例如,属性名和值之间必须用冒号分隔,声明结束时需要分号,选择器和大括号之间不能有空格等。如果违反这些基本规则,浏览器可能无法正确...
个人前端开发规范是指在进行前端开发过程中,开发者自定义或遵循的一些标准规则和约定,用以保证代码的一致性、可读性和可维护性。前端开发规范涵盖HTML、CSS、JavaScript等前端技术的编写规范和代码风格。下面详细...
10. **BEM命名法**:Block Element Modifier是一种流行的CSS命名约定,有助于保持代码组织清晰,提高可维护性。BEM的结构是`block__element--modifier`,例如`header__menu--active`。 准备代码301入学考试时,不仅...
rscss(Reasonable System for CSS Stylesheets)和rsjs(Reasonable System for JavaScript)就是其中的一套简洁且高效的前端开发规则和约定。通过推行以组件为中心的思考方式、合理的类命名规范和避免选择器冲突的...