Menu
We have some custom style definitions in our application. Currently all developers are adding styles to the app.css. But we don't want to make it a huge file. And also we don't want to mess the style classes.
How can we place our custom styles on our application? Is there a best practices to do it? (All guide/document references are welcome.)
And a second question: Is there a place to put styles of a specific route or component?
Updated: To be more specific, I want to apply the following style to only a specific route or component:
body {
font-size: 13px;
}
table {
table-layout: fixed;
}
965
Ember. js is a frontend web framework which claims on its website, to be the one tool you will need to build an ambitious web application.
Ember. js is a framework for building single-page applications (SPAs). The defining difference between SPAs and standard applications is that SPAs rely on a one-page interface.
It prints the model data and automatically updates itself when the model changes. Ember. js uses Handlebars, a lightweight templating engine also maintained by the Ember team. It has the usual templating logic, like if and else , loops and formatting helpers , that kind of stuff.
Organization of your CSS files is rather subjective. Many people have different approaches. Here's an approach that works well for me. Note that I am using ember-cli-sass.
app/styles/app.scss
@import "defaults/variables";
@import "defaults/typography";
// etc...
@import "components/buttons";
@import "components/modals";
// etc...
@import "sections/about";
@import "sections/home";
// etc...
All of the files listed above would be considered "partials", so the filenames would be prefixed with an underscore:
├── app.scss
├── defaults
│ ├── _typography.scss
│ └── _variables.scss
├── components
│ ├── _buttons.scss
│ ├── _modals.scss
│ └── _my-specific-component.scss
└── sections
├── _about.scss
└── _home.scss
The "default" stylesheets are meant to provide generic styles that apply throughout the app. This includes typically CSS reset styles.
The "section" stylesheets apply styles that are specific to certain pages. In the templates, usually there is some sort of wrapper element with an ID or class that is unique to that page/section.
<section id="home">
<h1>Welcome to my homepage</h1>
<section>
Lastly, the "component" stylesheets apply styles that are specific to the type of component. Some of these are for various generic button styles, while others are extremely specific.
137
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
