V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
ggp1ot2
V2EX  ›  程序员

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

  •  
  •   ggp1ot2 · 2021-12-13 20:33:55 +08:00 · 2496 次点击
    这是一个创建于 1060 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

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

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

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

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

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

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

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

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

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

    现在很多文档页面是用工具生成的,比如 GitBook ,基于 React 的 Gatsby ,基于 Vue 的 VuePress ,Docsify 等。可以看下源文件,如果是生成器生成的,很容易看出来用的什么。
    skenan
        13
    skenan  
       2021-12-13 23:59:01 +08:00 via iPhone
    试试 tailwindcss 吧…
    agagega
        14
    agagega  
       2021-12-14 00:00:50 +08:00 via iPhone
    @P233
    一言以蔽之:CSS 的属性不是正交的。
    christin
        15
    christin  
       2021-12-14 08:57:40 +08:00
    @skenan tailwind 对不懂 css 的来说更难,这个东西只是一个用类名来写 css ,归根到底还是要会 css
    waiaan
        16
    waiaan  
       2021-12-14 09:17:51 +08:00
    前端开发一般用 vscode ,调试就是浏览器。CSS 才是前端的精髓和难点。
    lneoi
        17
    lneoi  
       2021-12-14 09:22:16 +08:00
    css 要基于文档流理解,主要是有默认的排版逻辑,导致加一个属性怎么会变成另外一个样子。所以单纯的理解 css 会觉得怎么这么怪异。另一个就是属性会继承,但 chrome 里可以看到属性,所以会好找一些。
    snoopyhai
        18
    snoopyhai  
       2021-12-14 11:01:55 +08:00
    css 这玩意吧...最好还是交给专人去处理.
    你这么改改看似没问题了....有可能会出现兼容性问题.
    如果要学. 要从最初的 DTD 开始了解...蛮麻烦的.
    monologue520
        19
    monologue520  
       2021-12-14 11:09:57 +08:00
    我是前端 我喜欢 css 主要用 vscode webstorm 也用 比较少
    wdssmq
        20
    wdssmq  
       2021-12-14 12:45:51 +08:00
    写文档直接用 Docsify 吧,,
    chengxy
        21
    chengxy  
       2021-12-14 17:33:38 +08:00
    flex 吃遍天
    chengxy
        22
    chengxy  
       2021-12-14 17:34:29 +08:00
    @christin #15 确实,这东西必须要记住 css 属性的。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1013 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 20ms · UTC 20:39 · PVG 04:39 · LAX 12:39 · JFK 15:39
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.