priority-a-rules-essential #121
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
the-pesar
approved these changes
Dec 14, 2023
|
|
||
| These rules help prevent errors, so learn and abide by them at all costs. Exceptions may exist, but should be very rare and only be made by those with expert knowledge of both JavaScript and Vue. | ||
| به کمک این قوانین از ارورها جلوگیری میشه. پس به هر هزینه ای این قوانین را یاد بگیرید و استفاده بکنید. شاید استثناتی به صورت خیلی نادر توسط کسانی که در vue و جاوا اسکریپت حرفه ای هستند وجود داشته باشد. |
There was a problem hiding this comment.
Suggested change
| به کمک این قوانین از ارورها جلوگیری میشه. پس به هر هزینه ای این قوانین را یاد بگیرید و استفاده بکنید. شاید استثناتی به صورت خیلی نادر توسط کسانی که در vue و جاوا اسکریپت حرفه ای هستند وجود داشته باشد. | |
| این قوانین به جلوگیری از خطاها کمک می‌کنند، پس حتماً آنها را یاد بگیرید و همیشه از آنها پیروی کنید. ممکن است استثناهایی وجود داشته باشد، اما باید بسیار نادر باشند و توسط کسانی که در Vue و جاوااسکریپت حرفه ای هستند، اعمال شوند. |
|
|
||
| ## Use multi-word component names {#use-multi-word-component-names} | ||
| ## از کامپوننت های چند-اسمی استفاده کنید {#use-multi-word-component-names} |
There was a problem hiding this comment.
Suggested change
| ## از کامپوننت های چند-اسمی استفاده کنید {#use-multi-word-component-names} | |
| ## از نام‌های چند کلمه‌ای برای کامپوننت‌ها استفاده کنید {#use-multi-word-component-names} |
| ## Use multi-word component names {#use-multi-word-component-names} | ||
| ## از کامپوننت های چند-اسمی استفاده کنید {#use-multi-word-component-names} | ||
|
|
||
| کامپوننت های استفاده شده باید همیشه به صورت چند-اسمی باشند، به جز برای کامپوننت ریشه یا همان کامپوننت `App`. به این صورت [از نا سازگاری جلوگیری میشود](https://html.spec.whatwg.org/multipage/custom-elements.html#valid-custom-element-name) یعنی از ناسازگاری با تگ های HTML چون تگ های HTML همیشه تک اسمی هستند. | ||
|
|
|
|
||
| In committed code, prop definitions should always be as detailed as possible, specifying at least type(s). | ||
| ::: توضیح جزئیات |
There was a problem hiding this comment.
Suggested change
| ::: توضیح جزئیات | |
| ::: details توضیحات بیشتر |
|
|
||
| In committed code, prop definitions should always be as detailed as possible, specifying at least type(s). | ||
| ::: توضیح جزئیات | ||
|
|
|
|
||
| This is only relevant for [Single-File Components](/guide/scaling-up/sfc). It does _not_ require that the [`scoped` attribute](https://vue-loader.vuejs.org/en/features/scoped-css.html) be used. Scoping could be through [CSS modules](https://vue-loader.vuejs.org/en/features/css-modules), a class-based strategy such as [BEM](http://getbem.com/), or another library/convention. | ||
| این مورد فقط مربوط به [Single-File Components](/guide/scaling-up/sfc) میشه. و لازم _نیست_ که [ویژگی `scoped`](https://vue-loader.vuejs.org/en/features/scoped-css.html) استفاده بشه. اسکوپ میتونه با [CSS modules](https://vue-loader.vuejs.org/en/features/css-modules) باشه, و متولوژی بر اساس کلاس مثل [BEM](http://getbem.com/), و یا لایبری ها و یا قرارداد های دیگه. |
There was a problem hiding this comment.
Suggested change
| این مورد فقط مربوط به [Single-File Components](/guide/scaling-up/sfc) میشه. و لازم _نیست_ که [ویژگی `scoped`](https://vue-loader.vuejs.org/en/features/scoped-css.html) استفاده بشه. اسکوپ میتونه با [CSS modules](https://vue-loader.vuejs.org/en/features/css-modules) باشه, و متولوژی بر اساس کلاس مثل [BEM](http://getbem.com/), و یا لایبری ها و یا قرارداد های دیگه. | |
| این تنها در مورد [Single-File Components](/guide/scaling-up/sfc) مرتبط است. این موضوع نیازی به استفاده از [`scoped` attribute](https://vue-loader.vuejs.org/en/features/scoped-css.html) ندارد. این محدود کردن می‌تواند از طریق [ماژول‌های CSS](https://vue-loader.vuejs.org/en/features/css-modules)، یک استراتژی مبتنی بر کلاس مانند [BEM](http://getbem.com/) یا یک کتابخانه/توافق دیگر باشد. |
|
|
||
| **Component libraries, however, should prefer a class-based strategy instead of using the `scoped` attribute.** | ||
| **با این حال کامپوننت لایبرری ها بهتره که به جای صفت `scoped` از استایل دهی بر اساس کلاس استفاده کنند.** |
There was a problem hiding this comment.
Suggested change
| **با این حال کامپوننت لایبرری ها بهتره که به جای صفت `scoped` از استایل دهی بر اساس کلاس استفاده کنند.** | |
| **اما کتابخانه‌های کامپوننت، بهتر است به جای استفاده از ویژگی `scoped`، از یک استراتژی مبتنی بر کلاس استفاده کنند.** |
|
|
||
| This makes overriding internal styles easier, with human-readable class names that don't have too high specificity, but are still very unlikely to result in a conflict. | ||
| این باعث میشه بازنویسی استایل ها با کلاس های با اسامی خوانا که لازم نیست خیلی به خصوص باشه راحتتر باشه، در عین حال احتمالش کمه که باعث تداخل تو نتایج بشه. |
There was a problem hiding this comment.
Suggested change
| این باعث میشه بازنویسی استایل ها با کلاس های با اسامی خوانا که لازم نیست خیلی به خصوص باشه راحتتر باشه، در عین حال احتمالش کمه که باعث تداخل تو نتایج بشه. | |
| این امر انجام تغییر در استایل‌های داخلی را آسان‌تر می‌کند، با نام‌گذاری‌های کلاس قابل فهم برای انسان که لازم نیست خیلی به خصوص باشد، اما هنوز احتمال وقوع تداخل را به شدت کاهش می‌دهند. |
Comment on lines
+344
to
+345
| ::: توضیح جزئیات | ||
| اگه شما در حال توسعه پروژه های با ابعاد بزرگ هستید که با برنامه نویس های دیگه ای روش کار میکنید و یا از HTML/CSS های خارجی (مثل Auth0) استفاده میکنید. استفاده اسکوپ باعث میشه که مطمئن بشید استایل های شما فقط به کامپوننت های مورد نظر اعمال میشن. |
There was a problem hiding this comment.
Suggested change
| ::: توضیح جزئیات | |
| اگه شما در حال توسعه پروژه های با ابعاد بزرگ هستید که با برنامه نویس های دیگه ای روش کار میکنید و یا از HTML/CSS های خارجی (مثل Auth0) استفاده میکنید. استفاده اسکوپ باعث میشه که مطمئن بشید استایل های شما فقط به کامپوننت های مورد نظر اعمال میشن. | |
| ::: details توضیحات بیشتر | |
| اگر در حال توسعه یک پروژه بزرگ هستید، با دیگر توسعه‌دهندگان همکاری میکنید یا گاهی اوقات کد HTML/CSS شخص ثالث را وارد میکنید (مثلاً از Auth0)، استفاده مداوم از اسکوپ اطمینان حاصل می‌کند که استایل‌های شما فقط بر روی کامپوننت‌هایی که برایشان طراحی شده‌اند، اعمال شوند. |
|
|
||
| Beyond the `scoped` attribute, using unique class names can help ensure that 3rd-party CSS does not apply to your own HTML. For example, many projects use the `button`, `btn`, or `icon` class names, so even if not using a strategy such as BEM, adding an app-specific and/or component-specific prefix (e.g. `ButtonClose-icon`) can provide some protection. | ||
| علاوه بر صفت `scoped`, استفاده از اسم کلاس های منحصر به فرد باعث اطمینان میشه که کلاس های CSS های خارجی روی کامپوننت های شما اثری نمیزان. برای مثال در بیشتر پروژه ها از کلاس های `button`, `btn`, یا `icon` استفاده میشه, پس حتی اگه از استراتژی هایی مثل BEM هم استفاده نکنید, اضاقه کردن پیشوند بخصوص اپلیکیشن و یا کامپوننت ( `ButtonClose-icon` مثل) میتونه تا حدی باعث محافظت بشه. |
There was a problem hiding this comment.
Suggested change
| علاوه بر صفت `scoped`, استفاده از اسم کلاس های منحصر به فرد باعث اطمینان میشه که کلاس های CSS های خارجی روی کامپوننت های شما اثری نمیزان. برای مثال در بیشتر پروژه ها از کلاس های `button`, `btn`, یا `icon` استفاده میشه, پس حتی اگه از استراتژی هایی مثل BEM هم استفاده نکنید, اضاقه کردن پیشوند بخصوص اپلیکیشن و یا کامپوننت ( `ButtonClose-icon` مثل) میتونه تا حدی باعث محافظت بشه. | |
| علاوه بر ویژگی `scoped`، استفاده از نام‌های کلاس منحصر به فرد می‌تواند به اطمینان از اینکه CSS شخص ثالث بر روی HTML شما اعمال نشود، کمک کند. به عنوان مثال، بسیاری از پروژه‌ها از نام‌های کلاسی مانند `button`، `btn` یا `icon` استفاده می‌کنند، پس حتی اگر از استراتژیی مانند BEM استفاده نمی‌کنید، اضافه کردن یک پیشوند خاص برای برنامه یا کامپوننت (مثلاً `ButtonClose-icon`) می‌تواند تا حدی باعث محافظت شود. |
|
It seems to be merged :) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
No description provided.