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

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

  •  
  •   ggp1ot2 · 164 天前 · 1550 次点击
    这是一个创建于 164 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

    然后老大又看中某个网站,刚好那个网站又有部分页面源码在 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  
       164 天前
    作为一个前端 我也很讨厌 css 。。。
    christin
        2
    christin  
       164 天前 via iPhone
    css 无解,不像是 js 还有逻辑,靠想可以想出来。css 如果你知道有某个属性,就可以直接做出来,不知道就很麻烦。建议大概过一下 css ,知道有问题可能是出在什么地方,然后再去详细查。
    P233
        3
    P233  
       164 天前   ❤️ 1
    CSS 最有意思的地方,或者说最令那些思维严谨的开发者们抓狂的地方是:

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

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

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

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