آینده CSS و Pre/Post processor ها با Post CSS

postcss

از سال ۱۹۹۶ که CSS وارد عرصه وب شد، تغییراتی بسیار زیادی رو اون صورت گرفت و امروزه به پیشرفته ترین حالت خودش رسیده و میشه به تنهایی با CSS ایده های خلاقانه خیلی خوب رو پیاده سازی کرد، اما در این راه پر پیچ و خم مشکلاتی هم وجود داشت، چون CSS برای نگه داری و توسعه برای پروژه های بزرگ خیلی سخت می شد برای همین ساختار هایی برای نوشتن CSS به وجود اومد مثل : OOCSS , SMACSS و BEM  و همچنین Preprocessor  وارد عرصه CSS شدند که برای توسعه CSS کار Front End Developer ها رو خیلی سریع تر کرد و دیگه میتونستن خیلی خوب پروژه هاشون رو مدیریت کنن. این Preprocessor  قابلیت های خیلی خوبی رو  با خودشون آوردن که مدیریت  و توسعه css رو خیلی ساده وسریعتر کرده که چنتاشون رو تو لیست پایین آوردم :

  • CSSTemplating
  • Variables
  • functions
  • Mixins

و در نهایت مزیت های بسیار خوبی رو به وجود اوردن، کد ها تمیز تر نوشته میشن، زمان نوشتن کد و تغییرات رو خیلی کمتر میکنن، مدیریت کدهای CSS خیلی ساده تر میشه  و از همه مهتر کدهای رو میتونید سازمان دهی بکنید، پس Preprocessor  واقعا یک جهش بسیار بزرگ بود، الان دیگه توی پروژه های جوری شده استفاده از SASS تقریبا غیر قابل ممکنه و استفاده نکردن از اونها یک اشتباه بزرگ محسوب میشه.

گاهی اوقات ممکنه بعد از طراحی لی اوت، مشتری از شما بخواد که رنگ طرح و یا تایپوگرافی طرح رو عوض کنید، اگر شما sass  رو خوب نوشته باشید میتونید این تغییرات رو در کوتاه ترین زمان ممکن اعمال کنید که این کار میتونه خیلی از مشکلات بین شما و کارفرما رو از بین ببره 🙂

و اما Post CSS … لطفا با من در ادامه مطلب همراه باشید

Post CSS :

post css در اصل تبدیل کننده دستور های css با استفاده از پلاگین های جاوا اسکریپته ، به عبارتی کد های css رو با استفاده از دستورات جاوااسکریپت میتونه تبدیل کنه. نکته ای مهمه اینکه post css خودش به تنهایی کاری رو انجام نمیده و کاملا متکی به پلاگین هایی است  که براش نوشته شده .  میشه گفت که  post css میتونه علاوه بر امکانات sass، امکانات بیشتری رو با استفاده از پلاگین هایی که براش نوشته شده انجام بده. به عنوان مثال یک پلاگین به نام postcss-simple-vars وجود داره که قابلیت نوشتن متغیر رو به css شما میتونه اضافه بکنه بدون اینکه از  Preprocessor هایی مثل sass استفاده کنید. خوبی post css تا به اینجای کار اینه که پلاگین های خیلی زیادی براش نوشته شده، پلاگین هایی خودشون یک ماهیت دارند و مبتنی بر هیچ سیستمی نیز نیستند هم در بعضی موارد برای Post css نوشته شده اند . به عنوان مثال پلاگین RTLCSS رو در نظر بگیرید، این پلاگین برای POST CSS هم نوشته شده و به راحتی میتونید از اون استفاده کنید، در عرض چند ثانیه میتونید کدهای LTR رو به RTL تبدیل کنید.

کد مربوط به LTR :

.example {
  display:inline-block;
  padding:5px 10px 15px 20px;
  margin:5px 10px 15px 20px;
  border-style:dotted dashed double solid;
  border-width:1px 2px 3px 4px;
  border-color:red green blue black;
  box-shadow: -1em 0 0.4em gray, 3px 3px 30px black;
}

استفاده از این پلاگین و تبدیل آن به RTL :

.example {
  display:inline-block;
  padding:5px 20px 15px 10px;
  margin:5px 20px 15px 10px;
  border-style:dotted solid double dashed;
  border-width:1px 4px 3px 2px;
  border-color:red black blue green;
  box-shadow: 1em 0 0.4em gray, -3px 3px 30px black;
}

استفاده ازPOST CSS بدون Preprocessor ها

postcss-css

استفاده ازPOST CSS همراه با Preprocessor ها

postcss-precss

 نکاتی که باید در مورد Post CSS بدانید :

  • post css رو هم میشه با Preprocessor هایی مثل sass استفاده کرد و هم میشود با کد css معمولی استفاده کرد .
  • post css مبتنی بر npm هست و به راحتی با استفاده از task runner هایی مثل gulp و یا grunt میشه از اون استفاده کرد.
  • post css که JS نوشته شده از libsass که با زبان c++ نوشته شده طبق تست انجام شده ۳ برابر سریعتره.
  • ساده بودن ساخت پلاگین برای post css، فقط نیاز به زبان جاوا اسکریپت داره.

