以正确的方式重新学习CSS
Qui*_*Par 43 css user-interface frontend
我是一名从事Web开发两年多的程序员.尽管过去两年我一直在做前端工程,但我认为我没有以正确的方式做到这一点
.例如:
- 我仍然使用表格进行布局,而不仅仅使用CSS.我还没有找到一种正确呈现数据对齐和表格的方法.
- 我不知道之间的区别
display: none和visibility: hidden(当然,我现在知道了.但也有很多时候喜欢-填充,边距,溢出等) - 我没有真正遵循继承方式来编写CSS.几乎每种风格都以一个
#而不是一个类开头. - 每当页面加载缓慢时,html元素就会不合适,只有在它完全加载时才会按顺序排列.
- 我不知道萤火虫的这张照片是什么传递的(顺便说一下,萤火虫是我的救世主.如果没有萤火虫,生活将是不可能的)
- 每当布局乱七八糟时,我很想使用position:absolute.它总是会陷入更大的混乱.
我知道我做了很多错事(我需要把它弄好),但是我设法让事情到位并以某种方式显示出来,只是看到它在不同的浏览器中搞砸了.
我不想在CSS或CSS上做假人的入门.我知道的不止于此.我想以正确的方式学习CSS.专注于我上面展示的例子和纠正它们之类的问题.
您能否指出我的资源或添加CSS开发人员使用的常见建议和提示,以使其正确.
Bry*_*n A 12
以下是一些生活的一般规则:
- 表适用于表格数据.如果您呈现的数据属于表格,请不要试图用
<div>s 制作网格.没有意义. - 就布局而言,使用
<div>标签,远离桌子.快点了解浮动物业.使用CSS3,显示属性将有新的,改进的标准.学习它们. display: none从视口中完全删除元素.相反,visibility: hidden保留元素本来会占用的空白.在这两种情况下,元素都保留在DOM中.- 类和ID的一般规则.页面元素和ID应该与每页具有一对一的关系.例如,#Column1,#Column2,#Footer,#Header.另一方面,页面元素和类应该是多对一关系,例如:.container或.navLink.当你知道你将要使用特定元素时使用类.
- 从效率的角度考虑.您拥有的样式规则越少,页面加载的速度就越快,调试时样式问题也就越容易.
我还有大约一百万个其他的话要说,但这应该让你开始.
nee*_*zer 10
对于布局驱动的CSS,请务必查看关于CSS的所有内容都是错误的.它有点尖端,因为IE 7不支持display: table(可惜,我知道),但它确实涵盖了传统的布局CSS技术,如浮动和绝对定位,并提供了从基于表格的布局到CSS布局的良好过渡.我强烈推荐它.
我不知道你是否正在构建任何动态语言,或者你只是编写原始HTML,但你也应该考虑在你的项目中使用SASS,因为我认为这有助于你更多地关注继承.否则,查看更多"基本"教程(如CSS for Dummies)可能实际上是有帮助的,因为它们详细介绍了很多CSS的基本原理.
最后,当您在语境下具有语义正确的(x)html时,CSS效果最佳.在我看来,当你在下面有很好的,语义正确的html时,最容易看到和学习"好"的CSS. 这里有一个很好的概述何时使用什么标签.一般来说,我发现最好先编写我的内容,不要考虑以后的内容,然后再使用CSS使其变得华丽.
和往常一样,你可以在CSS Tricks上获得很多巧妙的提示和技巧,这些技巧总是帮助我学习更多关于语言正确用法的知识(比如我学习overflow: auto了包含浮动元素的时候!天才!).
希望有所帮助!
访问CSS Zen Garden,看看你只能用CSS做什么.
访问W3学校并按照教程进行操作.这对你来说似乎很简单,但你会学到基本的东西.
访问一些网站,如A列表除了看看如何做和学习技巧.
看看CSS框架是否适合您的需求(例如960 Grid).