0

0

css横着写还是竖着写

藏色散人

藏色散人

发布时间:2021-02-01 09:48:00

|

2191人浏览过

|

来源于php中文网

原创

不同的css写法有不同的优势,比如在开发时,css竖着写,按规范编码,格式缩进,一是代码可读性强,二是容易调试;在上线时,css让横着写,可以用gulp或grunt等构建工具编写脚本,优化css缩小css体积,使生成代码变横的。

css横着写还是竖着写

本教程操作环境:windows7系统、css3版本、Dell G3电脑。

css横着写还是竖着写?

开发:竖着写,按规范编码,格式缩进,一是代码可读性强,二是容易调试

上线:用gulp或grunt等构建工具编写脚本,优化css缩小css体积,生成代码变横的

立即学习前端免费学习笔记(深入)”;

拓展:

纵向书写特点:

每个CSS属性独立一行,一般不会出现换行或横向滚动条。

可以通过firebug等工具查找到模块,在DW中ctrl+g行定位,修改方便。

属性段落间有缩进,保证了代码的整洁,层次清楚,符合编程语言代码规范,修改更加直观。

存在的问题:代码冗余(如空格符、tab符、换行符);文件大小增加;容易出现纵向滚动条。

横向书写特点:

最大化的利用了空间,单屏内能显示更多,减小了纵向滚动条出现的几率,能够快速捕获较多的信息。

减小了文件大小,省去了不必要的空格、换行等。

Microweber
Microweber

Microweber是一款开源的拖放式网站构建工具和强大的下一代内容管理系统,内置电子商务功能。无论您的网站是在线商店、企业网站还是个人博客,您都可以轻松使用Microweber构建。由于其出色的拖放技术,即使没有技术知识,Microweber也使您能够更轻松地构建您的网站,并实时查看您对网站所做的更改。其革命性的实时文本编写和编辑功能以及拖放功能意味着用户体验得到了显著改善,用户能够以更少的时间和精力实现视觉上吸引人的网站和更轻松的内容管理。

下载

横向书写方便分块以及注释,便于查看CSS结构,选择符一目了然。当今显示器正朝着越来越大,越来越宽发展,基本上一行内可以显示完全。

加快编写CSS速度,不用每次敲换行和tab,并且减少拉动滚动条的次数。

如果是活动页,不用作压缩处理。使用CSS optimizers 来优化CSS是提倡的,但是使用横向书写,基本上不存在多余的空格和换行,因此可以不用压缩,这样效率和能力都会得到提高。

便于阅读和查找相关结构。代码编辑器对同行数定位做的都比较好,因此我们要解决的是如何快速纵向定位目标。横向书写时选择符纵向对齐,再加上

.class_name_2 .class_name_2_1 .class_name_2_1_1的选择符层次分明,因此很容易定位到目标。

在调试小Bug的时候就可以直接打开CSS更改,不用再打开firebug去找到模块。

横向书写,是基于CSS选择符的写法,层次容易对比,更利于模块化。对整体CSS规划有好处,后期维护成本低。

便于不同版本的CSS代码对比。

存在的问题:书写过密,从而影响阅读。这种弊端显而易见,但只要优化做到家,这种状况会很少。

尽管对于现如今的带宽来说,网页文件那仅以K为单位的大小实在是微不足道,但如何将这以K来计算的网页文件精简到最小还是网页设计师们应该考虑的问题之一。而横向书写省去了不必要的空格、换行等,大大减小了文件大小。

我们不能说哪种书写是对的,至于具体采用哪种写法依个人选择,当然改变习惯可能会影响一个人的工作效率,那我们提倡的是:提交的CSS样式文件是经过代码格式化的,而这个工作可以完全交给DW等工具,我们只要点击一下,整个文件就会像我们想象的那样呈现出来。这样的代码看起来很舒服,修改容易,团队成员在后续交接也会变得更加顺利。

推荐:《css视频教程

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
css3教程
css3教程

php中文网为大家提供css3教程合集,CSS3的语法是建立在CSS原先版本基础上的,它允许使用者在标签中指定特定的HTML元素而不必使用多余的class、ID或JavaScript。php中文网还为大家带来css3的相关下载资源、相关课程以及相关文章等内容,供大家免费下载使用。

401

2023.06.14

有哪些css3渐变属性
有哪些css3渐变属性

css3中渐变属性有linear-gradient、radial-gradient、conic-gradient、repeating-linear-gradient、repeating-radial-gradient等。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

140

2023.11.01

java入门学习合集
java入门学习合集

本专题整合了java入门学习指南、初学者项目实战、入门到精通等等内容,阅读专题下面的文章了解更多详细学习方法。

1

2026.01.29

java配置环境变量教程合集
java配置环境变量教程合集

本专题整合了java配置环境变量设置、步骤、安装jdk、避免冲突等等相关内容,阅读专题下面的文章了解更多详细操作。

1

2026.01.29

java成品学习网站推荐大全
java成品学习网站推荐大全

本专题整合了java成品网站、在线成品网站源码、源码入口等等相关内容,阅读专题下面的文章了解更多详细推荐内容。

0

2026.01.29

Java字符串处理使用教程合集
Java字符串处理使用教程合集

本专题整合了Java字符串截取、处理、使用、实战等等教程内容,阅读专题下面的文章了解详细操作教程。

0

2026.01.29

Java空对象相关教程合集
Java空对象相关教程合集

本专题整合了Java空对象相关教程,阅读专题下面的文章了解更多详细内容。

3

2026.01.29

clawdbot ai使用教程 保姆级clawdbot部署安装手册
clawdbot ai使用教程 保姆级clawdbot部署安装手册

Clawdbot是一个“有灵魂”的AI助手,可以帮用户清空收件箱、发送电子邮件、管理日历、办理航班值机等等,并且可以接入用户常用的任何聊天APP,所有的操作均可通过WhatsApp、Telegram等平台完成,用户只需通过对话,就能操控设备自动执行各类任务。

24

2026.01.29

clawdbot龙虾机器人官网入口 clawdbot ai官方网站地址
clawdbot龙虾机器人官网入口 clawdbot ai官方网站地址

clawdbot龙虾机器人官网入口:https://clawd.bot/,clawdbot ai是一个“有灵魂”的AI助手,可以帮用户清空收件箱、发送电子邮件、管理日历、办理航班值机等等,并且可以接入用户常用的任何聊天APP,所有的操作均可通过WhatsApp、Telegram等平台完成,用户只需通过对话,就能操控设备自动执行各类任务。

16

2026.01.29

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

相关下载

更多

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Sass 教程
Sass 教程

共14课时 | 0.8万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 3.1万人学习

CSS教程
CSS教程

共754课时 | 24.8万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号