Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 8 years ago.
Improve this question
I am starting to follow the SMACSS principle when writing CSS. Having read the book twice, I think I got a good grip on the theory, but now I've got some problems putting that to actual work.
In my base folder, I've got normalize.css together with a custom CSS reset, that for some parts overwrites, for other parts extends normalize.
Now I've created a class that removes all padding & list-style from a list. So that class depends on the styling defined previously, but is neither state or module to me.
Where do I put in such a class?
As said by Evgeniy this should be in base in case you want to use it as default.
But another concern: If you don’t fetch normalize.css via bower or npm or git, you should best modify the css there to fit to your styling instead of overwriting rules later on. This saves you filesize and also keeps specifity low and under control.
If you fetch it with a package manager there’s still some post processor like uncss which can remove the duplicated rules in a post processing step. It can be a bit tricky to configure but works pretty well and can save a lot of bytes.
If this modification should be applied as default for all lists (like reset) - you need to put it to BASE.
If this modification is only for some special pages, then use THEME.
In other cases it should be placed into MODULE, as some base class like .m-list or sub-class .m-list-plain
Related
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 2 years ago.
Improve this question
I am new to CSS and I wanted to know what is the best practice Internal Style or External Style or Inline Style as a beginner. Please tell me the basic difference also.
Here, you can find the differences between the three: https://www.w3schools.com/css/css_howto.asp
The most common one on regular websites are external stylesheets. It's the cleanest way because you separate your structure (HTML) from your styles (CSS). Internal CSS is not used a lot when hard coding a website, but it can be legit in some module based architectures. Inline CSS is also used a lot when you work with JavaScript to add styles to elements programmatically.
Edit: as cooskun wrote, the specificity is different between internal/external and inline. Inline get parsed at the end, so it is more specific. With internal and external it depends on which you declare last.
[Please try to Google your question before you post it, I am sure this has been asked before. I am not yet allowed to comment questions]
The first thing is the specificity. I could explain this detailed but it's better to have a look on this fancy website which explains the specificity perfectly.
CSS Specificity
The second reason is the code organization. If you prefer inline-style then you can't reuse your code and it makes the code hard to read, hard to maintain, hard to ...
My recommendation, go with external styles. When you have more experience in CSS, you will know where is the best place to use inline styles.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
As the title says, I want to 'purify' the CSS of my rails application, to find unused CSS selectors.
I found a gem called deadweight but is too old. I can't even install it today (Dependencies failing)
So, is there another or actual way to clean the CSS? or an alternative to deadweight?
Thanks a lot!
As mentioned in the comment, there is a good reason why you shouldn't be looking for such a tool - javascript. Even though, given selector might not exist in your templates, you might have some javascript which will add a class to one DOM element, an attribute to another and you might have another rare case which will add another class to another element or move it complete somewhere else inside the DOM.
To actually find whether your CSS selector exists or not, your tool would need to render all your templates and keep executing random js events until given selector shows off - and it will need to be able to tell whether it is ever gona find it. This is a halting problem, proved to be computable impossible to solve.
That being said, you can always use tools like the one listed on other answers - they might give you a list of suspicious selectors, however you will need to spend significant amount of time with every single one of them to find if there is a single case in your application when it can actually be used.
Word of warning: DustMe crawl the website through all the links on your page to get a better view of whole website - you don't use link_to ..., method: <post|delete|put>, do you?
Here are a few other solutions that might be worth trying:
dust me selector Firefox add on
Helium Tool
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 7 years ago.
Improve this question
I'm always looking to learn from the best and ensure coding quality.
When it come to CSS styling within my responsive designs, my custom CSS style sheet can get a bit overwhelming. Constantly hitting ⌘ + F (Control + F) to locate my classes.
I could split sections of my classes into multiple style sheets (for example: media.css, typography.css etc...) however I believe calling into to many style sheets may jeopardise performance.
What are the best practices in keeping your CSS organised and well manageable?
Keep in mind that the file structure for production does not necessarily need to be the same as development.
Split up the files logically in development and group them together as needed for production. How the files are organized totally depends on your project. Of course, this implies that you have some sort of deployment pipeline in which to concatenate the files. This is not always feasible for small websites. There are hacky ways to glob files dynamically at runtime on the server, but that adds latency to the total request time.
One important advantage to this is reusability of common styles. You could have style libraries that are included in multiple stylesheets. When you need to change the core library, you're making the change in one place as opposed to many.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I just started to explore the Bootstrap project which seems nice to use in web development. I read some articles, some of them where sceptical to the combination of Wordpress and Bootstrap. This was due to the fact that (as I understand it) Bootstrap has it's own pre defined classes that you are supposed to add to your html tags, while Wordpress has another set of classes for the same elements.
I understand the problem and I would like to know if there are any "best practices" regarding this. I know that there exists plugins for this task but I like to understand this myself. I think that the trickiest part is the auto generated wp-menus and those things, am I right?
Question:
I think (without further investigation) that I in some situations want to map a wordpress class (eg. wp-menu classes) to a Bootstrap class. How do I do that?
Twitter Bootstrap will help you to build responsive theme for wordpress quickly. You can check the following link to know the difference of major common twitter bootstrap's classes that means when you should use which sets of class. If you want to add or alter the class of Wordpress menu, you should customize the Walker_Nav_Menu class. This link will help you. You can follow the wordpress standard. And finally there are many wordpress theme development frameworks which have already bootstrap. i.e. roots, underscores and so on. I like these both.
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 9 years ago.
Improve this question
I have a website, and its separated between sections, my question is:
Is it a good pratice to separate the css files for each section?
Ps.: I have a 'global' css stylesheet.
What is it you mean by sections?
General practice (as far as I know) is to have one global style sheet to style the entire look of the site.
From there you can use combinations of minimal inline styling if needed and perhaps other style sheets for specific "plugin" like objects or sections.
In the end it's your call. There are pros and cons to any way you approach it.
With one giant containing style sheet, maintainability can become difficult. Searching through thousands of line of code 3 months later when you need to make a minor tweak is a bit tough.
On the other side, many smaller style sheet means more external file calls from the website, which can slow load times (minimally).
My personal recommendation for using style sheets, use whatever method makes maintainability easiest. Use lots of comments and logical ordering.
For development I would say it is a good practice as it is easier to find what you are looking for faster or to point other developers to where they need to change some code. You can then bring in CSS preprocessors such as LESS and SASS to "build" your CSS for deployment only.
It depends...
If you feel that people may only visit one section of the site, you could avoid overhead by only serving the stylesheet for that section.
If a user will bounce around between the sections, they will need both stylesheets and it makes sense to merge them.
As far as best practices are concerned, there aren't any one size fits all for segmenting CSS. It is generally accepted to just try and minimize HTTP requests and file size as well as reusing code as often as possible. Other than that, you can use your best judgement.