یک مثال از یک پلاگین نوشته شده برای postcss :

post css پلاگین های بسیار متنوعی داره که میخوام از یکی از پلاگین های fun اون به نام  postcss-canadian-stylesheets اینجا مثال بزنم :

var postcss = require('postcss');

module.exports = postcss.plugin('postcss-canadian-stylesheets', function (opts) {
    opts = opts || {};

    return function (css) {
        css.eachDecl(function transformDecl(decl) {
            decl.prop  = decl.prop.replace('colour', 'color');
            decl.value = decl.value.replace('grey', 'gray');

            if (decl.value.indexOf('!sorry') >= 0) {
                decl.value = decl.value.replace(/\s*!sorry\s*/, '');
                decl.important = true;
            }
        });
    };
});

 

همونطور که از کد این پلاگین معلومه ، کاربردش اینه که دستورات css رو تغییر بده مثلا به جای color: #fff نوشت colour: #fff 🙂 به همین سادگی

/*your code*/
body {
	colour : #373737;
}
/*postcss output*/
body {
	colour : #373737;
}

یک مثال عملی با استفاده GulpJS Task runner :

var gulp = require('gulp'),
	postcss = require('gulp-postcss'),
	processors = [
		require('postcss-simple-cars'),
		require('postcss-nested')
	]

	gulp.task('css',function() {
		return gulp.src('stylesheets/app.css')
		.pipe(postcss(processors))
		.pipe(gulp.dest('css/'))

	})
	gulp.task('watch',function() {
		gulp.watch('stylesheets/*.css' , ['css'])


	})
	gulp.task('default' , ['css' , 'watch'])

و حالا کد css شما با Postcss :

//variables
$body-bg: #fff !sorry;
$body-font-color: #222 !sorry;
$body-font-family: 'iran';
font-family-bold: 'iran-bold';
$text-direction: rtl !sorry;
$cursor-auto-value: auto 
$body-font-style: normal !
$body-font-weight: normal !sorry;
$body-font-style: normal 
$base-line-height: 1.5 !sorry;

   body {
      background: $body-bg;
      cursor: $cursor-auto-value;
      font-family: $body-font-family;
      font-style: $body-font-style;
      font-weight: $body-font-weight;
      line-height: $base-line-height; 
      margin: 0;
      padding: 0;
      position: relative;
      direction: $text-direction;

        strong {
          font-family: $font-family-bold;
        }
    }

و خروجی کد شما این خواهد شد :

   body {
      background: #fff !important;
      cursor: auto;
      font-family: 'iran';
      font-style: normal;
      font-weight: normal !important;
      line-height: 1.5 !important; 
      margin: 0;
      padding: 0;
      position: relative;
      direction: rtl;
    }

    body strong {
      font-family: 'iran-bold';
    }

 از تاریخ جولای ۲۰۱۵ هم وب سایت codepen از post css پشتیبانی میکنه و یه سری پلاگین های رو توی خودش جا داده و شما میتونید از اونا استفاده کنید. لینک

See the Pen Responsive Tables by Charles Peters (@charlespeters) on CodePen.

اما بزرگ ترین مشکلی که میشه به Post css گرفت چیست ؟

فرایند انجام کار رو بیشتر میکنه ، فرضا اگر شما از sass استفاده میکنید فقط کافیه از یه کامپایلری استفاده کنید مثل compass برای برای post css باید اول پلاگینش رو نصب کنید، کدش رو استفاده کنید ودر نهایت خروجی رو انجام بگیرید.

 

نتیجه گیری :

post css آخرین تکنولوژی استفاده از css هست که هنوز خیلی رواج پیدا نکرده اما ممکنه در آینده سیستم های تولید بشن که post css رو راحت تر کنند و استفاده از اون رواج پیدا کنه، طبق استفاده ای که خودم از post css انجام دادم، استفاده از اون برای پروژه های بزرگ شاید خیلی خوب نباشه ولی مثلا واسه یه پروژه کوچیک یا یه صفحه لندیگ استارتاپی میتونه خیلی خوب باشه، البته لازمه گفت که الان بعضی از پلاگین های آن خیلی خیلی محبوب شدند. به هر حال بهتره post css رو یاد بگیرید چون زمانی حتما بدرتون میخوره و رواج پیدا میکنه مثل زمانی معرفی flex box که زمانی فقط اموزش بود و الان استفاده ازش خیلی زیاد شده.

 میتونید برای کسب اطلاعات بیشتر از صفحه گیتهاب post css و همچنین لیست پلاگین های نوشته شده دیدن کنید.

دیگر نوشته های مرتبط با این دسته بندی