有没有前端开发的一些工具、技巧分享？经验类的

2021-12-13 20:33:55 +08:00
 ggp1ot2

我是搞后端的，最近被老大喊去做一个文档页面出来。

然后老大又看中某个网站，刚好那个网站又有部分页面源码在 GitHub ，于是把那个网站前端样式什么的拉到本地，开始魔改，比如改改按钮、颜色什么的。

先说下我的调试流程，项目文件用 pycharm 打开，然后编译项目生成一个包含 html+css+js 等静态文件的页面，用 chrome 打开对应页面，然后 F12 ，需要调哪个区域，就看看对应位置的 css 样式，在 chrome 里面调试到满意，然后写到本地 css 文件里面，保存重新编译，如果 OK 就继续魔改下一个位置。

奈何前端什么的只是简单了解，所以经常会被一个很简单的问题卡很久，为什么说他简单呢，只要能定位问题所在，百度第一页就有结果，但因为我没办法定位到问题在哪，所以经常浪费时间在无用的搜索上。。。

不知道像这种需求是不是有更好的 IDE 选择，例如提示我哪里可能出问题，或者点击一个 css ，能预览到和这个部分相关的内容，或者前端开发一般用什么 IDE

而且在刚开始还行，后面越来越痛苦，因为是用的别人的文件，所以我看到一个要改的，就写一个新的样式去覆盖，但是样式之间又是又关联的，改好了这里，那里又出了问题。。。不知道有没有高手能给点建议

2301 次点击
所在节点    程序员
22 条回复
rodrick
2021-12-13 20:56:26 +08:00
作为一个前端 我也很讨厌 css 。。。
christin
2021-12-13 21:02:32 +08:00
css 无解，不像是 js 还有逻辑，靠想可以想出来。css 如果你知道有某个属性，就可以直接做出来，不知道就很麻烦。建议大概过一下 css ，知道有问题可能是出在什么地方，然后再去详细查。
P233
2021-12-13 21:22:02 +08:00
CSS 最有意思的地方，或者说最令那些思维严谨的开发者们抓狂的地方是：

大部分属性可以按照字面意思独立使用，但是将一些特定属性组合在一起使用时会产生隐藏效果。至于这些特定组合的搭配法门，没有教程能讲明白或者说讲全面，只能自己挨个实验，然后记在脑袋里。

只有积攒了足够多的搭配方案，才能在这之上不断演变，创造出新奇的或者炫酷的样式效果。
ggp1ot2
2021-12-13 21:38:54 +08:00
@christin #2 折腾了好几天，从 0 写个 CSS 不太行，但是随便一个 CSS 样式都能上手改，要是一个位置就一个 CSS 还好，就是有些元素，有定义的，有覆盖的，还有继承的，最讨厌的就是这个 CSS 他不是.xxxx 而是 xx>xx ，然后空格一老串，太折磨了
ggp1ot2
2021-12-13 21:39:32 +08:00
@P233 #3 对，目前就是这样，深有体会，bug 折腾多了，类似的看到就能大致找到排查方案
ggp1ot2
2021-12-13 21:39:56 +08:00
大家一般调试纯前端，用什么 IDE ？
P233
2021-12-13 21:58:57 +08:00
CSS 只能人肉 debug 吧
InkyMountain
2021-12-13 22:19:13 +08:00
webstorm 是前端专用的
DOLLOR
2021-12-13 22:28:08 +08:00
CSS 之于前端，正如 SQL 之于后端。
christin
2021-12-13 22:51:28 +08:00
@ggp1ot2 #4 调试用 webstorm 或者 vs code ，不过用什么无所谓的。你说的>是选择器，选择器一共没几个，记一记就行了。继承可以无视，因为你都可以重写掉，覆盖的话看一下选择器的权重就好了。
DiamondYuan
2021-12-13 23:14:15 +08:00
通过 js 计算出精确的 px 。所有元素都用 fixed abslote 即可。 （ vs code 就是这样做的
iMusic
2021-12-13 23:56:08 +08:00
有插件可以做到在开发者工具修改样式同步到本地文件。

前端开发现在用 VS Code 比较多。现在很多 node 工具开启的服务都带有自动刷新功能，还有些有热重载（ hot reload ）功能，可以修改样式保存，页面样式自动更新。

现在很多文档页面是用工具生成的，比如 GitBook ，基于 React 的 Gatsby ，基于 Vue 的 VuePress ，Docsify 等。可以看下源文件，如果是生成器生成的，很容易看出来用的什么。
skenan
2021-12-13 23:59:01 +08:00
试试 tailwindcss 吧…
agagega
2021-12-14 00:00:50 +08:00
@P233
一言以蔽之：CSS 的属性不是正交的。
christin
2021-12-14 08:57:40 +08:00
@skenan tailwind 对不懂 css 的来说更难，这个东西只是一个用类名来写 css ，归根到底还是要会 css
waiaan
2021-12-14 09:17:51 +08:00
前端开发一般用 vscode ，调试就是浏览器。CSS 才是前端的精髓和难点。
lneoi
2021-12-14 09:22:16 +08:00
css 要基于文档流理解，主要是有默认的排版逻辑，导致加一个属性怎么会变成另外一个样子。所以单纯的理解 css 会觉得怎么这么怪异。另一个就是属性会继承，但 chrome 里可以看到属性，所以会好找一些。
snoopyhai
2021-12-14 11:01:55 +08:00
css 这玩意吧...最好还是交给专人去处理.
你这么改改看似没问题了....有可能会出现兼容性问题.
如果要学. 要从最初的 DTD 开始了解...蛮麻烦的.
monologue520
2021-12-14 11:09:57 +08:00
我是前端 我喜欢 css 主要用 vscode webstorm 也用 比较少
wdssmq
2021-12-14 12:45:51 +08:00
写文档直接用 Docsify 吧，，

这是一个专为移动设备优化的页面（即为了让你能够在 Google 搜索结果里秒开这个页面），如果你希望参与 V2EX 社区的讨论，你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/821963

V2EX 是创意工作者们的社区，是一个分享自己正在做的有趣事物、交流想法，可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX