質問者のスタンスはどうあれ、「なんでこうしてるのか分からん」というのは質問として成り立ってるので回答します。(問題・課題が含まれていない質問かもしれませんが)
なお個人的な推測なので全く異なっているかもしれないので参考程度に。
初期状態で、ドット部分には「slick-dots」というクラスが割り振られています。
$("#slider").slick({〜〜});
の方のコードを書くと、このクラス名を好きな物に変更出来ます。
これらはslick.jsの仕様です。
じゃあなんで「slick-dots」のままじゃダメなの? なんで変更してんの?というと、
**その方が都合が良いとslick.jsの作者が思ったから(そしてブログ筆者はそれを紹介してるだけ)**だと思われます。
ぶっちゃけ、slick-dotsのままにして、CSSでこのクラスに対してスタイルを当ててもいいかと思います。
でも例えば
「ページA,B,Cがあり、各ページにスライダーが存在する。ページAのドットは大きくして、他のページはデフォルトのままにしたい」
というニーズがあったとします。
ライブラリ作者としては出来る限りニーズに応えたいところ。だから「ドット部分のクラス名を自由に変更可能」という仕様を組み込んだのではないかと(クラス名を変更出来ればCSSで見た目はどうとでも変えられる為)。
で、ブログ筆者は「こんな機能もあるよ」と紹介する為にこれを取り上げているものと推測します。
だから質問主さんの取り得る選択肢としては以下のいずれかだと思います。
- JSのことは忘れて、とりあえずCSSでslick-dotsクラスをカスタムする。
$("#slider").slick({〜〜});
を使った場合のエラーを解決する(実際に使用しているHTMLとエラー文を載せれば分かる人が回答してくれるんじゃなかろうか)。
その後新たに割り振ったクラスをCSSでカスタムする。
$('.flexslider .slider').slick({〜〜});
を使いたいなら、HTML側をそれに見合った定義にする、またはHTML側に合わせて正しく対象を指定する。
(要は指定のクラスが付いているオブジェクトにslickなんて存在しねーよ、と言われているので、それを解決する)
その後新たに割り振ったクラスをCSSでカスタムする。