Mais conteúdo relacionado
Semelhante a マークアップの作業効率をあげよう! (20)
マークアップの作業効率をあげよう!
- 30. いろいろあります
Sass, Less, Stylus, TASS, PCSSなど。変数が扱
えたり、ネスト(入れ子)で記述できたりなどさ
まざまな便利な機能があります。
今回注目したいのは、ファイルを結合できるとい
うこと。
これにより、目的のものが探しやすく、また追加
・削除しやすい。
※ディレクトリの構成が明確という前提です。
Notas do Editor
- 自動補完の説明をデモでやる
<address>
個人的には自動補完が好きではない
入力候補がもっさり出てきたり、出てくるタイミングが自分のコーディングのリズムに会っていない、また選択するというひと手間が発生するから
- ! + tab
- さっきの入力補完とは違うことがわかったと思います。
- ! + tab
- たとえばこのようなページ(あらかじめ完成しているページ)を作りたい。
これをEmmetを使って書いていきましょう。
マークアップするときは、すでにプレーンテキストが完成していることがほとんどだと思うので、その想定でやっていきます。
ラップして展開 shift+command+j
nav>ul.navList>li.navList__item.navList__item_$*>a
link:css
bdt+
lis:n
ul,li { margin: 0; padding: 0; }li { list-style: none; }nav { border-top: 1px solid #000; border-bottom: 1px solid #000; }.navList { text-align: center; } .navList a { text-decoration: none; }.navList__item { border-right: 1px solid #000; display: inline-block; width: 200px; }.navList__item:first-child { border-left: 1px solid #000; }main { margin: auto; width: 960px; }.bg1 { background-color: #000000; }.p-lt { background-color: #000000; }.u-white { color: #ffffff; }.u-p10 { padding: 10px; }
- 例えばLTの募集が埋まったので、募集についての記載を消したいとします。
htmlから不要なものを削除する。
それだけでOK?
CSSは?
でみてみると.c-p10というクラス名をつけています。
これ、他の箇所でも使っていそうな名前だな…消したらまずそうだな…とりあえず置いとこ
これ心当たりある人いません?
本当は消してもいいものがあるかもしれないのによくわからないからとりあえず残しておく。
こうしてCSSファイルはどんどん大きくなっていきます。
- これ心当たりある人いません?
本当は消してもいいものがあるかもしれないのによくわからないからとりあえず残しておく。
- これ心当たりある人いません?
本当は消してもいいものがあるかもしれないのによくわからないからとりあえず残しておく。
- ! + tab
- ! + tab
- デスクトップファーストの時代は終わりました。
モバイルファーストです。
フロント側で出来ることありますよね?
- CSS設計をこれから本格的に取り組む人は、最初はちょっととっつきにくさを感じるかもしれません…
https://github.com/hiloki/flocss
- ! + tab
- ! + tab
- ! + tab
- CSS設計をこれから本格的に取り組む人は、最初はちょっととっつきにくさを感じるかもしれません…