【日記】2日目：STUDIOからhtml&cssにしたい と言われたのでやってみた

ということで検証みながら
コードに直す作業👀
気づいたことをいくつか。

実装がメインなので
本当にメモ程度ですが笑
記録として残しておきます✍️

また気づきがあれば
追記していくかもしれません💡

Nuxtばっかり触っていたので
急に素のHTML&CSSと言われると
あれ？何するんだっけ？🐣
となります😂笑

CSSだとクラス名毎回つけて
どこの区画か分かるように
どうしても長くなるので
嫌なんですよね😖(命名得意になろう)

ということでSass入れたかったのですが、
相手側のエンジニアさんに分かりやすく
通常のCSSでやる❗️
ということだったのでCSSで頑張ることに。

ちなみにVSCode使ってて
Sass使いたい方はこちらのやり方で
簡単に使えるようになります💫🧙‍♀️
https://asamone.com/2018/09/30/sass-vscode/

Nuxtで使い方は
以前解説したこちら！

コピペで済むから楽といえば楽

検証に既にコードがあるので
そのコードをコピペする分、
作業としては負担が軽減されますね🌟

どうせデザインするなら
STUDIOでやってしまえば
ある程度のコードもできるので
そこはメリットかもしれません🍒

やたらdivが多い

例えばpタグの中に
spanで強調させたかったら
こうなりますね。

これがSTUDIOで作ったサイトを
検証で見るとよく分からないことに笑

これコードでどうするの？

さぁこの図を見てください👀
これはSTUDIOに限らず
あり得るパターンですね🌟

皆さんならどう実装しますか？💡
SPで順番が213になるので
flexのorder指定で順番は
変えられますね…🤔

ただそうなると
PCでの表示はどうなるのか…
wrapした3をpositionで
無理やり収める…と
widthが2と統一できないし…🤔
となりそうですが
flex-direction: column;
flex-wrap: wrap;
でできます🌟

感想

今回のケースは稀だと思いますが、
実際のコードと違う部分がでてきて
混乱する可能性はあります。

STUDIOが重かったり
今回のような障害がおきて
web検証頼みになることも
あるかもしれません💭

そんなにないと思いますが！😀
シンプルな構造ならSTUDIO使う方が
作業効率良いと思うので、
STUDIOさんには頑張ってほしいです✨✊