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 3 years ago.
Improve this question
I noticed in Jira, they have obfuscated the CSS classes, so they look odd and they are different on every page refresh:
<div class="sc-dYaWWc dJrjAK">
<div class="sc-iLVaha hfGHeD">
<div class="sc-geAxOV krrXnm">
<div class="sc-bJT2cE bPFEwh">
<div class="sc-imDrJI jKvdHw">
<div class="sc-hAhkBK epXQAj">
...
What is the motivation behind this, maybe to prevent crawlers or other security concerns? Is it a worthwhile practice for general app development?
The main reason of obfuscated/scrambled CSS class names is the usage of CSS modules to provide style encapsulation and size reduction.
Style encapsulation (and style leakage) is still a great issue on the web, especially when web apps and sites becoming more-and-more complex over their lifetime.
Soon (hopefully), we'll have Shadow DOM capabilities in all browsers, until then some form of modular CSS solution is needed to properly encapsulate styles. Check out this article about it.
In summary:
CSS Modules provide modular,
reusable, and cross-browser solutions for:
Conflictless styles
Direct and clear style dependencies
Avoiding global scopes
React, Angular and Vue use their own solutions to this problem in their build-chain. Most modern MV* frameworks use CSS modules in some form.
And of course, one other benefit of using CSS modules is the initially more complex methods to successfully scrape the content of the specific web page.
Atlassian use react-css-modules for obfuscate and optimize his template for a simple reason:
Obfuscated CSS class names == smaller bundle size == less amount of data to transfer over network.
Obviously the obfuscate class is only on production build not on development stage.
modules property tells Webpack that class names needs to be obfuscated. You can set it to false in dev build and class names will stay the same as in CSS file. That is very useful for development.
Text from How to obfuscate CSS class names with React and Webpack.
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
Some time ago I created a front-end framework in html/css/jquery for dashboard creation for my company (something very complete) using classes like bootstrap.
Only, the new projects of my company will be done in react, and I need to adapt everything. I was thinking of simply importing the scss as several linked files, and use it simply by adapting some parts of the jQuery by the state react, especially for the onHover of the navbar and the header.
Well, this solution is extremely temporary because it implies each time to copy/paste the scss folder, it's not great, and my final goal will be to have a library of react components that you import with a simple npm install, like react bootstrap :
<Button {props} />
<Navbar>
<Navbar.Brand.../>
</Navbar>
But also to be able to use the grid and the "simple" classes which are defined in the css of the library :
<div className="col-6">
<div className="card">
</div>
<div>
My explanation may not be very clear, but basically I'd like to create/use the main components with the lib, and use the scss classes of the lib...
Is this possible? If so, what would be the most suitable solution, knowing that I was thinking of making a library with storybook...
I came across a similar usecase.
You can use https://www.npmjs.com/package/create-react-library npm package.
It will reduce lot of your work.just focus on writing components/scss and check the dist same time with a test application provided by the package.
It works well!
I am in the same boat as you, I created a set of components that I used in one project and needed to use in others without copying and pasting. The best solution I have found so far is Lerna. It will not be easy and there is a big learning curve but after I spent some time on it I was able to get your desired result and have my own private npm packages that my team can install on projects without copying and pasting. Since you want to use storybook this may help.
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 4 years ago.
Improve this question
I am new the css front-end programming, I am applying the css into my web pages, and using bootstrap, but I found that a sentences described as the title, I don't understand the meaning of "masthead pdng-stn1" and the meaning of "phone-box". I can't find the definition of them in the bootstrap.css and all of the css files in my folders, but they can't be deleted otherwise the web pages can't display properly, please give help, thanks a lot!
Welcome to StackOverflow! I would recommend browsing the How to Ask a Good Question documentation. That said, generally "classes" are just a way to group/categorize elements on a page and apply like-styles to them. pdng-stn1 is clearly a poorly thought out name, and whatever it means would have made more semantic sense, like pudding-stain1 or whatever. They're not necessarily related to Bootstrap in any way. masthead is often synonymous with header or page-top, something like that. You really just need to dive through the source code, or read the documentation that comes with whatever frameworks your website is using.
If you'd like you can read up on the basics of CSS Class Selectors. They're essentially entirely arbitrary and are chosen based on the current developer's needs and desires for structure, or for integration/semantic similarity with the current framework.
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 6 years ago.
Improve this question
I am doing some research for a large project which will use reactJs and all html elements will be converted to React Components.
As we all know, css has a big problem with globals so there is a lot of posibility of css conflicts.
There are lots of different options for this including:
Atomic Design
SMACSS
OOCSS
or using libraries like:
Radium
React Style
React Inline
jsxstyle
React JSS
React Inline CSS
React Look
React Statics Styles
All of these have something good but at the same time all are under experiment and missing things.
In other words none of them solve all the css problems in react component styling or some just try to solve a problem that isn't there.
After trying all of them I am half way thinking that I should just link to common styles css files and have a css file specific to each component and target that css file from within the component.
Has anyone here had experience in styling react components in large project and have any feedback on it or suggestions?
I simply cannot make up my mind on just using straight css or javascript for this.
Is there anything I've missed to research?
There's nothing wrong on including CSS with your solution, SASS and LESS are awesome.
However, I personally like inline styles a as a plain JS object because it gives you the whole power of JS, so you can be as dynamic as you want, make the calculations all the calcs you need without pre-processing css, etc...
The React team has been investing in this for a while (React Native already uses this by default) here's a to React Native Styles, and a Presentation from a Facebook engineer, and a Proposal from the reactjs/react-future repo, and there are nice libraries like Radium which helps you a lot.
CSS in JS is surely getting better each day, so yeah, I'd advise on making that jump. :)
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 9 years ago.
Improve this question
I'm adding many class names (6 or 7) to the HTML elements for the requirement of my client javascripts. Some of them are real class names, but some of them are just indicators. Does this impact my page performance?
Well, technically more html means slower. But not that much, not noticable. Each character you write is a byte more to download, so it takes a while before you notice some differences.
The main problem that could occur is your css growing because you denormalize, that will have a much bigger impact.
If you need better performance, optimise images, or stylesheets, or some javascript codes
Short answer: No, this is does not change anything significant.
This is a legitimate question because there can be very valid CSS and HTML that have best nesting and separation in the CSS that result in multiple CSS classes per element, and as you say, if you have marker classes for JavaScript lookups that adds to the volume. I cannot find any good performance analysis, but it shouldn't be hard to test.
This Multiple classes in markup - will it slow down performance? basically says more classes = slower, but I don't know if that's true if each class has smaller content due to neater nesting in the hierarchy and better separation.
This http://www.stevesouders.com/blog/2009/03/10/performance-impact-of-css-selectors/ is somewhat related and shows that complex CSS of well known sites is rendered efficiently.
My answer is that from personal experience I have not noticed performance issues with this design pattern so if your structure is best served by multiple CSS classes and marker classes then that is the most important aspect and performance should not suffer.
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 am looking to make a slightly responsive design. I was curious to know how people feel on loading a responsive design, should I load in a new css file and use JS to define the screen size. Or should I create media queries inside the current css file and just go from there. Looking for opinion on speed and what people feel is the more optimal approach.
Putting everything regarding styles in the CSS files is the best practice.
HTML => Structure
CSS => Styles
JS => Logic
The more you separate concerns, the easier your code will be to mantain.
As javascript might be disabled you should use CSS-only for the responsive purposes.
If you really can't do without javascript (for moving an element in the dom for example) make sure that you've got some fallback css for non-js-enabled users.
In fact very very few users will disable javascript, unless they are in emergency(say, if they only have outdated mobile phone because their new ones have run out of batteries). If your site is not toward these situations, use javascript without concerning that users will disable.
Generally, putting media queries in one css file will be a good choice if the file size is reasonalbe, since one file makes fewer request than seperated files.
Javascript, on the other hand, is the very fallback because old IEs do not support media queries.
You can refer to some frameworks such as bootstrap. An implementation outdoes all answers.