来源:广州千锋教育时间:2022/9/6 15:50:18
千锋教育-IT职业教育良心品牌。千锋 HTML5 大前端课程颠覆升级:千锋全覆盖企业项目开发前端、中台、后台全流程,真实承接上下游需求,协同协作;项目交叉融合,PC端、移动端、智能终端,各平台功能实现,技能进步看得见;还原企业真实开发场景,从项目立项到部署上线全程参与,不落下每一个开发环节;高验收标准,以真实企业需求要求功能实现,项目无BUG,流畅运行;基础-专业-项目-企业-就业-职后六维全息课程覆盖职场就业与职后发展,助力学员从全栈工程师向架构师进阶,满足不同职业发展需求。
为了让大家率的进行工作,本文归纳总结了几个实用的CSS代码技巧,希望对大家能有所帮助。
1、短横线命名
当class或者ID包含多个单词时,应使用连字符(-),CSS不区分大小写,因此不能使用驼峰式命名。同样,CSS中也不建议使用下划线连接的命名方式。
/* 正确 */
.footer-column-left { }
/* 错误 */
.footerColumnLeft { }
.footer_column_left { }
2、使用AutoPrefixer达到更好的兼容性
浏览器前缀是CSS中较烦人的事情之一,每个属性需要的前缀是不一致的,你永远不知道到底需要哪一个,如果真的要把它一个一个手动添加到样式表中,那无疑是一个无聊的噩梦。
值得庆幸的是,有工具可以自动为我们提供添加浏览器前缀的功能,甚至可以决定需要支持哪些浏览器:
在线工具:Autoprefixer
文本编辑器插件:Sublime Text, Atom
代码库:Autoprefixer (PostCSS)