`
liu.da101
  • 浏览: 8153 次
  • 性别: Icon_minigender_1
  • 来自: 武汉
最近访客 更多访客>>
社区版块
存档分类
最新评论

更好的组织CSS

    博客分类:
  • css
阅读更多

有很多时候,本人在写CSS的时候,总是各种嵌套,这样据说会导致效率很低,而且不容易修改。这两天看了一个牛人的博客,大致有如下总结:

1,父标签就使用普通的class,然后子标签如果需要,则用父标签的class作前缀,后缀为自身的class。如,父标签为entry,则子标签为entry_counter

2,强烈建议使用Less工具来开发css,简单易维护

3,css要分模块,按照使用范围分为全局模块,局部模块和组件。开发时的css文件要分离开来,全局文件按照全局模块分离成多个,如global.css,global/common.css,global/footer.css。局部模块按照页面关系分离。如answer页面,则有answer.css,answer/ask.css,answer/answer.css。然后通过import引用。

4,线上环境不应该使用@import,需要一个合并压缩工具。

 

参考的博客:MZhou's blog

 

 

 

 

分享到:
评论
3 楼 zhuwenlong00 2011-09-26  
则子标签为entry_counter 那子标签的子标签,孙标签呢?
2 楼 zhangyaochun 2011-09-26  
楼主可以看一下-----精通CSS高级Web标准解决方案
1 楼 zhangyaochun 2011-09-26  
如果你做过组件开发 你会发现所有的组件在渲染成html的时候多是一个组件绑定一个css的 所有支持按分离式的css绑定。。。。。。。但是个人感觉对于门户的设计思路好像不是那么简单

相关推荐

    非常好的CSS帮助文档,让你更好的学习

    这个“非常好的CSS帮助文档”旨在为初学者和进阶者提供全面的学习资源,帮助他们更好地理解和掌握CSS的核心概念,从而更自由地编写出符合设计需求的网页框架。 一、CSS基础 1. 选择器:CSS的核心在于选择器,它能...

    好看的css样式

    10. **性能优化**:减少HTTP请求、合理组织CSS、使用最小化工具(如CSS Minifier)压缩CSS代码,都是提高页面加载速度的重要方法。 总的来说,这个压缩包中的"好看的css样式"可能包含了一系列实用的CSS样式表,可以...

    CSS减肥工具Firefox插件CSS Usage

    5. **优化提示**:可能包括一些最佳实践,比如避免使用过于具体的CSS选择器,合理组织CSS结构等,以维持CSS的可维护性和效率。 6. **与其他工具的结合**:可能还会提到如何与Firefox的其他开发者工具(如Firebug)...

    CSS电子书 CSS电子书 三合一

    7. **性能优化**:通过合理组织CSS、减少不必要的样式、利用CSS缓存和避免阻塞渲染等策略,可以提高网站性能。 8. **Pseudo类和Pseudo元素**:如:hover、:active、:focus等伪类和::before、::after等伪元素,能实现...

    css界面 css secret

    此外,还介绍了权重计算和优先级的概念,帮助开发者更好地控制样式应用。 2. **布局技术**:CSS揭秘涵盖了流式布局、网格系统、Flexbox和Grid布局等现代布局方法。这些技术能够帮助创建响应式、灵活且易于维护的...

    css教程,CSS编写

    这个"css教程"显然是为了帮助初学者或有经验的开发者更好地理解和掌握CSS。 在学习CSS时,你需要了解以下几个核心概念: 1. **选择器(Selectors)**:选择器是CSS中的关键,它们用来指定你想要应用样式的HTML元素...

    CSS制作好看的表格

    对于较大的表格,可以使用`<thead>`、`<tbody>`和`<tfoot>`标签来更好地组织表格结构,并通过CSS对其进行样式化处理。例如: ```css thead th { background-color: #ddd; /* 设置表头背景色 */ font-weight: bold;...

    几款好看的div+css模板

    Div(Division)是HTML中的一个容器元素,用于组织和分隔网页内容,而CSS(Cascading Style Sheets)则负责定义这些Div元素的样式,包括颜色、字体、布局等,使得页面设计更加灵活和可维护。以下是对标题和描述中...

    div+css布局大全

    在B/S(Browser/Server,浏览器/服务器)架构的项目中,表现层的设计与实现是用户体验的关键因素之一。"div+css布局大全"的...通过学习和实践,开发者能够更好地掌握Web前端的核心技能,提升项目的表现力和用户体验。

    最好用的Css编辑器

    6. **资源管理**:可能提供CSS资源管理功能,方便组织和链接外部样式表,以及导入和导出样式文件。 7. **错误检测**:通过语法高亮和错误检测,可以及时发现和修正CSS语法错误。 8. **多文档编辑**:支持同时打开...

    DIV+CSS模板非常好看

    “DIV+CSS模板非常好看”不仅意味着视觉上的吸引力,更揭示了`DIV+CSS`技术在网页设计中的强大功能。无论是对于新手还是经验丰富的开发者,理解和掌握`DIV+CSS`都是提升网页设计水平的关键步骤。利用提供的模板库,...

    CSS,CSS3基础

    8. **文本处理**:text-overflow、word-wrap和hyphens属性提供了更好的文本控制,比如溢出处理和自动换行。 9. **多背景层**:一个元素可以拥有多个背景图像,且可以设定各自的定位和混合模式。 10. **边框图像**...

    13种html5+css3全屏遮罩效果导航菜单

    1. 新增语义元素:如、、、等,帮助开发者更好地结构化网页内容。 2. 内联多媒体支持:通过和元素,可以直接在网页中嵌入视频和音频内容。 3. 表单控件改进:新增了date、range、email等输入类型,提供了更好的用户...

    css编译器-网站制作者的好工具

    接下来,我们将深入探讨CSS编译器的概念、功能以及如何使用,以便更好地理解其价值。 **CSS编译器概述** CSS编译器,又称为CSS预处理器或后处理器,是一种能够将特定语法(如Sass、Less或Stylus)转换为标准CSS的...

    CSS,在adf中创建css

    在ADF(Application Development Framework)中创建CSS,可以让你更好地控制应用程序的界面样式,使其更加美观和易用。下面我们将深入探讨如何在ADF中创建CSS以及相关的知识点。 1. **创建CSS文件**: 在ADF项目中...

    高效、可维护、组件化的CSS

    同时,为了实现真正的组件化,CSS预处理器(如Sass、Less)提供了变量、混合(mixins)、函数、嵌套等高级功能,这些功能可以帮助我们更好地组织和模块化CSS代码,进一步提高代码的可维护性。 最后,为了追求优化...

    精美css+div网站实例源码

    CSS布局技术包括流体布局、网格系统、Flexbox和Grid布局,其中Flexbox适用于一维布局,Grid则更适合二维布局。 2. **CSS选择器和属性**: 源码中包含了各种CSS选择器,如类选择器、ID选择器、元素选择器以及属性选择...

    css-handbook_handbook_css_

    CSS手册,如“css-handbook”,旨在提供全面、详尽的CSS指南,帮助开发者更好地理解和应用这一强大的样式语言。 ### CSS基础 CSS的核心概念在于其层叠特性,这意味着多个样式规则可以应用于同一个元素,最终的样式...

    CSS在线编辑

    不断实践和实验,结合实际项目,可以帮助用户更好地运用这些工具,创作出更具吸引力和用户体验的网页。同时,配合学习相关的教程和资源,如MDN Web Docs或W3Schools,可以加速CSS知识的积累和技能的提升。

    个人网页制作CSS

    9. **CSS模块化**:通过模块化组织CSS代码,如使用CSS Modules、CSS-in-JS库(如styled-components)等方法。 10. **浏览器兼容性**:了解不同浏览器对CSS特性的支持情况,以及如何使用工具(如Autoprefixer)处理...

Global site tag (gtag.js) - Google Analytics